<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.js测试7.2</title> </head> <body> <canvas ></canvas> </body> <script type="text/javascript" src="https://www.jb51.net/js/three.min.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({ color: 0xffff00, 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> </html>
3.phong材质
Phong材质（MeshPhongMaterial）是符合Phong光照模型的材质。和Lambert不同的是，Phong模型考虑了镜面反射的效果，因此对于金属、镜面的表现尤为适合。
漫反射部分和Lambert光照模型是相同的，镜面反射部分的模型为：
Ispecular = Ks * Is * (cos(alpha)) ^ n
其中，Ispecular是镜面反射的光强，Ks是材质表面镜面反射系数，Is是光源强度，alpha是反射光与视线的夹角，n是高光指数，越大则高光光斑越小。
由于漫反射部分与Lambert模型是一致的，因此，如果不指定镜面反射系数，而只设定漫反射，其效果与Lambert是相同的：
new THREE.MeshPhongMaterial({ color: 0xffff00 });
同样地，可以指定emissive和ambient值，这里不再说明。下面就specular值指定镜面反射系数作说明。首先，我们只使用镜面反射，将高光设为红色，应用于一个球体：
var material = new THREE.MeshPhongMaterial({ specular: 0xff0000 }); var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material);
效果为：
可以通过shininess属性控制光照模型中的n值，当shininess值越大时，高光的光斑越小，默认值为30。我们将其设置为1000时：
new THREE.MeshPhongMaterial({ specular: 0xff0000, shininess: 1000 });
效果为：
使用黄色的镜面光，红色的散射光：
material = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffff00, shininess: 100 });
总结Phong材质的特有属性：
ambient：设置材质的环境色，和AmbientLight光源一起使用，这个颜色会与环境光的颜色相乘。即是对光源作出反应。
emissive：设置材质发射的颜色，不是一种光源，而是一种不受光照影响的颜色。默认为黑色
specular：指定该材质的光亮程度及其高光部分的颜色，如果设置成和color属性相同的颜色，则会得到另一个更加类似金属的材质，如果设置成grey灰色，则看起来像塑料
shininess：指定高光部分的亮度，默认值为30.
源码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.js测试7.3</title> </head> <body> <canvas ></canvas> </body> <script type="text/javascript" src="https://www.jb51.net/js/three.min.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({ // specular: 0xff0000, color: 0xff0000, specular: 0xffff00, shininess: 100 }); // 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> </html>
总结