Blender导出gltf格式ThreeJS不显示问题-

news2025/1/12 6:56:03

1. 检查代码

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
。。。。。。

 initRoomGltf() {
    const _this = this;
     // const loader = new OBJLoader();
     const loader = new GLTFLoader();
     // load a resource
     loader.load(
       // resource URL
       // this.commonFunc.getPath('移动.obj'),
       this.commonFunc.getPath('移动.gltf'),
       // called when resource is loaded
       function (gltf) {
         console.log('initRoom loaded', gltf);
         gltf.scene.position.set(0, -2, 0);
         _this.scene.add(gltf.scene);
       },
       // called when loading is in progresses
       function (xhr) {
         console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
       },
       // called when loading has errors
       function (error) {
         console.log('An error happened', error);
       }
     );
  }

注意加载 _this.scene.add(gltf.scene);

如果加载obj,是 _this.scene.add(obj);

initRoomObj() {
    const _this = this;

    let textureLoader = new THREE.TextureLoader();
    let material = new THREE.MeshPhongMaterial({
      // color: 0xFF0000,
      map: textureLoader.load(this.commonFunc.getPath('主体_B.png')),
      roughnessMap: textureLoader.load(this.commonFunc.getPath('主体_R.png'))
    });
    let opacityMaterial = new THREE.MeshStandardMaterial({
      color: 0x000000,
      map: textureLoader.load(this.commonFunc.getPath('透明材质_B.png')),
      roughnessMap: textureLoader.load(this.commonFunc.getPath('透明材质_R.png'))
    });
    opacityMaterial.transparent = true; //开启透明
    // opacityMaterial.opacity = 1; //设置透明度

    const loader = new OBJLoader();
    // load a resource
    loader.load(
      // resource URL
      this.commonFunc.getPath('移动集装箱机房.obj'),
      // called when resource is loaded
      function (obj) {
        console.log('initRoom loaded', obj);
        obj.position.set(0, -2, 0);
        _this.scene.add(obj);
    
        obj.traverse(function (child) {
            console.log('initRoom child', child.name);
            // 对不同物体加载不同材质
            if (child.isMesh && child.name.startsWith('zhuti_')) {
              child.material = material;
              // child.visible = false;
            } else {
              child.material = new THREE.MeshPhysicalMaterial({
                color: DEFAULT_COLOR
              });
            }
          });
      },
      // called when loading is in progresses
      function (xhr) {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
      },
      // called when loading has errors
      function (error) {
        console.log('An error happened', error);
      }
    );
  }

2. Blender导入时注意选项

导出Obj,这个需要手动加载材质
在这里插入图片描述
推荐导出gltf,这个可打包材质到一个文件中,之前导出没注意看,一直不显示物体,或者材质没有加载,折腾很长时间。
在这里插入图片描述
gltf文件可以直接打开查看是不是材质已经打包进去了
在这里插入图片描述

Gltf加载颜色失真问题

颜色偏差: http://webgl3d.cn/pages/c2fd5c/

  this.renderer.outputEncoding = THREE.sRGBEncoding;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/701081.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【2023年江西省研究生数学建模竞赛】题目三 植物的多样性 建模方案及参考文献

代码与结果如下:完整文档见文末 相关思路请点击这里到原文章查看 2023年江西省研究生数模竞赛题目三:植物的多样性 植物作为食物链中的生产者,通过光合作用吸收二氧化碳,制造氧气,同时为其他生物提供食物和栖息地&a…

(一)创建线程的三种方式

(一)创建线程的三种方式 1.1 线程与进程1.2 创建线程的三种方式01、继承Thread类02、实现Runnable接口03、实现Callable接口 1.3 Question?01、为什么要重写 run() 方法?02、run() 方法和 start() 方法有什么区别?03、…

npm 包 - serve 使用

前端打包后,或者本地的html文件。有时需要将打包好的项目跑一下看看效果,这时就可以使用 serve 工具,在本地启动一个静态文件服务器。本文主要简单记录下 npm 包 serve 的基本使用命令。 一、全局安装 serve npm install serve -g二、运行 s…

php宝塔搭建部署活动现场大屏幕互动系统php源码

大家好啊,我是测评君,欢迎来到web测评。本期给大家带来一套活动现场大屏幕互动系统php源码。抽时间看了一下,功能还是不错的,有参考价值。感兴趣的朋友可以自行下载学习。 技术架构 PHP7.0 nginx mysql5.7 JS CSS HTMLcneto…

【Java】Java核心 82:Git 教程(5)修改撤销

文章目录 08.GIT本地操作-修改撤消目标内容小结 09.GIT本地操作-总结 在Git中,可以使用不同的操作来修改和撤销提交。以下是几种常用的方法: 修改最后一次提交:如果你需要修改最后一次提交的提交信息或者漏掉了某些文件,可以使用…

Linux进程信号【信号保存】

