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

接上一篇:

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

目录

四、按需引入

五、导入模型


四、按需引入

index.vue文件中

javascript 复制代码
<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文件中

javascript 复制代码
// 引入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

相关推荐
啊?啊?7 分钟前
18 从对象内存到函数调用:C++ 虚函数表原理(继承覆盖 / 动态绑定)+ 多态实战
开发语言·c++·多态原理
bkspiderx13 分钟前
C++标准库:文件流类
开发语言·c++
大虾写代码13 分钟前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby31 分钟前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
siy233333 分钟前
[c语言日记] 数组的一种死法和两种用法
c语言·开发语言·笔记·学习·链表
上单带刀不带妹36 分钟前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel43 分钟前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
njxiejing1 小时前
Python NumPy安装、导入与入门
开发语言·python·numpy
wyzqhhhh1 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js