创建第一个Three程序

      能点开这里，估计您对Three有所了解，那我也不必在此多做介绍了。这里仅为初学者提供一个学习参考，高手回避，呵呵~~

      因为比较简单，不多介绍，直接看代码吧，里面都有注释：

<html>
	<head>
		<title>My first Three.js app</title>
		<style type="text/css">canvas { width: 100%; height: 100% }</style>
	</head>
	<body style="background:#BCE">
		<script type="text/javascript" src="build/three.min.js"></script>
		<script type="text/javascript">
		    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, 1);  //创建多维数据集。这是一个对象，它包含所有的点（顶点）和填充（面）的立方体。
		    var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });  //设置颜色属性
		    var cube = new THREE.Mesh(geometry, material);  //网格立方体
		    scene.add(cube);

		    camera.position.z = 5;   //坐标位置

		    function render() {
		        requestAnimationFrame(render);  //创建一个循环渲染绘制场景，当用户导航到另一个浏览器选项卡它会暂停

		        cube.rotation.x += 0.1;  //设置回转 x 轴
		        cube.rotation.y += 0.1;  //设置回转 y 轴

		        renderer.render(scene, camera);
		    }
		    render();
		</script>
	</body>
</html>
posted @ 2013-03-18 16:40  灰身  阅读(362)  评论(0)    收藏  举报