关于在vue项目中引入ThreeJs相关API和模型的几种方式

原创已于 2022-06-09 17:33:06 修改 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #three.js #vue.js

于 2021-09-06 17:22:51 首次发布

Vuejs 同时被 3 个专栏收录

48 篇文章

订阅专栏

前端 javascript

32 篇文章

订阅专栏

threeJs

8 篇文章

订阅专栏

本文介绍了三种在WebGL场景中使用Three.js加载3D模型并应用环境贴图的方法，包括直接引入、创建公共JS文件和通过npm安装。通过实例代码展示了如何使用GLTFLoader加载模型，添加天空盒子环境贴图，以及进行缩放、旋转、平移等操作。同时，还提供了兼容性检测工具Detecto.js的使用。

方法一

引入Threejs
我们可以在public下的index.html文件中引入：
在这里插入图片描述

2. 相关依赖文件可以在`main.js`文件中引入

在这里插入图片描述

3. 模型可以放在`public`文件夹下新建`static`文件夹放入其中


function loadGlt(obj) {
        //为模型添加添加天空盒子环境贴图反光材质
        var path = 'static/surround/'
        var urls = [
          path + 'you.jpg',
          path + 'zuo.jpg',
          path + 'tian.jpg',
          path + 'di.jpg',
          path + 'qian.jpg',
          path + 'hou.jpg'
        ]
        var textureCube = new THREE.CubeTextureLoader().load(urls)
        textureCube.encoding = THREE.sRGBEncoding
        //scene.background = textureCube //添加天空盒子环境贴图 做背景
        var meshs = obj.scene
        meshs.traverse(function(gltf) {
          if (gltf.isMesh) {
            gltf.material.envMap = textureCube
          }
        })
        return meshs
      }

let loader = new THREE.GLTFLoader() //实例化 gltf 加载器
loader.load('static/threeD/zujian/泵组.gltf', obj => {
        var mesh = loadGlt(obj) //为模型添加环境贴图反光效果
        mesh.scale.set(0.055, 0.055, 0.055)
        mesh.rotation.x = Math.PI
        mesh.rotation.y = Math.PI
        mesh.rotation.z = Math.PI
        mesh.translateX(-13) //前后
        mesh.translateY(2) //上下
        mesh.translateZ(56.5) //左右
        // scene.add(mesh)
        for (var i = 0; i < 3; i++) {
          var Mesh = mesh.clone()
          Mesh.translateX(i * 8)
          Mesh.runing = '在线'
          Mesh.flool = 500
          Mesh.delivery = 135
          Mesh.powerd = 10
          Mesh.electrict = 50
          treeData[0].children.push({
            id: Mesh.id,
            mesh: Mesh,
            label: Mesh.name,
            children: []
          })
          var posit = Mesh.position
          group0.add(textLabel('泵组', posit))
          group0.add(Mesh)
        }
      })

4. 开发常用依赖

	<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/OBJLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/gltfLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/MTLLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/DRACOLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/renderers/CSS2DRenderer.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/postprocessing/EffectComposer.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/postprocessing/RenderPass.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/postprocessing/ShaderPass.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/shaders/CopyShader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/postprocessing/OutlinePass.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/shaders/FXAAShader.js"></script>

方法二

在这里插入图片描述
如上图所示，在public文件夹下引入资源类库，相关资源可在threejs官方示例中获得

我们创建一个公共的JS文件，然后写入一下内容：

