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

2024-04-26 01:36
文章标签 基础 联合 深度 js 材质 直线 着色器 three 虚线 phong 朗伯 法向

本文主要是介绍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>

联合材质

总结

本篇文章我们讲解了几种常见材质的基本使用，包括基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质。

更多内容扩展请大家自行查阅 => three.js官方文档，真心推荐读一读！！

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

  1. Three.js 官方文档
  2. WebGL+Three.js 入门与实战【作者：慕课网_yancy】

在这里插入图片描述

这篇关于Three.js——基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/936358。

相关文章

从入门到精通MySQL联合查询

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》：本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满
阅读更多...
深度解析Java DTO(最新推荐)

深度解析Java DTO(最新推荐)

《深度解析JavaDTO(最新推荐)》DTO（DataTransferObject）是一种用于在不同层（如Controller层、Service层）之间传输数据的对象设计模式,其核心目的是封装数据,... 目录一、什么是DTO？DTO的核心特点：二、为什么需要DTO？（对比Entity）三、实际应用场景解析
阅读更多...
深度解析Java项目中包和包之间的联系

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次，点赞13次，收藏8次。本文详细介绍了Java分层架构中的几个关键包：DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1
阅读更多...
深度解析Python装饰器常见用法与进阶技巧

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器（Decorator）是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧
阅读更多...
深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器（Interceptor）与过滤器（Filter）深度解析：区别、实现
阅读更多...
MySQL数据库的内嵌函数和联合查询实例代码

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面：本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN
阅读更多...
深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制（JDK/CGLIB）、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实
阅读更多...
SpringBoot开发中十大常见陷阱深度解析与避坑指南

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错？是不是同时用了.properties和.yml？二、换个位置配置就失效？搞清楚加
阅读更多...
从基础到进阶详解Pandas时间数据处理指南

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据
阅读更多...
安装centos8设置基础软件仓库时出错的解决方案

安装centos8设置基础软件仓库时出错的解决方案

《安装centos8设置基础软件仓库时出错的解决方案》：本文主要介绍安装centos8设置基础软件仓库时出错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录安装Centos8设置基础软件仓库时出错版本 8版本 8.2.200android4版本 javas
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2