创建第一个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  灰身  阅读(351)  评论(0编辑  收藏  举报