前端之Threejs學習筆記

3D圖形顯示例子:http://aleksandarrodic.com/p/jellyfish/

WebGL是在瀏覽器中實現三維效果的一種規範。

javascript的計算能力因爲google的V8引 擎得到了迅猛的增強,做3D程序,做服務器都沒有問題。

Three.js源碼下載地址:https://github.com/mrdoob/three.js

Three.js的源目錄結構:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋轉的方塊</title>
	<style>canvas{width: 100%; height: 100%}</style>
	<script src="three.js"></script>
</head>
<body>
	<script>
		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000);
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth,window.innerHeight)
		document.body.appendChild(renderer.domElement);
		var geometry = new THREE.CubeGeometry(1,1,2);
		var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
		var cube = new THREE.Mesh(geometry, material); scene.add(cube);
		camera.position.z = 3;
		function render() {
			requestAnimationFrame(render);
			cube.rotation.x += 0.1;
			cube.rotation.y += 0.1;
			renderer.render(scene, camera);
		}
		render()
	</script>		
</body>
</html>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章