初学three.js 入门

<script src="http://threejs.org/build/three.js"></script>

<script>
	// 建立场景
	var scene=new THREE.Scene();
	// 建立相机  透视相机          
							// 视野：在显示器上看待的场景的范围
							// 宽高比：
							// 3/4 近和远裁剪平面   远离相机或距离很近的物体不会被渲染
	var camera=new THREE.PerspectiveCamera(35,window.innerWidth/window.innerHeight,0.1,1000);
	// 建立渲染器
	var renderer=new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth/2,window.innerHeight/2);
	// 渲染器显示场景
	document.body.appendChild(renderer.domElement);
	// 添加几何
	var geometry=new THREE.BoxGeometry(1,1,1);
	// 上色
	var material=new THREE.MeshBasicMaterial({color:0xff0000});
	// 网格对象 需要一个几何体并上色
	var cube=new THREE.Mesh(geometry,material);


	// 插入场景中 默认添加到的位置是(0,0,0)，此时相机和立方体在彼此内部
	scene.add(cube);
	// 为避免上述情况，将相机移出一点点
	camera.position.z=3;




	// 渲染  不进行渲染或者动画循环我们将无法看到任何内容
	function animate(){
		requestAnimationFrame(animate);
		cube.rotation.x+=0.01;
		cube.rotation.y+=0.01;
		renderer.render(scene,camera);
	}
	animate();
</script>

<!-- 疑惑点解惑start -->
<!-- 如果使用three.js显示任何东西，我们需场景(scene)、相机(camera)、渲染器(renderer);
相机渲染场景 -->
<!-- 渲染其实就是建立了一个循环，每次刷新屏幕时渲染器都绘制场景。
1.为什么循环不使用定时器？
requestAnimationFrame优点：若用户点击去了别的选项卡，他会暂停不会浪费处理能力。
 -->

<!-- 疑惑点解惑end -->