vue 中使用three.js

1.使用vue-cli工具創建一個vue項目

vue create projectName

2.安裝three.js

npm install three -S

3.創建index.vue頁面

在該頁面中導入THREE： import * as THREE from 'three'

<template>
    <div class="app-wrap" ref="view">
    </div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' // 控制器
let scene, camera, renderer, controler;//將場景等變量定義在全局，盡量不要掛載到vue實例上
export default {
    data () {
        return {
          viewNode: null,
          animationId: null
        }
    },
    methods:{
        //three場景初始化
        initThreeScene() {
            this.viewNode = this.$refs.view;
            scene = new THREE.Scene()
            camera = new THREE.PerspectiveCamera( 45, this.viewNode.clientWidth / this.viewNode.clientHeight, 1, 18000 );
            camera.position.set(0, 50, 20)
            renderer = new THREE.WebGLRenderer({ alpha: true });
            renderer.setSize( this.viewNode.clientWidth , this.viewNode.clientHeight );
            this.viewNode.appendChild( renderer.domElement );
            let AmbientLight = new THREE.AmbientLight( 0xcccccc);
            scene.add( AmbientLight )
            var DirectionalLight = new THREE.DirectionalLight( 0xeeeeee)
            DirectionalLight.position.set( 0, 150, 0 );
            scene.add( DirectionalLight );
            //控制器，旋轉縮放場景等
            controler = new OrbitControls(camera, renderer.domElement);
            controler.minPolarAngle = 0; 
            controler.maxPolarAngle = Math.PI/2;
            controler.minDistance = 1;
            controler.maxDistance = 800;
            //輔助線
            let grid = new THREE.GridHelper( 50, 30, 0xcc4400, 0x404543 );
            scene.add( grid );
        },
        animation() {
            renderer.render(scene,camera)
            this.animationId = requestAnimationFrame(this.animation);
        }
    },
    mounted(){
        this.initThreeScene();
        this.animation();
    },
    //頁面銷毀時記得銷毀場景防止內存泄漏
    destroyed() {
       scene.clear()
       renderer.dispose()
       renderer.forceContextLoss()
       renderer.content= null
       cancelAnimationFrame(this.animationId)
    }
}
</script>

<style scoped>
.app-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
</style>