vue引用three.js详细步骤

three.js：

官网

效果预览：

---

先去官网找想要引入的模板 首先先下载依赖

npm install three --save

然后是贴官方代码，需要修改的地方主要是window.innerWidth改为dom元素的container.clientWidth，添加this
详细代码如下
1.官方代码引入

import * as THREE from ‘…/build/three.module.js’;
import {OrbitControls } from ‘./jsm/controls/OrbitControls.js’;
import {ConvexGeometry } from ‘./jsm/geometries/ConvexGeometry.js’;
import * as BufferGeometryUtils from ‘./jsm/utils/BufferGeometryUtils.js’;

修改后

import * as THREE from 'three'
import {
    OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import {
    ConvexGeometry } from 'three/examples/jsm/geometries/ConvexGeometry.js'
import {
   BufferGeometryUtils} from 'three/examples/jsm/utils/BufferGeometryUtils.js'

2.赋初始值

let group, camera, scene, renderer;

修改

  data () {
   
    return {
   
      group: null,
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },

3.初始初始化事件

init(); animate();

修改

 mounted () {
   
    this.init()
    this.animate()
  }

4.init方法修改
第一排添加dom元素获取

      let container = document.getElementById('container')

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement );

修改为

 this.renderer.setSize(container.clientWidth, container.clientHeight)
 container.appendChild(this.renderer.domElement)

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );

修改为

this.camera = new THREE.PerspectiveCamera(40, container.clientWidth / container.clientHeight, 1, 1000)

window.addEventListener(‘resize’, this.onWindowResize)

修改为

this.camera