threejs 大场景下,对小模型进行贴图处理

接上篇小模型的删除☞threeJS 大模型中对小模型进行删除-CSDN博客

针对已有模型,根据数据状态进行贴图处理,例如:机房内电脑告警状态、电脑开关机状态下的不同状态贴图等

示例模型还是以丛林小屋为例:针对该模型中的树干进行贴图处理

原图

贴图后,忽略红色丑树干,只是增强演示效果

找模型的小tip

第一步加载完模型后,查看下模型的结构,可以打印下object的子模型

输出结果:

大概知道这个模型由哪些子模型组成,这个模型没有group的概念,只有简单的mesh组成,根据实际的业务需求,模型名称可能有一定的约束规范,例如id之类。

我们以name为'BTree_BrichTree_0'为例,进行大模型中的对其删除操作;具体代码如下

javascript 复制代码
    // 贴图的方法,设置全局变量screenMaterial, 对其材质赋值
    loadTexture() {
      const img = require('@/assets/img/threeImg/pop-item-red.png'); // 贴图路径
      const textureLoader = new THREE.TextureLoader();
      textureLoader.load(img, texture => {
        this.screenMaterial = new THREE.MeshStandardMaterial({ map: texture });
      });
    },

selectedObject.material = this.screenMaterial; // 敲黑板,划重点

单个模型的情况下,直接对其进行 material 进行赋值即可,亲测有效

javascript 复制代码
const name = 'BTree_BrichTree_0';
const selectedObject = object.getObjectByName(name);
selectedObject.material = this.screenMaterial; // 敲黑板,划重点

模型组的场景,对其进行children遍历,进行材质重新赋值

javascript 复制代码
for (let i = selectedObject.children.length - 1; i >= 0; i--) {
  const child = selectedObject.children[i];
     if (child instanceof THREE.Mesh && child.name.indexOf(name) !== -1 && child.material.map) {
        child.material = this.screenMaterial;
     }
}
相关推荐
hj5914_前端新手3 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法3 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku4 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode4 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu4 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu4 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu4 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu4 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu4 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在4 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net