【ThreeJs】08 - 为一个几何体添加多个材质的方法

几何体多种材质

在图中可以看见该物体有一个网格材质和一个普通的实体材质。这里需要为物体添加两种材质该怎么做呢？

为几何体添加多个材质

1. 创建一个几何体:

// 4. 创建一个长方体
let boxGeometry = new BoxBufferGeometry(20, 20, 20,10,10,10)

2. 为几何体创建一个线框（网格）材质,并设置线框颜色：

 // 创建材质  并设置为线框模式
 let boxMaterial = new MeshPhongMaterial({
    wireframe: true,
    color: 0x0007ff
 })

3. 为物体添加一个实体材质默认颜色:

 // 再创建材质
let boxMaterialB = new MeshPhongMaterial({})

4. 当需要添加多个材质的时候需要添加一个材质组:

 boxGeometry.addGroup(0, +Infinity, 0)
 boxGeometry.addGroup(0, +Infinity, 1)

5. 以数组的方式传递材质，和几何体创建一个网格模型:

 let boxMesh = new Mesh(boxGeometry, [boxMaterial, boxMaterialB])

6. 整体代码实现:

               // 4. 创建一个长方体
                let boxGeometry = new BoxBufferGeometry(20, 20, 20,10,10,10)
                // 创建材质  并设置为线框模式
                let boxMaterial = new MeshPhongMaterial({
                    wireframe: true,
                    color: 0x0007ff
                })
                // 再创建材质
                let boxMaterialB = new MeshPhongMaterial({
                })
                // 当有多个材质的时候需要添加多个几何组数组和材质数量是一致的
                boxGeometry.addGroup(0, +Infinity, 0)
                boxGeometry.addGroup(0, +Infinity, 1)
                let boxMesh = new Mesh(boxGeometry, [boxMaterial, boxMaterialB])
                this.scene.add(boxMesh)

案例全部代码

1. 该demo使用vue-cli创建一个vue项目:

vue create xxxx

2. 安装 ThreeJs依赖:

npm i three -S

3. demo的JS代码：

  import {
        AmbientLight,
        BoxBufferGeometry,
        DirectionalLight, Mesh,
        MeshPhongMaterial,
        PerspectiveCamera,
        Scene,
        WebGLRenderer
    } from "three";

    import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

    export default {
        name: "index",
        data() {
            return {
                // 渲染器
                renderer: null,
                // 相机
                camera: null,
                // 场景
                scene: null
            }
        },
        methods: {
            /**
             * 初始化
             * */
            init() {

                /**
                 * threeJS中自带的几何体：
                 *
                 * BoxBufferGeometry 长方体
                 *
                 * PlaneBufferGeometry 平面
                 *
                 * CylinderBufferGeometry 圆柱体
                 *
                 * ConeBufferGeometry 圆锥
                 *
                 * CircleBufferGeometry 圆盘
                 *
                 * SphereBufferGeometry 球体
                 *
                 * EdgeBufferGeometry 边缘几何体
                 */
                // 1. 创建一个渲染器
                this.renderer = new WebGLRenderer({antialias: true})
                // 设置渲染器的尺寸
                this.renderer.setSize(window.innerWidth, window.innerHeight)
                // 将渲染器的renderer canvas 挂载到DOM上
                document.body.appendChild(this.renderer.domElement)

                // 2. 创建一个相机
                this.camera = new PerspectiveCamera(50, window.innerWidth / window.innerHeight, window.innerWidth / window.innerHeight, 2000)
                // 设置相机的位置
                this.camera.position.set(0, 0, 50)

                // 监听当前窗口的变化
                window.addEventListener('resize', () => {
                    // 更新渲染器的尺寸
                    this.renderer.setSize(window.innerWidth, window.innerHeight)
                    // 更新相机的宽高比
                    this.camera.aspect = window.innerWidth / window.innerHeight
                    // 更新相机的投影矩阵
                    this.camera.updateProjectionMatrix()
                })

                // 3. 创建一个场景
                this.scene = new Scene()
                // 创建一个环境光
                let ambientLight = new AmbientLight(0xffffff)
                // 将光添加到场景中
                this.scene.add(ambientLight)

                // 创建一个方向光
                let directionalLight = new DirectionalLight(0xaaffff);
                this.scene.add(directionalLight)
                this.scene.add(directionalLight)

                // 4. 创建一个长方体
                let boxGeometry = new BoxBufferGeometry(20, 20, 20,10,10,10)
                // 创建材质  并设置为线框模式
                let boxMaterial = new MeshPhongMaterial({
                    wireframe: true,
                    color: 0x0007ff
                })
                // 再创建材质
                let boxMaterialB = new MeshPhongMaterial({
                })
                // 当有多个材质的时候需要添加多个几何组数组和材质数量是一致的
                boxGeometry.addGroup(0, +Infinity, 0)
                boxGeometry.addGroup(0, +Infinity, 1)
                let boxMesh = new Mesh(boxGeometry, [boxMaterial, boxMaterialB])
                this.scene.add(boxMesh)

                // 渲染场景和相机
                this.renderer.render(this.scene, this.camera)
                new OrbitControls(this.camera, this.renderer.domElement)
                this.update();
            },
            update() {
                this.renderer.render(this.scene, this.camera)
                requestAnimationFrame(this.update)
            }
        },
        created() {
            this.init()
        }
    }

4. demo的全局样式:

 html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* 隐藏滚动条 */
    overflow: hidden;
  }