Three.js——基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质

个人简介

👀个人主页：前端杂货铺
🙋‍♂️学习方向：主攻前端方向，正逐渐往全干发展
📃个人状态：研发工程师，现效力于中国工业软件事业
🚀人生格言：积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js🍖数据结构与算法体系教程

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

内容	参考链接
WebGL专栏	WebGL 入门
Three.js（一）	创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化
Three.js（二）	scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机
Three.js（三）	聚光灯、环境光、点光源、平行光、半球光

文章目录

- 前言
- 一、基础网格材质
- 二、深度网格材质
- 三、法向网格材质
- 四、面材质
- 五、朗伯网格材质
- 六、Phong 网格材质
- 七、着色器网格材质
- 八、直线和虚线
- 九、联合材质
- 总结

前言

大家好，这里是前端杂货铺。

上篇文章我们学习了 聚光灯、环境光、点光源、平行光、半球光。接下来，我们继续我们 three.js 的学习！

在学习的过程中，如若需要深入了解或扩展某些知识，可以自行查阅 => three.js官方文档。

老规矩，我们先把本篇文章需要使用的 ./controls/index.js 补充完毕

const basicType = {// 颜色。默认为一个白色（0xffffff）的 Color 对象。color: {method: 'addColor',getValue: item => item.color.getStyle(),setValue: (item, value) => item.color.setStyle(value),},// skyColor: {method: 'addColor',getValue: item => item.skyColor.getStyle(),setValue: (item, value) => item.skyColor.setStyle(value),},// 光照强度。默认值为 1intensity: {method: 'add',extends: [0, 2],getValue: item => item.intensity,setValue: (item, value) => item.intensity = +value,},// 光源照射的最大距离。默认值为 0（无限远）distance: {method: 'add',extends: [0, 1],getValue: item => item.distance,setValue: (item, value) => item.distance = +value,},// 光线照射范围的角度。默认值为 Math.PI/3angle: {method: 'add',extends: [0, Math.PI / 2],getValue: item => item.angle,setValue: (item, value) => item.angle = +value,},// 决定了光线强度递减的速度。exponent: {method: 'add',extends: [0, 20],getValue: item => item.exponent,setValue: (item, value) => item.exponent = +value,},// 亮度opacity: {extends: [0, 1],getValue: item => item.opacity,setValue: (item, value) => item.opacity = +value},// 透明度transparent: {getValue: item => item.transparent,setValue: (item, value) => item.transparent = value},// 线框wireframe: {getValue: item => item.wireframe,setValue: (item, value) => item.wireframe = value},// 显隐visible: {getValue: item => item.visible,setValue: (item, value) => item.visible = value},cameraNear: {extends: [0, 50],getValue: (item, camera) => camera.near,setValue: (item, value, camera) => camera.near = value},cameraFar: {extends: [50, 200],getValue: (item, camera) => camera.far,setValue: (item, value, camera) => camera.far = value},side: {extends: [['font', 'back', 'double']],getValue: (item, camera) => 'font',setValue: (item, value) => {switch(value) {case 'font':item.side = THREE.FrontSide;break;case 'back':item.side = THREE.BackSide;break; case 'double':item.side = THREE.DoubleSide;break;}}},// 材料的环境颜色ambient: {method: 'addColor',getValue: (item) => item.ambient.getHex(),setValue: (item, value) => item.ambient = new THREE.Color(value),},// 物体材料本身发出的颜色emissive: {method: 'addColor',getValue: (item) => item.emissive.getHex(),setValue: (item, value) => item.emissive = new THREE.Color(value),},// 设置高亮部分的颜色specular: {method: 'addColor',getValue: (item) => item.specular.getHex(),setValue: (item, value) => item.specular = new THREE.Color(value),},// 设置高亮部分的亮度shininess: {extends: [0, 100],getValue: (item) => item.shininess,setValue: (item, value) => item.shininess = value,},red: {extends: [0, 1],getValue: (item) => item.uniforms.r.value,setValue: (item, value) => item.uniforms.r.value = value,},alpha: {extends: [0, 1],getValue: (item) => item.uniforms.a.value,setValue: (item, value) => item.uniforms.a.value = value,},dashSize: {extends: [0, 5],getValue: (item) => item.dashSize,setValue: (item, value) => item.dashSize = +value,},gapSize: {extends: [0, 5],getValue: (item) => item.gapSize,setValue: (item, value) => item.gapSize = +value,}
}const itemType = {SpotLight: ['color', 'intensity', 'distance', 'angle', 'exponent'], // 聚光灯AmbientLight: ['color'], // 环境光PointLight: ['color', 'intensity', 'distance'], // 点光源DirectionalLight: ['color', 'intensity'], // 平行光HemisphereLight: ['groundColor', 'intensity'], // 半球光MeshBasicMaterial: ['color', 'opacity', 'transparent', 'wireframe', 'visible'], // 基础网格材质MeshDepthMaterial: ['wireframe', 'cameraNear', 'cameraFar'], // 深度网格材质MeshNormalMaterial: ['opacity', 'transparent', 'wireframe', 'visible', 'side'],MeshLambertMaterial: ['opacity', 'transparent', 'wireframe', 'visible', 'side', 'ambient', 'emissive', 'color'], // 朗伯材质MeshPhongMaterial: ['opacity', 'transparent', 'wireframe', 'visible', 'side', 'ambient', 'emissive', 'color', 'specular', 'shininess'], // Phong材质ShaderMaterial: ['red', 'alpha'], // 着色器材质LineBasicMaterial: ['color'], // 直线LineDashedMaterial: ['dashSize', 'gapSize'], // 虚线
}function initControls(item, camera) {console.log('item', item)const typeList = itemType[item.type];const controls = {};if (!typeList || !typeList.length) {return;}const gui = new dat.GUI();for (let i = 0; i < typeList.length; i++) {const child = basicType[typeList[i]];if (child) {controls[typeList[i]] = child.getValue(item, camera);const childExtends = child.extends || [];gui[child.method || 'add'](controls, typeList[i], ...childExtends).onChange((value) => {child.setValue(item, value, camera);})}}
}

