做个医院网站多少钱,苏州吴江区住房和城乡建设局网站,好大夫在线医生免费咨询,百度seo原理背景
如今各类数字孪生场景对三维可视化的需求持续旺盛#xff0c;因为它们可以用来创建数字化的双胞胎#xff0c;即现实世界的物体或系统的数字化副本。这种技术在工业、建筑、医疗保健和物联网等领域有着广泛的应用#xff0c;可以帮助人们更好地理解和管理现实世界的事…背景
如今各类数字孪生场景对三维可视化的需求持续旺盛因为它们可以用来创建数字化的双胞胎即现实世界的物体或系统的数字化副本。这种技术在工业、建筑、医疗保健和物联网等领域有着广泛的应用可以帮助人们更好地理解和管理现实世界的事物。
Three.js 可以让我们在网页上创建交互式的 3D 图形和动画。它是一个强大的 JavaScript 库可以帮助我们轻松地在浏览器中实现复杂的 3D 效果而无需深入了解底层的 WebGL 技术。如果你需要在网页上展示 3D 内容或者构建交互式的3D体验 Three.js 是一个非常有用的工具。今天通过 Vue3.0 集成 Three.js 来实现对 gltf 模型的加载、渲染与操控。
下载模型
如果没有专门的三维建模工程师可以到https://sketchfab.com注册一个账号上面有不少可以免费下载的模型我这里下载 gltf 格式。 查看模型
这个 gltf 格式的文件可以使用 Win10 自带的 3D查看器 打开。 环境准备
Note:
前提需要有 Node.js 环境可使用 nvm 进行 Node.js 的多版本管理。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 后续的三维场景渲染就在这个文件中实现以下是完整代码。
templatediv refthreeModel classthreed/div
/templatescript 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 替换了。 可能遇到问题
如何设置模型为透明背景
有些场景下比如我们要做数据大屏可视化大屏本身已经有背景图片了不希望 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的模型黑乎乎的怎么破 直接上解决办法将模型的材质里的 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));}
);使用效果 小总结
通过 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!
