学习threejs，使用createMultiMaterialObject创建多材质对象

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.SceneUtils 场景操控类
- 1.2 ☘️.createMultiMaterialObject
二、🍀使用createMultiMaterialObject创建多材质对象
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用createMultiMaterialObject创建多材质对象，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.SceneUtils 场景操控类

THREE.SceneUtils一个用于操控场景的实用类。

方法：
.createMeshesFromInstancedMesh ( instancedMesh : InstancedMesh ) : Group
instancedMesh – 实例化网格。

为给定的实例化网格的每个实例，创建一个包含新网格的新物体组（Object Group）。

.createMeshesFromMultiMaterialMesh ( mesh : Mesh ) : Group
mesh – 具有多种材质的网格。

将给定的多材质网格转换为 Group 的实例，为每种材质保留一个单独的网格。

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

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

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

.sortInstancedMesh ( mesh : InstancedMesh, compareFn : Function ) : undefined
mesh – InstancedMesh 将在其中对实例进行排序。

compareFn – 定义排序顺序的比较器函数。

根据用户定义的回调，对 InstancedMesh 中的实例进行排序。回调将提供两个参数，indexA 和 indexB，并且必须返回一个数值。有关排序回调及其返回值的更多信息，请参见 Array.prototype.sort。

由于性能成本高，three.js 不会自动对 InstancedMesh 实例进行排序。手动排序可能有助于改善 alpha 混合材质的显示（从后到前），并减少不透明材质的透支（从前到后）。

1.2 ☘️.createMultiMaterialObject

本例使用createMultiMaterialObject创建多材质对象。实现立方体网格对象既有颜色基础材质，又有MeshDepthMaterial深度材质效果。

二、🍀使用createMultiMaterialObject创建多材质对象

1. ☘️实现思路

1、初始化renderer渲染器，设置renderer的颜色。
2、初始化Scene三维场景scene。
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt，设置相机的near、far近远端面。
4、加载几何模型：定义addCube方法，方法内创建随机大小的立方体几何对象cubeGeometry。创建MeshDepthMateria网格深度材质cubeMaterial和MeshBasicMaterial基础材质colorMaterial。传入参数cubeGeometry、cubeMaterial和colorMaterial调用createMultiMaterialObject方法创建多材质对象cube，设置cube第一个网格对象的大小、cube的投影和随机位置，场景scene中添加cube。循环10次调用addCube方法生成多材质对象。定义render方法，实现所有立方体对象的旋转动画。具体代码参考下面代码样例。
5、加入gui控件，控制添加、移除立方体以及立方体颜色、旋转速度等信息。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>

<html>

<head>
    <title>学习threejs，使用createMultiMaterialObject创建多材质对象</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Js 代码块 -->
<script type="text/javascript">

    // 初始化
    function init() {

        var stats = initStats();

        // 创建三维场景
        var scene = new THREE.Scene();

        // 创建相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 130);

        // 创建渲染器，设置大小
        var renderer = new THREE.WebGLRenderer();

        renderer.sortObjects = false;

        renderer.setClearColor(new THREE.Color(0x00000, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

        // 设置相机位置、远近和方向
        camera.position.x = -50;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.near = 7;
        camera.far = 139;
        camera.lookAt(scene.position);

        // 渲染器绑定html页面要素
        document.getElementById("WebGL-output").appendChild(renderer.domElement);
        
        var step = 0;

        var controls = new function () {
            this.cameraNear = camera.near;
            this.cameraFar = camera.far;
            this.rotationSpeed = 0.02;
            this.numberOfObjects = scene.children.length;
            this.color = 0x00ff00;


            this.removeCube = function () {
                var allChildren = scene.children;
                var lastObject = allChildren[allChildren.length - 1];
                if (lastObject instanceof THREE.Mesh) {
                    scene.remove(lastObject);
                    this.numberOfObjects = scene.children.length;
                }
            };

            this.addCube = function () {

                var cubeSize = Math.ceil(3 + (Math.random() * 3));
                var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);

                //var cubeMaterial = new THREE.MeshLambertMaterial({color:  Math.random() * 0xffffff });
                var cubeMaterial = new THREE.MeshDepthMaterial();
                var colorMaterial = new THREE.MeshBasicMaterial({
                    color: controls.color,
                    transparent: true,
                    blending: THREE.MultiplyBlending
                });
                var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [colorMaterial, cubeMaterial]);
                cube.children[1].scale.set(0.99, 0.99, 0.99);
                cube.castShadow = true;

                // 立方体随机位置
                cube.position.x = -60 + Math.round((Math.random() * 100));
                cube.position.y = Math.round((Math.random() * 10));
                cube.position.z = -100 + Math.round((Math.random() * 150));

                // 场景中添加立方体
                scene.add(cube);
                this.numberOfObjects = scene.children.length;
            };

            this.outputObjects = function () {
                console.log(scene.children);
            }
        };

        var gui = new dat.GUI();
        gui.addColor(controls, 'color');
        gui.add(controls, 'rotationSpeed', 0, 0.5);
        gui.add(controls, 'addCube');
        gui.add(controls, 'removeCube');
        gui.add(controls, 'cameraNear', 0, 50).onChange(function (e) {
            camera.near = e;
        });
        gui.add(controls, 'cameraFar', 50, 200).onChange(function (e) {
            camera.far = e;
        });

        var i = 0;
        while (i < 10) {
            controls.addCube();
            i++;
        }

        render();

        function render() {
            stats.update();

            // 立方体旋转动画
            scene.traverse(function (e) {
                if (e instanceof THREE.Mesh) {

                    e.rotation.x += controls.rotationSpeed;
                    e.rotation.y += controls.rotationSpeed;
                    e.rotation.z += controls.rotationSpeed;
                }
            });

            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0);

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>