一、基础网格材质

基础网格材质，是一个以简单着色（平面或线框）方式来绘制几何体的材质。这种材质不受光照的影响。

new MeshBasicMaterial(parameters: Object);

使用场景：适用于不需要光照计算或复杂渲染效果的简单物体。例如，静态的、不需要光照变化的物体。

特点：不受光照影响，颜色始终保持一致。

参数名称	描述
color	材质颜色
wireframe	是否渲染成线框
wireframeLinewidth	设置线框宽度
wireframeLinecap	线段间的端点如何显示
wireframeLinejoin	线段的连接点如何显示
shading	定义如何着色
vertexColors	为每个顶点定义不同的颜色
fog	是否会受全局雾化效果设置的影响

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);// 创建立方体材质const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,wireframe: false});const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 添加到场景scene.add(cube);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);spotLight.shadowMapWidth = 3456; // 分辨率宽度spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能initControls(cubeMaterial);const animation = () => {cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();</script>
</body></html>

基础网格材质

二、深度网格材质

深度网格材质是一种 按深度绘制几何体的材质。深度基于相机远近平面。白色最近，黑色最远。

new MeshDepthMaterial(parameters: Object);

使用场景：用于显示物体的深度信息，通常用于深度测试或特殊视觉效果。

特点：只渲染物体的深度信息，不显示颜色或纹理。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);// 创建立方体材质const cubeMaterial = new THREE.MeshDepthMaterial();const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 添加到场景scene.add(cube);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);spotLight.shadowMapWidth = 3456; // 分辨率宽度spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能initControls(cubeMaterial, camera);const animation = () => {cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();</script>
</body></html>

深度网格材质

三、法向网格材质

法向网格材质是一种 把法向量映射到 RGB 颜色的材质。

new THREE.MeshNormalMaterial(parameters: Object);

使用场景：适用于低多边形数模型或动态生成的几何形状。通过使用法线贴图，它可以在没有复杂几何形状的情况下创建逼真的凹凸效果。

特点：基于法向量的颜色映射，MeshNormalMaterial渲染的每一个面颜色都不同；但即使在物体旋转时，这些颜色也基本保持在原来的位置，这使得MeshNormalMaterial在需要保持颜色与面关联的场景中非常有用。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);// 创建立方体材质const cubeMaterial = new THREE.MeshNormalMaterial();const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 添加到场景scene.add(cube);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);spotLight.shadowMapWidth = 3456; // 分辨率宽度spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能initControls(cubeMaterial, camera);const animation = () => {cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();</script>
</body></html>

法向网格材质

四、面材质

MeshFaceMaterial 在 Three.js 中并不是一个真正的材质，它更像是一个 材质容器。其主要用途是为几何体的每个面指定不同的材质，从而允许每个面具有独特的视觉表现。

new THREE.MeshFaceMaterial(parameters: Object);

注：MeshFaceMaterial 在新版 Three.js 中已经被材质数组所取代。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);// 创建立方体材质const cubeMaterial = new THREE.MeshFaceMaterial([new THREE.MeshBasicMaterial({ color: 0x009e60 }),new THREE.MeshBasicMaterial({ color: 0x0051ba }),new THREE.MeshBasicMaterial({ color: 0xffd500 }),new THREE.MeshBasicMaterial({ color: 0xc41e3a }),new THREE.MeshBasicMaterial({ color: 0xffff00 }),new THREE.MeshBasicMaterial({ color: 0xff5800 }),]);const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 添加到场景scene.add(cube);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);spotLight.shadowMapWidth = 3456; // 分辨率宽度spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能initControls(cubeMaterial, camera);const animation = () => {cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();</script>
</body></html>

