Three.js使用SceneUtils为模型添加多种材质

当我们想要为模型添加多种材质的时候可以通过使用SceneUtils来实现。

1、效果图：

该正方体的材质使用了MeshBasicMaterial和MeshLambertMaterial。

2、引入SceneUtils：

import { SceneUtils } from '../../node_modules/three/examples/jsm/utils/SceneUtils';

3、使用SceneUtils：

   const box = new BoxGeometry(5, 5, 5);
        const material1 = new MeshBasicMaterial({ color:'#282c34', wireframe:true });
        const material2 = new MeshLambertMaterial({ color: '#A00000' });
        const mesh = SceneUtils.createMultiMaterialObject(box, [material1, material2]);
        this.scene.add(mesh);

通过SceneUtils中createMultiMaterialObject属性来为模型使用多个材质。createMultiMaterialObject的第一个参数是模型对象，第二个参数是材质数组。

4、完整源代码：

import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls';//控制器
import { SceneUtils } from '../../node_modules/three/examples/jsm/utils/SceneUtils';
import Stats from 'stats.js';
import * as dat from 'dat.gui';
import { Mesh, PerspectiveCamera, Scene, WebGLRenderer,  AmbientLight, AxesHelper,MeshBasicMaterial, PlaneGeometry, BoxGeometry, MeshPhongMaterial, MeshLambertMaterial,  Color,  } from 'three';
export class LightProbeDemo {
    private camera: PerspectiveCamera;
    private scene: Scene;
    private renderer: WebGLRenderer;
    private stats: Stats;
    private dat: any;
    private params!: any;
    private planeGeometry!: PlaneGeometry;
    private envlight!: AmbientLight;
    constructor() {
        // 创建场景
        this.scene = new Scene();
        this.stats = new Stats();
        // 操作器
        this.dat = new dat.GUI();
        // 创建渲染器
        this.renderer = new WebGLRenderer({ antialias: true });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setPixelRatio(window.devicePixelRatio); //设备像素比 可以清晰物体
        this.renderer.setClearColor(0xEEEEEE, 1); //设置背景颜色
        document.body.appendChild(this.renderer.domElement);



        // 创建相机
        this.camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        this.camera.position.set(10, 40, 40);
        this.camera.lookAt(this.scene.position);
        // 平面
        this.planeGeometry = new PlaneGeometry(1600, 1400);
        const planeMaterial = new MeshPhongMaterial({
            specular: 0xffffff,
            color: 0xeeffff,
            shininess: 100,
            // side:DoubleSide
        });
        const planeMesh = new Mesh(this.planeGeometry, planeMaterial);
        planeMesh.rotation.x = -0.5 * Math.PI;
        planeMesh.position.y = -2;
        this.scene.add(planeMesh);

        // geometry使用多个材质
        const box = new BoxGeometry(5, 5, 5);
        const material1 = new MeshBasicMaterial({ color:'#282c34', wireframe:true });
        const material2 = new MeshLambertMaterial({ color: '#A00000' });
        const mesh = SceneUtils.createMultiMaterialObject(box, [material1, material2]);
        this.scene.add(mesh);



        // 环境光
        this.envlight = new AmbientLight(0xffffff, 0.7);

        this.scene.add(this.envlight);


        this.params = {
            envIntensity: 0.7,
            ambientLight: this.envlight.color.getStyle(),
            visible: false,
        };

        this.dat.add(this.params, 'envIntensity', 0.1, 1.0).onChange(e => {
            this.envlight.intensity = e;

        }).name('环境光强度');
        this.dat.addColor(this.params, 'ambientLight').onChange(e => {
            console.log(e);
            this.envlight.color = new Color(e);
        }).name('环境光颜色');

        this.dat.add(this.params, 'visible').onChange(e => {
            this.envlight.visible = !e;
        }).name('是否显示环境光');


        // 辅助坐标系
        var axis = new AxesHelper(250);
        // this.scene.add(axis);
        // fps显示器
        this.stats.showPanel(0);
        document.body.appendChild(this.stats.dom);
        new OrbitControls(this.camera, this.renderer.domElement);
        window.addEventListener('resize', () => this.onWindowResize());
        this.render();
    }



    private onWindowResize() {
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix(); //相机属性发生变化更新投影矩阵
    }
    private render() {
        this.stats.begin();
        window.requestAnimationFrame(() => this.render());
        this.renderer.render(this.scene, this.camera);
        this.stats.end();
    }



}