Vue3使用Three.js导入gltf模型并解决模型为黑色的问题

背景

如今各类数字孪生场景对三维可视化的需求持续旺盛,因为它们可以用来创建数字化的双胞胎,即现实世界的物体或系统的数字化副本。这种技术在工业、建筑、医疗保健和物联网等领域有着广泛的应用,可以帮助人们更好地理解和管理现实世界的事物。

Three.js 可以让我们在网页上创建交互式的 3D 图形和动画。它是一个强大的 JavaScript 库,可以帮助我们轻松地在浏览器中实现复杂的 3D 效果,而无需深入了解底层的 WebGL 技术。如果你需要在网页上展示 3D 内容或者构建交互式的3D体验, Three.js 是一个非常有用的工具。今天通过 Vue3.0 集成 Three.js 来实现对 gltf 模型的加载、渲染与操控。

下载模型

如果没有专门的三维建模工程师,可以到https://sketchfab.com注册一个账号,上面有不少可以免费下载的模型,我这里下载 gltf 格式。

2023-12-17-ModelSite.jpg

查看模型

这个 gltf 格式的文件可以使用 Win10 自带的 3D查看器 打开。

2023-12-17-Win103D.jpg

环境准备

Note:

  1. 前提需要有 Node.js 环境,可使用 nvm 进行 Node.js 的多版本管理。
  2. npm install <package>默认会在依赖安装完成后将其写入package.json,因此安装依赖的命令都未附加save参数。
$ node -v
v16.18.0

安装vue-cli并创建项目

npm install -g @vue/cli
vue --version
vue create three-gltf

刚开始的 package.json 依赖是这样:

  "dependencies": {"core-js": "^3.8.3","vue": "^3.2.13"},

集成Three.js

  • 安装依赖
npm install three

此时, package.json 的依赖变为:

  "dependencies": {"core-js": "^3.8.3","three": "^0.159.0","vue": "^3.2.13"},

HelloWorld.vue 并列,创建一个 ThreeDemo.vue ,后续的三维场景渲染就在这个文件中实现,以下是完整代码。