面材质

五、朗伯网格材质

朗伯网格材质是 一种非光泽表面的材质，没有镜面高光。

new THREE.MeshLambertMaterial(parameters: Object);

使用场景：适用于需要模拟漫反射光照效果的物体。这种材质对光源的方向和强度敏感，适合表现柔和的表面。

特点：根据光源方向和强度计算表面颜色，产生柔和的阴影。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);// 创建立方体材质const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 添加到场景scene.add(cube);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);spotLight.shadowMapWidth = 3456; // 分辨率宽度spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能initControls(cubeMaterial, camera);const animation = () => {cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();</script>
</body></html>

朗伯网格材质

六、Phong 网格材质

Phong 网格材质是一种 用于具有镜面高光的光泽表面的材质。

new THREE.MeshPhongMaterial(parameters: Object);

使用场景：适用于需要更高级光照效果的物体，如镜面反射和高光。这种材质可以模拟更真实的光照效果。

特点：支持漫反射、镜面反射和高光，可以产生更丰富的光影效果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);// 创建立方体材质const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 添加到场景scene.add(cube);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);spotLight.shadowMapWidth = 3456; // 分辨率宽度spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能initControls(cubeMaterial, camera);const animation = () => {cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();</script>
</body></html>

Phong网格材质

七、着色器网格材质

着色器网格材质是一种 使用自定义shader渲染的材质。

const material = new THREE.ShaderMaterial( {uniforms: {time: { value: 1.0 },resolution: { value: new THREE.Vector2() }},vertexShader: document.getElementById( 'vertexShader' ).textContent,fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );

使用场景：适用于需要自定义渲染逻辑的高级场景。通过编写自定义的 GLSL 着色器代码，可以实现各种独特的视觉效果。

特点：允许用户编写自定义的顶点和片段着色器，实现高度自定义的渲染效果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);// 创建立方体材质const cubeMaterial = new THREE.ShaderMaterial({uniforms: {r: {type: 'f',value: 1.0},a: {type: 'f', // float 类型value: 1.0}},// 顶点着色器vertexShader: `void main() {gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`,// 片元着色器fragmentShader: `uniform float r;uniform float a;void main() {gl_FragColor = vec4(r, 0.0, 0.0, a);}`,transparent: true,});const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 添加到场景scene.add(cube);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);spotLight.shadowMapWidth = 3456; // 分辨率宽度spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能initControls(cubeMaterial, camera);const animation = () => {cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();</script>
</body></html>

着色器网格材质

八、直线和虚线

基础线条材质（直线）是一种 用于绘制线框样式几何体的材质。

// 直线
const material = new THREE.LineBasicMaterial({color: 0xff0000,linewidth: 1,
})

虚线材质（虚线）是一种 用于绘制虚线样式几何体的材质。

// 虚线
const material = new THREE.LineDashedMaterial({color: 0xff0000,dashSize: 1, // 短划线的长度gapSize: 1 // 间隔的长度
});

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加直线和虚线const lines = new THREE.Geometry();lines.vertices = [new THREE.Vector3(0, 2, 5),new THREE.Vector3(0, -2, 5)]// 直线// const material = new THREE.LineBasicMaterial({//     color: 0xff0000,//     linewidth: 1,// })// 虚线const material = new THREE.LineDashedMaterial({color: 0xff0000,dashSize: 1, // 短划线的长度gapSize: 1 // 间隔的长度});const line = new THREE.Line(lines, material);// 计算点到线的累积长度lines.computeLineDistances();scene.add(line);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);spotLight.shadowMapWidth = 3456; // 分辨率宽度spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能initControls(material, camera);const animation = () => {// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();</script>
</body></html>

直线与虚线

九、联合材质

创建联合材质，需要使用 SceneUtils 场景工具，它一个用于操控场景的实用类。

.createMultiMaterialObject ( geometry : BufferGeometry, materials : Array ) : Group
geometry – 材料集的几何形状。
materials – 为物体准备的材料。

创建一个新组，囊括了在材质中定义的每种材质的新网格。请注意，这和为一个网格定义多种材质的材质数组不同。

该方法对于同时需要材质和线框绘制的物体非常有用。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);// 创建立方体材质const lambert = new THREE.MeshLambertMaterial({color: 0xff0000});const basic = new THREE.MeshBasicMaterial({wireframe: true});const cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [lambert, basic]);// 添加到场景scene.add(cube);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);spotLight.shadowMapWidth = 3456; // 分辨率宽度spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能const animation = () => {cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();</script>
</body></html>