我的threejs学习笔记（一）

生成three.js场景的基本步骤

---

一、引入jquery和threejs（注意顺序，jquery在后） 1. <script src="../three.js-master/build/three.js"></script> 2. <script src="../jquery/jquery.js"></script>

二、内联css控制场景布满页面

<style> body{ margin:0; overflow: hidden; } canvas{ /*width:100%;*/ /*height:100%;*/ } </style>

三、生成场景

var scene=new THREE.Scene();

四、设置相机

var camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000); camera.position.z=3;

75为角度，第二个场景宽高比，正常视角应为页面的宽高比。0.1和1000分别为相机的近景和远景范围。并设置相机位置。

五、设置渲染器

var renderer=new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth,window.innerHeight); renderer.setClearColor(0xddffaa); document.body.appendChild(renderer.domElement);

默认使用WebGLRenderer,然后设置渲染的宽度和高度，同样应为浏览器的宽度和高度，然后设置场景背景颜色（可选），最后将该渲染器加入body

六、添加几何物体

设置大小 var cubeGeometry=new THREE.CubeGeometry(1,1,1); 设置材质 var cubeMaterial=new THREE.MeshBasicMaterial({color:0x00bb22});//这是基本材质 var cubeMaterial=new THREE.MeshLamberMaterial({color:0x00bb22});//这是可反射材质，可以场景中的光源产生反应 生成几何物体 var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);

THREE.Mesh( ) 函数。

七、添加光源

var light=new THREE.PointLight(0xff0000); light.position.z=2; light.position.y=2; scene.add(light);

点光源

八、渲染场景

renderer.render(scene,camera);

九、动画场景

var render=function () { requestAnimationFrame(render); angle+=0.07; cube.position.x=3*Math.sin(angle); sphere.position.x=-3*Math.sin(0.5*angle); sphere.rotation.x=angle; renderer.render(scene,camera); } render();

三角函数使物体做弹性运动

---

---

总结

three.js库要先于jquery库引入对body要设置 margin为0和overflow为hidden，从而使场景充满页面依次生成scene、camera、renderer，要设置renderer的size,也可以设置其背景，最后将renderer.domElement append到body。生成几何物体，添加到场景。可以添加光源。注意相机位置。渲染场景。