THREE.js<vue項(xiàng)目中引入使用>

??本篇文章主要針對小白在使用threejs中所遇到的問題窖认，因?yàn)槲揖褪切“椎乃校酉聛頃痛蠹乙黄鹇砷L职恳。

??推薦幾個(gè)學(xué)習(xí)的地址：
??TRHEE.js中文網(wǎng)??
??TRHEE.js 嗶哩嗶哩學(xué)習(xí)視頻??
??TRHEE.js 官方地址??
??TRHEE.js GitHub地址??

??在.html 文件中主要是通過引用threejs（點(diǎn)擊下載three.js）诬垂，若是想使用 OrbitControls稚机，GLTFLoader這些，可以單獨(dú)到 threejs GitHub上進(jìn)行下載并引入
也可以直接引用下面這個(gè)地址

<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>

其它相關(guān)資源的引用可去這里進(jìn)行對應(yīng)的引用侮繁，點(diǎn)我查看

??下面主要介紹 vue 在引入 threejs 中遇到的問題：
1.組件怎么引用虑粥，這里的 OrbitControls 這些不能直接引入，需要進(jìn)行一些操作后才能引入 點(diǎn)擊查看如何引入宪哩。
因?yàn)槲矣玫氖?vue-cli3.0娩贷，所以需要?jiǎng)?chuàng)建一個(gè) vue.config.js,引入后就不會報(bào)錯(cuò)了。<點(diǎn)擊查看 vue.config.js的相關(guān)配置>
vue.config.js 配置

const ThreeExamples = require('import-three-examples')

 // 第三方插件配置
    pluginOptions: {
        // ...
        ...ThreeExamples
    }

首先 npm install --s three
組件內(nèi)引用

import * as THREE from "three";

代碼如下：

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import * as THREE from "three";
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
export default {
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      controls:null
    };
  },
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    //初始化
    init: function() {
      //  創(chuàng)建場景對象Scene
      this.scene = new THREE.Scene();

      //網(wǎng)格模型添加到場景中
      let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
      let material = new THREE.MeshNormalMaterial({
        color: "white"
      });
      this.mesh = new THREE.Mesh(geometry, material);
      this.scene.add(this.mesh);

      /**
       * 相機(jī)設(shè)置
       */
      let container = document.getElementById("container");
      this.camera = new THREE.PerspectiveCamera(
        70,
        container.clientWidth / container.clientHeight,
        0.01,
        10
      );
      this.camera.position.z = 1;

      /**
       * 創(chuàng)建渲染器對象
       */
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(this.renderer.domElement);

       //創(chuàng)建控件對象
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    },

    // 動畫
    animate: function() {
      requestAnimationFrame(this.animate);
      this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.02;
      this.renderer.render(this.scene, this.camera);
    }
  }
};
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

最后編輯于：2020.06.16 00:31:48

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者