ThreeJS入门

在javascript中使用Three.js设计而且实现3D场景是一个颇有意思的事情，由于在浏览器中就可以渲染出3D场景，很是简单和轻便。接下来就总结如下我学习Three.js过程当中的心得。

1 创建基本场景 在Three.js中有三要素：场景、摄像机和渲染器，只有以上三者结合才能渲染出可见的内容。固然在这以前你须要先下载Three.js文件，直接百度搜索Three.js到官网下载便可，下载完成以后新建一个html文件而且引入Three.js便可。一个最基本的使用Three.js的html文件应该是这样子的：

dawn1 3D body { margin: 0; } canvas { width: 100%; height: 100%; } 咱们打开浏览器看一下：

哦天哪，发生了什么，浏览器上黑乎乎一片什么都没有啊。

别急，这是由于咱们只是设置了三要素，但并无渲染，只有使用渲染器scene和camera进行渲染以后才能看到内容，在scene.add( cube ); 后面添加一句：

renderer.render(scene, camera); 再试试效果如何：

快看，如今屏幕中出现了一个正方形，这正是咱们所期待的！

可是，咱们使用的Three.js不该该是三维场景吗，为何如今只有平面效果？不急，接下来咱们使用requestAnimationFrame让画面动起来！

2 让画面动起来 将上一步中最后一句代码：

renderer.render(scene, camera); 替换为：

// 动画 function animate() {

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );

requestAnimationFrame( animate );
复制代码

} animate() 再到浏览器看看效果，若是没有什么问题的话，如今你所看到的画面应该是一个旋转的立方体：

不过我对这个效果仍是不满意，它看起来像是一个 正方体，但缺乏了阴影灯光效果，接下来咱们添加灯光效果。

3 添加光效 使用点光源THREE.SpotLight，代码以下：

// 光源 var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( -40, 60, -10 ); scene.add( spotLight ); // 光源 end 同时将cube的材质从MeshBasicMaterial换为MeshLamberMaterial，由于最基本的MeshBasicMaterial材质对光源不会有任何反应。

// 物体 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); // 物体 end

4 添加阴影效果 为了渲染阴影效果，须要对代码作以下修改：

renderer.setClearColor(new THREE.Color(0x000000, 1.0)); renderer.shadowMap.enabled = true; 同时要给立方体设置投射阴影：

cube.castShadow = true; 设置地面接受阴影：

plane.receiveShadow = true; 设置spotLight投射阴影：

spotLight.castShadow = true; 为了添加阴影效果，咱们须要设置一个平面来接受阴影，所以从新建立一个场景，源码以下：

dawn1 3D body { margin: 0; } canvas { width: 100%; height: 100%; }

渲染结果以下图：

好多色调都是须要本身去慢慢调的，反正调的本身舒服就好啦。 因此嘛，Come on together！