✨个人主页: 北 海 🎉所属专栏: Linux学习之旅 🎃操作环境: CentOS 7.6 阿里云远程服务器 文章目录 🌇前言🏙️正文1、再次认识信号1.1、概念1.2、感性理解1.3、在内核中的表示1.4、sigset_t 信…

安装完MySQL后/var/log/mysqld.log中找不到初始密码

背景:我安装完MySQL后,密码忘记了,然后我又重新装了一次,结果发现重新安装后,/var/log/mysqld.log中找不到初始密码 找初始密码的命令 grep temporary password /var/log/mysqld.log问题原因:再删除MySQL…

matplotlib 更改离散colorbar分界线的宽度和外边框的宽度

1 设置colorbar颜色间隔线的宽度 通过属性dividers设置colorbar颜色间隔线的宽度 # 将drawedges设置为True,从而显示颜色之间的分界线 cbar fig.colorbar(im, axaxs, orientationhorizontal, ticksbins, drawedgesTrue) # 利用属性dividers设置宽度 cbar.divider…

小马识途:全媒体营销是未来营销之道

全媒体营销和整合营销都是广泛应用于市场营销领域的策略,但两者之间还是有一些区别和相似之处的。 全媒体营销和整合营销的相同之处,小马识途营销顾问认为两者都是多渠道整合的营销方式,都强调利用多个渠道和媒体来传播信息,以达到…

循环控制基础

循环控制 Key Point ●for 循环的使用 ●while 循环 ●do...while 循环 ●break 和continue 练习 1. (for 循环)计算123...100 的和 public class Test21 { public static void main(String[] args) { // (for 循环)计算…

我该如何抉择?测试工程师vs测试开发工程师vs开发工程师...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 软件开发工程师&a…

基于Python所写的读者书库设计

点击以下链接获取源码资源: https://download.csdn.net/download/qq_64505944/87964232 《RCQ读者书库》程序使用说明 在PyCharm中运行《RCQ读者书库》即可进入如图1所示的系统主界面。 图1 系统主界面 具体的操作步骤如下: (1)…

智慧校园--webGIS--高德地图

实现地图点击打卡&#xff0c;驾车路线。 需要自己去高德开发平台注册新建自己的项目保存key和秘钥 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"…

测试Hyperledger Fabric环境

首先进入fabric-samples目录中的first-networked 子目录 cd fabric-samples/first-network 在first-network目录下有一个自动化脚本byfn.sh,可以使用-help参数查看相应的可 用命令&#xff0c;在命令提示符中输入如下命令&#xff1a; ./byfn.sh --help命令执行成功后&#…

【运维工程师学习二】OS系统管理

【运维工程师学习二】OS系统管理 1、操作系统管理2、进程管理3、进程的启动4、进程信息的查看4.1、STAT 进程的状态&#xff1a;进程状态使用字符表示的&#xff08;STAT的状态码&#xff09;,其状态码对应的含义&#xff1a;4.2、ps命令常用用法&#xff08;方便查看系统进程&…

【数据库八】MySQL MHA高可用配置及故障切换

MHA高可用配置及故障切换 1.什么是MHA2.MHA组成3.MHA特点4.案例实施&#xff1a;搭建MySQL MHA高可用及故障切换4.1 主节点数据库&#xff08;CentOS 7-5&#xff09;4.2 从节点数据库&#xff08;CentOS 7-6&#xff09;4.3 从节点数据库&#xff08;CentOS 7-7&#xff09;4.…

9.3 多路复用poll函数

目录 poll和epoll poll函数和epoll函数族 poll函数 ​编辑 poll函数&#xff1a;事件类型 epoll函数族 epoll_event结构体 poll和epoll poll函数和epoll函数族 poll函数 poll函数&#xff1a;事件类型 events&#xff1a; POLLIN&#xff1a;有数据可读 POLLPRI&#x…

python读取CSV文件表头字段乱序作json文件(自己笔记)

有时候我们会将csv文件的某列对应某列(或这某几列)&#xff1b;如{A&#xff1a;[B,C,D,E]},说白了就是一个键对应的值是一个列表&#xff0c;但是有时候我们的值在表头中位置不一致&#xff0c;这时候我们就需要先获取每一个字段的索引值&#xff0c;这样程序就会通过索引值自…

[Flask] Flask的请求与响应

1.Flask的请求 如果以GET请求访问URL&#xff0c;例如URL是127.0.0.1:5000/?nameandy&age18&#xff0c;那么如何获取这个URL的参数?如果以POST请求提交一个表单&#xff0c;那么又如何获取表单中各个字段值呢? Flask提供的Request请求对象就可以实现上述功能 Reques…

uniapp开发的微信小程序之实现转发功能以及页面跳转传递、接收对象

效果图&#xff1a; 转发功能&#xff1a; <template><view class"container"><button class"share-btn" open-type"share">转发</button></view> </template><script> export default {data() {re…