在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!