创建第一个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>