three.js如何实现简易3D机房?(一)基础准备-下

接上一篇:

three.js如何实现简易3D机房?(一)基础准备-上:http://t.csdnimg.cn/MCrFZ

目录

四、按需引入

五、导入模型


四、按需引入

index.vue文件中

<template><div class="three-area"><div class="three-box" ref="threeDemoRef"></div></div>
</template><script setup lang="ts" name="home">
import { reactive, ref, onMounted } from 'vue';
import {scene,init,createControls,initLight,watchDom,renderResize,renderLoop,
} from './component/threeD/init.js';const threeDemoRef = ref();onMounted(async () => {init(threeDemoRef.value);createControls();initLight();watchDom(threeDemoRef.value);renderResize(threeDemoRef.value);renderLoop();
});
</script>

初始化内容已经准备完毕,但现在还没有导入模型,所以看起来还是什么都没有。。。

五、导入模型

重点来了,注意注意,模型一定要放在public目录下!!!不然不显示

index.vue文件中

// 引入three.js
import * as THREE from 'three';
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();let model: any = null; // 先把模型存起来,后面有用const state: any = reactive({loading: true, // 是否开启加载动画progress: 0, // 模型加载进度
});// 导入模型
const importModel = () => {loader.load('model/room1.glb', // 注意格式,前面没有/,不然也会不显示!(gltf: any) => {model = gltf.scene;model.rotation.set(0, -Math.PI / 12, 0);model.position.set(0, -5, 0);model.traverse(function (child: any) {if (child.isMesh) {// 1.去掉文字if (child.name == 'Text') child.visible = false;// 2.修复设备颜色偏暗的问题if (child.parent.name.includes('AU')) {child.frustumCulled = false;//模型阴影child.castShadow = true;//模型自发光child.material.emissive = child.material.color;child.material.emissive.setHSL(1, 0, 0.35);child.material.emissiveMap = child.material.map;}}});// create3DDialog();scene.add(model);},(xhr: any) => {// 计算加载进度百分比-加载模型过渡动画时会用到state.progress = Math.floor((xhr.loaded / xhr.total) * 100);if (state.progress == 100) state.loading = false;},// 模型加载错误(error: any) => {console.log(error, 'error');});
};onMounted(async () => {init(threeDemoRef.value);importModel(); // 注意位置,在创建三要素之后createControls();initLight();watchDom(threeDemoRef.value);renderResize(threeDemoRef.value);renderLoop();
});

导入模型后,可以根据情况,适当的对部分模型进行调整,推荐几个好用的模型编辑工具

glTF Viewer

自定义场景背景颜色、灯光、模型的显示隐藏等等


 

three.js editor 除了一些基础的调试,还能直接找到模型中某个小物体名字(名字的命名规则建议提前和建模师+后端约定好,便于后面的数据交互),并应用到代码里操作修改某个小物体的模型效果(个人更推荐这个,如果打开比较慢,别着急,稍微等一下下)

接下一篇: 

three.js如何实现简易3D机房?(二)模型加载过渡动画:http://t.csdnimg.cn/sePmg

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

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

相关文章

基于springboot+vue实现会议室预约系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现会议室预约系统演示 摘要 一个企业的发展离不开相关的规定流程。信息化到来的今天在我们的生活当中。离不开各种信息化的支持。比如钉钉会议预约、美团买菜、扫码签到等各种信息化软件。他们涉及我们生活中的方方面面给我们的生活提供了更大的便利性。大到政…

css网格布局简单介绍

前端网格布局是一种用于在网页上创建复杂网格系统的布局技术。它允许开发者通过简单的语法来定义和控制元素的排列方式&#xff0c;使得页面布局更加灵活和可预测。在CSS中&#xff0c;网格布局可以通过display: grid属性来实现。 特点 1. **灵活性**&#xff1a;网格布…

微信小程序开发系列(十一)·小程序页面的跳转设置以及参数传递

目录 1. 跳转到商品列表 1.1 url: 当前小程序内的跳转链接 1.2 navigate&#xff1a;保留当前页面&#xff0c;跳转到应用内的某个页面。但是不能跳到 tabbar 页面 1.3 redirect&#xff1a; 关闭当前页面&#xff0c;跳转到应用内的某个页面。但不能跳转到 tabbar 页面…

在 Flutter 中使用 flutter_gen 简化图像资产管理

你是否厌倦了在 Flutter 项目中手动管理图像资产的繁琐任务&#xff1f; 告别手工输入资源路径的痛苦&#xff0c;欢迎使用“Flutter Gen”高效资源管理的时代。在本文中&#xff0c;我将带您从手动处理图像资源的挫折到动态生成它们的便利。 选择1&#xff1a;痛苦手动添加–…

Jenkins如何做到parameter页面里2个参数的联动

在Jenkins中&#xff0c;参数化构建是一种非常有用的功能&#xff0c;它可以让用户在构建过程中输入参数&#xff0c;从而实现更灵活的构建流程。有时候&#xff0c;我们希望两个参数之间能够实现联动&#xff0c;即一个参数的取值会影响另一个参数的取值。要实现这样的功能&am…

ChatGPT编程省钱、方便小示例——实现PDF转成PNG文件

ChatGPT编程省钱、方便小示例——实现PDF转成PNG文件 今天登录一个网站发现一个pdf文件很漂亮&#xff0c;于是想下载下来转成png图片。 于是用wps软件打开&#xff0c;然后进行转换。。。。。。 果然天下没有免费的午餐。既然AI时代已经到来&#xff0c;那就交给无所不能的AI…

DataGrip 连接 Centos MySql失败

首先检查Mysql是否运行&#xff1a; systemctl status mysqld &#xff0c; 如果显示没有启动则需要启动mysql 检查防火墙是否打开&#xff0c;是否打开3306的端口 sudo firewall-cmd --list-all 如果下面3306没有打开则打开3306端口 publictarget: defaulticmp-block-inver…

2195. 深海机器人问题(网络流,费用流,上下界可行流,网格图模型)

活动 - AcWing 深海资源考察探险队的潜艇将到达深海的海底进行科学考察。 潜艇内有多个深海机器人。 潜艇到达深海海底后&#xff0c;深海机器人将离开潜艇向预定目标移动。 深海机器人在移动中还必须沿途采集海底生物标本。 沿途生物标本由最先遇到它的深海机器人完成采…

【自动驾驶技术系列丛书学习】1.《自动驾驶技术概论》学习笔记

《自动驾驶技术概论》学习笔记 致谢&#xff1a;作者&#xff1a;王建、徐国艳、陈竞凯、冯宗宝 -------------------------------------------------------------------------------------------------------- 笔记目录 《自动驾驶技术概论》学习笔记 1.汽车发展史 2.国…

Docker常用基础指令

目录 1 前言 2 常用指令 2.1 获取帮助 2.2 拉取镜像到本地 2.3 对本地镜像进行打包 2.4 对本地镜像的删除 2.5 通过tar包加载本地镜像 2.6 查看所有镜像 2.7 创建新的容器 2.8 查看容器 2.9 停止容器运行 2.10 运行容器 2.11 删除容器 2.12 查看容器日志 2.13 进…

如何使用 ArcGIS Pro 统计四川省各市道路长度

在某些时候&#xff0c;我们需要进行分区统计&#xff0c;如果挨个裁剪数据再统计&#xff0c;不仅步骤繁琐、耗时&#xff0c;还会产生一些多余的数据&#xff0c;这里教大家如何在不裁剪数据的情况下统计四川各市的道路长度&#xff0c;希望能对你有所帮助。 数据来源 教程…

【MySQL】视图 -- 详解

视图 是一个虚拟表&#xff0c;其内容由查询定义。同真实的表一样&#xff0c;视图包含一系列带有名称的列和行数据。视图的数据变化会影响到基表&#xff0c;基表的数据变化也会影响到视图。 一、基本使用 1、创建视图 create view 视图名 as select 语句; 好处&#xff1a;…

UEFI Secure Boot

一、前言 在计算机世界&#xff0c;安全是一个永恒的话题。微软的Windows的安全性一直深受诟病&#xff0c;但随着操作系统层面的漏洞逐渐减少&#xff0c;黑客们盯上了BIOS固件。那如何保证从开机到进入操作系统这个过程中的安全呢&#xff1f;下图是Intel CPU的整个UEFI安全启…

洞察未来5-10年数字化转型的革命性趋势

“十四五”规划和2035年远景目标纲要提出了加快数字化发展&#xff0c;建设数字中国的目标&#xff0c; 这意味着数字化转型将成为推动生产方式、生活方式和治理方式变革的关键力量。 加快数字化发展 建设数字中国 ⭐ 打造数字经济新优势 ⭐ 加快数字社会建设步伐 ⭐ 提高数字…

软考62-上午题-【面向对象技术】-面向对象的基本概念1

一、封装 1-1、封装的定义 一个对象把属性和行为封装为一个整体。是一种信息隐蔽技术。 封装就是将类的某些信息隐藏在类内部&#xff0c;不允许外部程序直接访问&#xff0c;而是通过该类提供的方法&#xff08;getter和setter&#xff09;来实现对隐藏信息的操作和访问。 封…

Docker发布镜像(DockerHub,阿里云)

目录 1、发布到DockerHub上 2、发布到阿里云镜像服务上 小结 1、发布到DockerHub上 1.地址https://hub.docker.com/注册自己的账号 2.确定这个账号可以登录 3.在服务器上提交自己的镜像 [rootwq test]# docker login --helpUsage: docker login [OPTIONS] [SERVER]Log in…

数据存储格式

数据存储格式是指数据在存储介质中表示和组织的方式&#xff0c;以便于读取、写入和管理。 csv&#xff08;逗号分隔值&#xff09; CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff09;是一种常见的数据存储格式&#xff0c;它以纯文本形式存储表格数…

uniapp实现---类似购物车全选

目录 一、实现思路 二、实现步骤 ①view部分展示 ②JavaScript 内容 ③css中样式展示 三、效果展示 四、小结 注意事项 一、实现思路 点击商家复选框&#xff0c;可选中当前商家下的所有商品。点击全选&#xff0c;选中全部商家的商品 添加单个多选框&#xff0c;在将多选…

在XCode中使用SwiftGen管理你的图片、配色、多语言文件等

SwiftGen是一个工具&#xff0c;可以为您的项目资源&#xff08;如图像、本地化字符串等&#xff09;自动生成Swift代码&#xff0c;然后你就可以像使用一个Class类一样访问你的资源了。 而且添加或更新资源后&#xff0c;SwiftGen也会自动更新用于访问资源的Class类。对于管理…

H3C 路由过滤路由引入实验

H3C 路由过滤&路由引入实验 实验拓扑 ​​ 实验需求 按照图示配置 IP 地址&#xff0c;R1&#xff0c;R3&#xff0c;R4 上使用 loopback 口模拟业务网段R1 和 R2 运行 RIPv2&#xff0c;R2&#xff0c;R3 和 R4 运行 OSPF&#xff0c;各自协议内部互通在 RIP 和 OSPF …