<template><div ref="threeModel" class="threed"></div>
</template><script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";const threeModel = ref(null);
let scene, camera, renderer;onMounted(() => {// 相机配置camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,1,100);camera.position.set(3, 3, 3);camera.lookAt(0, 0, 0);// 渲染配置renderer = new THREE.WebGLRenderer({antialias: true, // 抗锯齿alpha: true, // 用于设置透明度});renderer.setSize(window.innerWidth, window.innerHeight);// 设置背景颜色renderer.setClearColor(0x000000, 0);// 场景初始化scene = new THREE.Scene();scene.add(new THREE.AmbientLight(0x666666)); // 环境光//添加模型
const loader = new GLTFLoader();
loader.load("/static/model/scene.gltf",(gltf) => {// 解决模型为黑色的问题gltf.scene.traverse(function(child) {if (child.isMesh) {child.material.emissive = child.material.color;child.material.emissiveMap = child.material.map;}});scene.add(gltf.scene);},function(xhr) {// 控制台查看加载进度xhrconsole.log(Math.floor((xhr.loaded / xhr.total) * 100));}
);// 添加模型到页面threeModel.value.appendChild(renderer.domElement);//添加控制器let controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener("change", () => {renderer.render(scene, camera);});
});
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.threed {widows: 100%;height: 100%;
}
</style>

为了让 Vue 项目展示我们的三维模型页面,这里简单粗暴地将 HelloWorld.vue 替换了。

2023-12-17-DisplayModel.jpg

可能遇到问题

如何设置模型为透明背景?

有些场景下,比如我们要做数据大屏可视化,大屏本身已经有背景图片了,不希望 Three.js 的背景色遮挡,这时就可以将 Three.js 的背景设置为透明,设置背景透明前要先将 alpha 设置为 true ;通过 renderer.setClearColor(0x000000, 0) 第二个参数来设置透明度0是完全透明,1是不透明,可以按需调整0-1之间的数,eg: 0.8。

  // 相机配置camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,1,100);// 渲染配置renderer = new THREE.WebGLRenderer({antialias: true, // 抗锯齿alpha: true, // 用于设置透明度});renderer.setSize(window.innerWidth, window.innerHeight);// 设置背景颜色,透明renderer.setClearColor(0x000000, 0);

Three.js导入gltf的模型黑乎乎的,怎么破?

2023-12-17-BlackModel.jpg
直接上解决办法:将模型的材质里的 emssive 设置为 material.color ,如果材质里有纹理,再把 emissiveMap 设置为 material.map

//添加模型
const loader = new GLTFLoader();
loader.load("/static/model/scene.gltf",(gltf) => {// 解决模型为黑色的问题gltf.scene.traverse(function(child) {if (child.isMesh) {child.material.emissive = child.material.color;child.material.emissiveMap = child.material.map;}});scene.add(gltf.scene);},function(xhr) {// 控制台查看加载进度xhrconsole.log(Math.floor((xhr.loaded / xhr.total) * 100));}
);
  • 使用效果

2023-12-17-Demo

小总结

通过 Vue3.0 集成 Three.js ,可以在网页上展示 3D 内容或构建交互式的 3D 体验。在集成过程中,需要安装 Three.js 依赖并创建 ThreeDemo.vue 文件,然后通过 GLTFLoader 加载模型并解决模型为黑色的问题。同时,可以设置 Three.js 的背景为透明以适应不同场景需求。

Reference

  • https://sketchfab.com

If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!

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

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

相关文章

VAR模型

VAR&#xff08;Vector Autoregression&#xff09;模型是一种用于时间序列分析的统计模型&#xff0c;它可以描述多个变量之间的相互关系和动态演化。VAR模型最初是由Sims&#xff08;1980&#xff09;提出的&#xff0c;广泛应用于宏观经济学、金融领域以及其他时间序列数据分…

Restrict Content Pro WordPress – 限制会员内容 付费内容网站(包含所有扩展)

Restrict Content Pro WordPress限制会员内容专业插件 强大的内容限制工具和强大的 WordPress 会员网站&#xff0c;都在一个易于管理的插件中。 购买Restrict Content Pro 最新版本并加入超过23000 名快乐客户的俱乐部。 使用 Restrict Content Pro 插件将您的独家内容锁定…

Python 全栈体系【四阶】(六)

第四章 机器学习 五、线性模型 1. 概述 线性模型是自然界最简单的模型之一&#xff0c;它描述了一个&#xff08;或多个&#xff09;自变量对另一个因变量的影响是呈简单的比例、线性关系。例如&#xff1a; 住房每平米单价为 1 万元&#xff0c;100 平米住房价格为 100 万…

windows电脑半夜突然睡眠自动唤醒的问题查找与治理

遇见几次了&#xff0c;半夜起来上厕所&#xff0c;发现休眠的电脑居然自己开了&#xff0c;还得跑过去把电脑再休眠&#xff0c;很烦。昨天晚上居然自动唤醒两次&#xff0c;忍无可忍了&#xff0c;于是开始查找原因。 查询原因如下&#xff0c;解决方面也在后面。 固件 S3 计…

质量保障体系案例拆解:成功实施的关键要素

引言&#xff1a; 在现代商业环境中&#xff0c;质量保障体系的建立和实施对于企业的长期发展至关重要。一个有效的质量保障体系可以帮助企业提高产品或服务的质量&#xff0c;增强客户满意度&#xff0c;提升市场竞争力。本文将通过拆解一个成功的质量保障体系案例&#xff0c…

C++——STL标准模板库——容器详解——vector

一、概念和特性 1、vector&#xff1a;可变大小数组的序列容器——动态数组。 2、vector像数组一样使用连续的空间储存元素&#xff0c;也可以通过下标访问元素。和数组不同的是&#xff0c;当vector容器中空间不足&#xff0c;vector会自动增大储存空间。 3、vector自增空间…

Linux驱动开发学习笔记4《设备树下的LED驱动实验》

目录 一、设备树LED驱动原理 二、硬件原理图分析 三、实验程序编写 1.修改设备树文件 2.LED 灯驱动程序编写 3.编写测试APP 四、运行测试 1. 编译驱动程序和测试APP &#xff08;1&#xff09; 编译驱动程序 &#xff08;2&#xff09; 编译测试APP ​ 2.运行测试 一、…

ES6之对象新增的方法

Object.is() 严格判断两个值是否相等&#xff0c;与严格比较运算符&#xff08;&#xff09;的行为基本一致&#xff0c;不同之处只有两个&#xff1a;一是0不等于-0&#xff0c;二是NaN等于自身 0 -0 //true NaN NaN // falseObject.is(0, -0) // false Object.is(NaN, Na…

Win11 PS无法拖动文件到任务栏打开

Win11 PS无法拖动文件到任务栏打开 1.软件环境2.问题描述3.解决方法3.1.确保Win11更新到22H2版本以上3.2.确保禁止拖放关闭3.3.修复系统注册表 4.修复效果预览 1.软件环境 Windows11 企业版64位 22H2 Adobe Photoshop 25.2.0 20231101.m.2385 38bb2d3 x64 2.问题描述 很多人在…

SpringBoot配置文件加载的优先级及自定义配置

Spring Boot使用一个非常特殊的PropertySource顺序&#xff0c;旨在允许合理的值重写&#xff0c;越靠前优先级越高。属性按以下顺序考虑&#xff1a; 开发者工具Devtools全局配置参数 在IDEA或Eclipse中&#xff0c;安装并启用Spring Boot Devtools插件。打开项目的Settings…

股票价格预测 | Python实现基于ARIMA和LSTM的股票预测模型(含XGBoost特征重要性衡量)

文章目录 效果一览文章概述模型描述源码设计效果一览 文章概述 Python实现基于ARIMA和LSTM的股票预测模型(Stock-Prediction) Data ExtractionFormatting data for time seriesFeature engineering(Feature Importance using X

【力扣100】2.两数相加

添加链接描述 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def addTwoNumbers(self, l1: Optional[ListNode], l2: Optional[ListNode]) -> Op…

Linux df命令教程:如何有效地查看磁盘空间使用情况(附案例详解和注意事项)

Linux df命令介绍 Linux df命令&#xff08;英文全拼&#xff1a;disk free&#xff09;用于显示目前在Linux系统上的文件系统磁盘使用情况统计。它可以帮助我们了解文件系统的磁盘使用情况&#xff0c;包括已使用的磁盘空间、可用的磁盘空间等。 Linux df命令适用的Linux版本…

信号与线性系统预备训练3——MATLAB软件在信号与系统中的应用初步

信号与线性系统预备训练3——MATLAB软件在信号与系统中的应用初步 The Preparatory training3 of Signals and Linear Systems 对应教材&#xff1a;《信号与线性系统分析&#xff08;第五版&#xff09;》高等教育出版社&#xff0c;吴大正著 一、目的 1.熟悉和回顾MATLAB…

Pycharm第三方库导入失败避坑!

最近遇到了明明安装了 python 第三方库&#xff0c;但是在 pycharm 当中却导入不成功的问题。 使用Pycharm手动安装三方库和自动安装三方库都失败&#xff0c;以及Pycharm终端使用pip命令安装也未解决。网上找各种方法尝试都没成功&#xff0c;原来是一不小心就跳进了虚拟环境…

PASCAL VOC 2012 数据集

PASCAL VOC 2012 数据集 &#xff08;The PASCAL Visual Object Classes 2012,简称PASCAL VOC 2012数据集&#xff09; 背景&#xff1a;PASCAL VOC &#xff08;The PASCAL Visual Object Classes &#xff09;是一个世界级的计算机视觉挑战赛&#xff0c;PASCAL全称&#xf…

C++中的继承(一)

文章目录 前言概念访问限定符基类和派生类的赋值转换继承中的作用域派生类的默认成员函数构造函数 拷贝构造析构函数 继承的其他一些细节 前言 我们之前说过&#xff0c;继承是面向对象的三大特性。 面向对象的三大特性&#xff1a; 封装、继承、多态。 封装在类和对象体现出…

2043杨辉三角(C语言)

目录 一&#xff1a;题目 二&#xff1a;思路分析 三&#xff1a;代码 一&#xff1a;题目 二&#xff1a;思路分析 1.通过杨辉三角&#xff0c;不难发现中间的数等于肩头两个数之和 2.但是当我们的输出结果&#xff0c;与杨辉三角的形式有所不同&#xff0c;但是我们可以找…

Freemarker基本语法与案例讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《SpringBoot》。&#x1f3af;&#x1f3af; &…

python接口自动化测试-unittest-批量用例管理

我们日常项目中的接口测试案例肯定不止一个&#xff0c;当案例越来越多时我们如何管理这些批量案例&#xff1f;如何保证案例不重复&#xff1f;如果案例非常多&#xff08;成百上千&#xff0c;甚至更多&#xff09;时如何保证案例执行的效率&#xff1f;如何做&#xff08;批…