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

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.mfbz.cn/a/34054.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vcruntime140_1.dll无法继续执行代码,有哪些方法可以解决?

关于vcruntime140_1.dll无法继续执行代码的错误问题,其实还是非常的普遍的,这属于经常丢失的dll文件之一,当然还有一个vcruntime140.dll也是非常容易丢失的,本文下面会介绍到这两种有啥区别,以及怎么去修复这些文件丢失…

spring复习:(4)AbstractEnvironment

该类中指定了激活profile属性的名称(spring.profiles.active),默认profile属性的名称(spring.profiles.default),以及默认的profile的名字(default)。

【Leetcode】19.删除链表的倒数第 N 个结点

一、题目 1、题目描述 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 示例1: 输入:head = [1,2,3,4,5], n = 2 输出:[1,2,3,5]示例2: 输入:head = [1], n = 1 输出:[]示例3: 输入:head = [1,2], n = 1 输出:[1]提示: 链表中结点的数目为 sz…

【剑指offer专项突破版】二叉树篇——“C“

文章目录 前言一、二叉树剪枝题目分析思路分析代码 二、序列化与反序列化二叉树题目分析思路分析代码 三、从根节点到叶节点的路径数字之和题目分析思路分析代码 四、 向下的路径节点之和题目分析思路分析思路①代码思路②代码 五、节点之和最大的路径题目分析思路分析代码 六、…

XSS注入——DOM型XSS

DOM型xss XSS根据恶意脚本的传递方式可以分为3种,分别为反射型、存储型、DOM型,前面两种恶意脚本都会经过服务器端然后返回给客户端,相对DOM型来说比较好检测与防御,而DOM型不用将恶意脚本传输到服务器在返回客户端,这…

Elasticsearch 地理空间计算

地理位1置搜索:使用查询API进行搜索 1、Geo Distance Query Geo Distance Query是在给定的距离范围内搜索数据的查询。例如,可以搜索给定地理位置附近指定距离内的所有文档。 GET /my_index/_search {"query": {"bool" : {"fi…

9、Redis集群(cluster)

是什么 Redis集群是一个提供在多个Redis节点间共享数据的程序集,Redis集群可以支持多个master 能干嘛 Redis集群支持多个master,每个master又可以挂载多个slave 读写分离 支持数据的高可用 支持海量数据的读写存储操作 由于Cluster自带Sentinel的故障转…

软考高级系统架构设计师(九) 作文模板-论设计模式及其应用(未完待续)

目录 掌握的知识点 创建型 结构型 行为型 掌握的知识点 设计模式分为哪3类 每一类包含哪些具体的设计模式 创建型 创建型模式是对对象实例化过程的抽象,他通过抽象类所定义的接口,封装了系统中对象如何创建、组合等信息。 创建型模式主要用于创建对…

Buildroot 取消默认QT桌面-迅为RK3588开发板

本小节将讲解如何取消掉默认的 qt 桌面。 首先对开发板进行上电,开发板正常启动后,使用命令“cd /etc/init.d”进入到/etc/init.d 目录 下,然后使用以下命令对开机自启动脚本 rcS 进行查看,如下图所示: vi rcS 从上…

视觉SLAM十四讲需要提前知道的数学基础知识

学习视觉SLAM十四讲之前的必备数学基础知识 1. 正交矩阵2. 线性关系3. 求矩阵的逆4. 叉乘5.反对称矩阵6. 复数 1. 正交矩阵 定义: 设n阶矩阵A满足AATATAI ,则称A为正交矩阵 性质: 以下为手写,从小字丑,请多担待。。 …

红色通信史(一):红色通信的萌芽

1927年4月和7月,蒋介石、汪精卫分别在上海、武汉发动“四一二”、“七一五”反革命政变,实行“清党”、“分共”,大肆逮捕和杀害中共党员,制造“白色恐怖”。 面对敌人的残酷镇压,我党决定创建自己的革命军队&#xff…

元宇宙装备展正式拉开帷幕,深眸科技CEO周礼出席产业论坛发表主题演讲

6月27日,一场令人期待已久的工业元宇宙盛会在昆山国际会展中心拉开帷幕,大会由昆山市人民政府主办,昆山市工业和信息化局、赛迪工业和信息化研究院集团(苏州)有限公司联合承办,并得到了十数家单位的支持&am…

计算机网络那些事之 MTU 篇 pt.2

哈喽大家好,我是咸鱼 在《计算机网络那些事之 MTU 篇 》中,咸鱼跟大家介绍了 MTU 是指数据链路层能够传输的最大数据帧的大小 如果发送的数据大于 MTU,则就会进行分片操作(Fragment);如果小于 MTU&#x…

Git安装及使用图文教程详解(附带安装文件)

Git安装及使用图文教程详解(附带安装文件) 原创:丶无殇  2023-06-26 文章目录 下载安装下载安装验证安装成功版本查看 基础指令Git常用指令【首次必须】设置签名用户、邮箱1.初始化本地仓库2.查看本地库状态3.创建文件4.添加文件至暂存区5…

maven打包本地jar到项目中

在maven项目中&#xff0c;我们的项目依赖一般取自local的repository或者远程的repository&#xff0c;比如下面这个配置&#xff1a; maven <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-generator</artifactId> &l…

C++11新特性(5):多线程

学习C11&#xff0c;根据网上资料的知识总结。 1. 线程创建 1.1 初始函数 #include <iostream> #include <thread> void myfunc(int &a) {cout << "a in myfunc:" << a << endl; }int main() {int a 1;std::thread mythread(…

C1. Make Nonzero Sum (easy version) - 思维

分析&#xff1a; n一但是奇数就一定不行&#xff0c;因为无论有多少-1和1都会导致最后的和是-1或1&#xff0c;每次断开一个区间会改变2&#xff0c;所以一定不行&#xff0c;直接输出-1。 其次&#xff0c;如果数组满足题意也可以一个一个输出每一个下标&#xff0c;遍历数组…

flask socket版本问题

1、版本问题 问题解决 根据官方给定的兼容版本&#xff0c;从socket.io官网CDN下载最新的4.4.1版本js文件&#xff0c;https://cdn.socket.io/。 python-engineio使用版本。需要更新的javascript.socketio包&#xff0c;具体可对照官方文档Requirements部分末尾 https://flask-…

ansible实训-Day3(playbook的原理、结构及其基本使用)

一、前言 该篇是对ansible实训第三天内容的归纳总结&#xff0c;主要包括playbook组件的原理、结构及其基本使用方式。 二、Playbook 原理 Playbook是Ansible的核心组件之一&#xff0c;它是用于定义任务和配置的自动化脚本。 Ansible Playbook使用YAML语法编写&#xff0c;可…

帆软 FineReport 绘制漏斗图

七一建党节&#xff0c;祝党生日快乐&#xff01; 夏日炎炎&#xff0c;周末在家&#xff0c;想起在用帆软做页面展示的时候&#xff0c;使用到了漏斗图&#xff0c;记录下来&#xff0c;方便查看。 以订单销量变化为例&#xff0c;分为五个阶段&#xff0c;商品浏览人数&#…
最新文章