three.js材质
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" src="libs/three.js"></script> <script type="text/javascript"> function init() {//init()函数是我们整个项目的入口 var renderer = new THREE.WebGLRenderer({//渲染器 canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene();//场景 // 相机 var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100); //正交投影照相机（Orthographic Camera）设置起来较为直观，它的构造函数是： //THREE.OrthographicCamera(left, right, top, bottom, near, far) camera.position.set(25, 25, 25);//相机位置 camera.lookAt(new THREE.Vector3(0, 0, 0));//通过lookAt函数指定它看着原点方向，这样我们就能过仰望正方体了 scene.add(camera);//照相机需要被添加到场景中 // 灯光 var light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(10, 15, 5); scene.add(light);//创建好的灯光添加到场景中 //使用基本材质（BasicMaterial）的物体，渲染后物体的颜色始终为该材质的颜色， //不会由于光照产生明暗、阴影效果 var material = new THREE.MeshBasicMaterial({ color: 0xffff00;//黄色 opacity: 0.75;//不透明度为0.75 }); var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);//应用于一个正方体 scene.add(cube);//把立方体添加到场景中 renderer.render(scene, camera);//调用渲染器的渲染函数，就能使其渲染一次 } </script> </head> <body onload="init()"> <canvas id="mainCanvas" width="400px" height="300px" ></canvas> </body> </html>
lambert材质
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" src="libs/three.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set(25, 25, 25); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); // light var light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(10, 15, 5); scene.add(light); var material = new THREE.MeshLambertMaterial({ //Lambert材质（MeshLambertMaterial）是符合Lambert光照模型的材质 漫反射 color: 0xffff00,//创建一个黄色的Lambert材质 //color是用来表现材质对散射光的反射能力，也是最常用来设置材质颜色的属性 //emissive: 0xff0000 }); var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material); scene.add(cube); //var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material); //scene.add(sphere); renderer.render(scene, camera); } </script> </head> <body onload="init()"> <canvas id="mainCanvas" width="400px" height="300px" ></canvas> </body> </html>
color是用来表现材质对散射光的反射能力，也是最常用来设置材质颜色的属性。除此之外，还可以用ambient和emissive控制材质的颜色。
ambient表示对环境光的反射能力，只有当设置了AmbientLight后，该值才是有效的，材质对环境光的反射能力与环境光强相乘后得到材质实际表现的颜色。
emissive是材质的自发光颜色，可以用来表现光源的颜色。单独使用红色的自发光：
new THREE.MeshLambertMaterial({ emissive: 0xff0000 })
效果为：
如果同时使用红色的自发光与黄色的散射光：
new THREE.MeshLambertMaterial({ color: 0xffff00, emissive: 0xff0000 })
效果为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" src="libs/three.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set(25, 25, 25); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); // light var light = new THREE.PointLight(0xffffff, 1, 200); light.position.set(10, 15, 25); scene.add(light); var material = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffff00,//使用黄色的镜面光，红色的散射光： shininess: 100//可以通过shininess属性控制光照模型中的n值，当shininess值越大时，高光的光斑越小 }); var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material); scene.add(sphere); renderer.render(scene, camera); } </script> </head> <body onload="init()"> <canvas id="mainCanvas" width="400px" height="300px" ></canvas> </body> </html>
法向材质
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" src="libs/three.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set(25, 25, 25); //材质的颜色与照相机与该物体的角度相关，下面我们只改变照相机位置，观察两个角度的颜色变化 camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); // light var light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(10, 15, 5); scene.add(light); var material = new THREE.MeshNormalMaterial();//法向材质的设定很简单，甚至不用设置任何参数： var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material); scene.add(cube); renderer.render(scene, camera); } </script> </head> <body onload="init()"> <canvas id="mainCanvas" width="400px" height="300px" ></canvas> </body> </html>
camera.position.set(25, 25, 5);
