WebGL 入门 – 光源和投影
神说：“要有光”，就有了光。 Three.js内置了多种光源可以直接调用： lAmbientLight（环境光）lAreaLight（区域光）lDirectionalLight（平行光）lHemisphereLight（半球光）lPointLight（点光源）lSpotLight（聚光灯） 首先我们设置好基础的环境：<!DOCTYPE html><html><head> <metacharset="UTF-8"> <title>我的第一个WebGL程序</title> <style>body { margin: 0; overflow: hidden; }; canvas { width:100%;height: 100%; }</style></head><body> <script src="three.min.js"></script> <script> //创建场景 var scene = new THREE.Scene(); //创建摄影机 var camera = newTHREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(100, 100, 100); camera.lookAt(scene.position); //创建绿色立方体 var box = new THREE.Mesh( new THREE.CubeGeometry(5, 5, 40), new THREE.MeshLambertMaterial({ color: 0x00ff00 })); box.position.set(10, 20, 10); scene.add(box); //创建红色地面 var ground = new THREE.Mesh( new THREE.CubeGeometry(100, 1, 100), new THREE.MeshLambertMaterial({ color: 0xff0000, })); ground.position.set(0, 5, 0); ground.receiveShadow = true; scene.add(ground); //创建渲染器并把设置背景为蓝色 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColorHex(0x0000ff, 1); document.body.appendChild(renderer.domElement); //渲染画面 renderer.render(scene, camera); </script></body></html> http://static.cdn.pcbeta.com/data/attachment/album/201312/31/144801t2y67772u7g7rhti.png现在运行页面，我们只能看到蓝色的背景和一块黑色的几何体，因为我们还没有加入灯光，所以一切的物体都是黑色的。立方体和地面的材质均为MeshLambertMaterial（类似纸张，可以均匀反射接收到的光线）。 AmbientLight（环境光）环境光是一种无处不在的光，就好像现实世界中的空气。环境光的光线来自任何方向，因此，当你仅为场景指定环境光时，所有的物体无论向量如何，都将表现为同样的明暗程度。 环境光的构造函数THREE.AmbientLight只有一个参数——16进制的颜色值。AmbientLight( hex ) var light = new THREE.AmbientLight(0xff0000);scene.add( light ); 给场景添加红色的环境光后，立方体和地面都显示为红色： http://static.cdn.pcbeta.com/data/attachment/album/201312/31/144801t9r9thx791htj7it.pngDirectionalLight（平行光）平行光是一组具有方向的没有衰减的平行光线，它类似太阳光：虽然遥远但打在物体上的光都来自同一个方向。 环境光的构造函数THREE.DirectionalLight有两个参数——16进制的颜色值和光线的强度（默认为1）。 DirectionalLight(hex, intensity) var light = newTHREE.DirectionalLight(0xffffff, 0.5);light.position.set(100, 150, 50);scene.add(light); http://static.cdn.pcbeta.com/data/attachment/album/201312/31/144801v8zz8enmbbgo48ge.png我们在右上方定义了一个强度为50%的平行光，方向为右上角到原点，所以立方体和地面都暗暗的显示出了原本的颜色。 PointLight（点光源）点光源的光线来自同一点，并向外发射。就好像蜡烛发出的光和萤火虫发出的光。 点光源的构造函数THREE. PointLight有三个参数，比平行光多了一个距离参数，光会从光源经过distance的距离一路衰减为0。PointLight(hex, intensity, distance) var light = new THREE.PointLight(0xffffff,1, 300);light.position.set(50, 50, 50);scene.add(light); http://static.cdn.pcbeta.com/data/attachment/album/201312/31/144801thh07ztyzduz8dge.png以上是几个比较常用的光源，看过4个示例后，有没有发现有点不对劲？怎么没有阴影？ 投影Three.js的光源默认不会导致物体间的投影，打开投影需要执行以下几步： 打开渲染器的地图阴影: renderer.shadowMapEnabled = true;启用光线的投影：light.castShadow = true;把模型设置为生成投影：mesh.castShadow = true;把模型设置为接收阴影：mesh.receiveShadow= true; http://static.cdn.pcbeta.com/data/attachment/album/201312/31/144802nn3jzbue5nbbvs2f.png 完整的代码如下：<!DOCTYPE html><html><head> <metacharset="UTF-8"> <title>我的第一个WebGL程序</title> <style>body { margin: 0; overflow: hidden; }; canvas { width:100%;height: 100%; }</style></head><body> <script src="three.min.js"></script> <script> //创建场景 var scene = new THREE.Scene(); //创建摄影机 var camera = new THREE.PerspectiveCamera(45, window.innerWidth /window.innerHeight, 1, 10000); camera.position.set(300, 300, 300); //创建绿色立方体 var box = new THREE.Mesh( new THREE.CubeGeometry(5, 5, 40), new THREE.MeshLambertMaterial({ color: 0x00ff00 })); box.position.set(0, 15, 0); box.castShadow= true; scene.add(box); //创建红色地面 var ground = new THREE.Mesh( new THREE.CubeGeometry(200, 1, 200), new THREE.MeshLambertMaterial({ color: 0xff0000, })); ground.receiveShadow= true; scene.add(ground); //创建渲染器并把设置背景为蓝色 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x0000ff); renderer.shadowMapEnabled= true; document.body.appendChild(renderer.domElement); //添加聚光灯 varlight = new THREE.SpotLight( 0xffffff, 3 ); light.position.set(100, 200, 50 ); light.castShadow= true; light.shadowCameraNear= 50; light.shadowCameraFar= 300; light.shadowCameraFov= 30; scene.add(light ); //渲染画面 varrender = function() { requestAnimationFrame(render); box.rotation.y += 0.01; ground.rotation.y += 0.01; camera.lookAt(scene.position); renderer.render(scene, camera); }; render(); </script></body></html>
页:
[1]