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

背景

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

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

下载模型

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

查看模型

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

环境准备

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) {
        // 控制台查看加载进度xhr
        console.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) {
        // 控制台查看加载进度xhr
        console.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!