(function () {
  var r = new RegExp("(^|(.*?\\/))(ThreeJs.Include\.js)(\\?|$)"),
    s = document.getElementsByTagName('script'),
    src, m, baseurl = "";
  for (var i = 0, len = s.length; i < len; i++) {
    src = s[i].getAttribute('src');
    if (src) {
      var m = src.match(r);
      if (m) {
        baseurl = m[1];
        break;
      }
    }
  }
  function inputScript(inc) {
    var script = '<' + 'script type="text/javascript" src="' + inc + '"' + '><' + '/script>';
    document.writeln(script);
  }
  function inputCSS(style) {
    var css = '<' + 'link rel="stylesheet" href="' + baseurl + '../css/' + style + '"' + '><' + '/>';
    document.writeln(css);
  }
  //加载类库资源文件写在这里
  function loadSMLibs() {
    inputScript(baseurl + 'three.min.js');
    inputScript(baseurl + 'Detector.js');
    inputScript(baseurl + 'DRACOLoader.js');
    inputScript(baseurl + 'CSS2DRenderer.js');
    inputScript(baseurl + 'EffectComposer.js');
    inputScript(baseurl + 'FXAAShader.js');
    inputScript(baseurl + 'GLTFLoader.js');
    inputScript(baseurl + 'OrbitControls.js');
    inputScript(baseurl + 'OutlinePass.js');
    inputScript(baseurl + 'RenderPass.js');
    inputScript(baseurl + 'ShaderPass.js');
    inputScript(baseurl + 'CopyShader.js');
    inputScript(baseurl + 'OBJLoader.js');
    inputScript(baseurl + 'RGBELoader.js');
    inputScript(baseurl + 'stats.min.js');
    inputScript(baseurl + 'dat.gui.min.js');
    inputScript(baseurl + 'THREEx.FullScreen.js');
    inputScript(baseurl + 'THREEx.WindowResize.js');
    inputScript(baseurl + 'THREEx.KeyboardState.js');
  }
  loadSMLibs();
})();

以上内容准备你好后，只需要在public/index.html文件中即可全部引入使用

<script src="/floder/THREEJS/js/ThreeJs.Include.js"></script>

方法三

使用npm的方式引入，推荐使用此方式，以达到按需加载，提高项目的可维护性与性能

npm install three --save

在需要用到的页面中引入即可

import * as THREE from 'three';

引入其他相关API，都可以在npm包中找到

import { DRACOLoader  } from 'three/examples/jsm/loaders/DRACOLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { CSS2DRenderer,CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader';

例如：引入轨道控制器，gltf模型加载器

const controls = new OrbitControls(this.camera, this.renderer.domElement)
const loader = track(new GLTFLoader()) // 实例化 gltf 加载器

关于使用兼容检测器Detecto.js没有在npm包中，需要我们单独引入

Detecto.js文件内容如下

/**
 * @author alteredq / http://alteredqualia.com/
 * @author mr.doob / http://mrdoob.com/
 */

const Detector = {
  canvas: !!window.CanvasRenderingContext2D,
  webgl: (function () {
    try {
      var canvas = document.createElement('canvas'); return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
    } catch (e) {
      return false;
    }
  })(),
  workers: !!window.Worker,
  fileapi: window.File && window.FileReader && window.FileList && window.Blob,
  getWebGLErrorMessage: function () {
    var element = document.createElement('div');
    element.id = 'webgl-error-message';
    element.style.fontFamily = 'monospace';
    element.style.fontSize = '13px';
    element.style.fontWeight = 'normal';
    element.style.textAlign = 'center';
    element.style.background = '#fff';
    element.style.color = '#000';
    element.style.padding = '1.5em';
    element.style.width = '400px';
    element.style.margin = '5em auto 0';

    if (!this.webgl) {
      element.innerHTML = window.WebGLRenderingContext ? [
        'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />',
        'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
      ].join('\n') : [
        'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',
        'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
      ].join('\n');
    }

    return element;
  },

  addGetWebGLMessage: function (parameters) {
    var parent, id, element;
    parameters = parameters || {};
    parent = parameters.parent !== undefined ? parameters.parent : document.body;
    id = parameters.id !== undefined ? parameters.id : 'oldie';
    element = Detector.getWebGLErrorMessage();
    element.id = id;
    parent.appendChild(element);
  }
}

export { Detector };

然后在需要使用的页面中引入

import { Detector } from "@/utils/detector/Detector";

使用方法如下：

init() {
   this.$nextTick(() => {
     if (Detector.webgl) return this.isIe()
     Detector.addGetWebGLMessage()
     this.$message.info('当前浏览器不支持WebGL')
   })
 },
isIe() {
   const exg = /trident/
   let sUserAgent = navigator.userAgent.toLowerCase() // 浏览器类型检查
   if (!exg.test(sUserAgent)) return this.initData() // 加载模型
   this.$message.info('三维模型加载失败，请切换到极速模式或使用chrome(谷歌)浏览器')
 },