vue中添加threeJS

一、首先第一步就是下載

npm install three

二、引入（引入在頁面中引入就行），在哪里用就在那里引入，不用全局引入

import * as THREE from 'three'
// 引入fbx模型加載庫FBXLoader
import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader.js'
// 移動旋轉 three/...等於D:/demoR/vue-admin-template/vueTemplateMock/node_modules/three/examples/jsm/controls/OrbitControls"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 可視化變換控件引入
import { TransformControls } from "three/examples/jsm/controls/TransformControls.js"//三維坐標軸

三、使用

這里呢我看別的博主寫的都是在頁面中使用，參數掛載到data中 。這是參考的別人寫的文章，這種方式就不在這里在進行贅述了
https://blog.csdn.net/u014452812/article/details/82783991
https://zhuanlan.zhihu.com/p/333615381
https://www.jb51.net/article/192999.htm
我自己則用了另一種方式進行寫，
直接把相關的threejs處理邏輯獨立出去了，然后在把個別要在頁面加載的函數拋出來，在頁面引用使用，（主要光搭架子就好多行代碼，要是頁面還有其他東西要寫，看着煩死了）
頁面.vue

<template>
    <div>
      <div class="threeJSBox">
        <div id="container"></div>
      </div>
    </div>
</template>
 
<script>
import { animate,threeExcute,FnDestroy } from "./index.js";
export default {
  name: 'ThreeTest',
  data() {
    return {

    }
  },
  methods: {},
  mounted() {
    threeExcute()
    animate()
  },
  beforeDestroy() {
    FnDestroy()
  }
}
</script>
<style scoped>

  .threeJSBox,#container{
    width: 1300px;
    height: 700px;
    border: 1px solid #f00;
  }
</style>

threejs邏輯.js

import * as THREE from 'three'
// 引入fbx模型加載庫FBXLoader
import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader.js'
// 移動旋轉
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 可視化變換控件引入
import { TransformControls } from "three/examples/jsm/controls/TransformControls.js"//三維坐標軸
//-----------------------

//------------
var transformControl;

var renderer,scene,camera,controls,timer;
var width,height;

// 初始化渲染器 Renderer
function initRenderer() {
    width = document.getElementById("container").clientWidth;
    height = document.getElementById("container").clientHeight;
    renderer = new THREE.WebGLRenderer({
        antialias:true,
        alpha:true
        // canvas: document.getElementById('box')
    });/*生成渲染器對象（屬性：抗鋸齒效果為設置有效）*/
    renderer.setSize(width,height);
    document.getElementById("container").appendChild(renderer.domElement);
    /*設置canvas背景色(clearColor)和背景色透明度（clearAlpha）必須設置alpha:true 再WebGLRenderer中 */
    renderer.setClearColor(0x00ff00, 0.0); //設置背景顏色
}
// 初始化場景 Scene
function initScene(){
    scene = new THREE.Scene();
    // // 輔助坐標系  參數250表示坐標系大小，可以根據場景大小去設置
    // var axisHelper = new THREE.AxisHelper(120);
    // scene.add(axisHelper);
}
// 初始化相機 Camera
function initCamera() {
    // PerspectiveCamera 透視攝像機 四個參數：視野角度（fov）,長寬比（aspect ratio）、近切面（near）、遠切面（far）
    camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
    //定義camera的位置 相機角度
    // (x,y,z)x:負數為向左、正數為向右，y：負數為向下、正數為向上，z：負數越大離得越遠、正數越大離得越遠（兩者方向相反）
    // camera.position.set(-30, 0, 60);
    camera.translateZ(700)
    //這里的lookAt函數是將視角指定為看原點
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add( camera );
    // camera=new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
    // //將camera添加到scene中
    // scene.add(camera);
}
//可視化變換控件對象
function initTransformControls(){
    transformControl = new TransformControls( camera,renderer.domElement );
    scene.add( transformControl );//控件對象添加到場景對象
}
// 初始化光源light
function initLight() {
    //環境光
    var ambient = new THREE.AmbientLight(0xFFFFFF);
    scene.add(ambient);
}
// 相機空間
function initcontrols() {
    controls = new OrbitControls( camera, renderer.domElement );
    controls.target.set( 0, 0.5, 0 );
    controls.update();
    controls.enablePan = false;
    controls.enableDamping = true;
}

//2d文字精靈圖
function init2DSpriteFont(){
makeTextPlaneMate2('小可愛').then(function (m) {
    let sprite = new THREE.Sprite(m);
    sprite.position.set(145, 11.5864898576271, -135);
    sprite.scale.set(-461.55739713473173, -535.010759450665, -6.212728214410121);
    sprite.name='guang'
    scene.add(sprite);
    transformControl.attach(sprite);
})
}
function makeTextPlaneMate2(text1) {
//繪制畫布做為Sprite的材質
var canvasText = document.createElement("canvas");
canvasText.width = 700;
canvasText.height = 700;
var ctx = canvasText.getContext("2d");
//添加背景圖片，進行異步操作
return new Promise((resolve, reject) => {
    let img = new Image();
    img.src = "/img/textBorder.png";
    //圖片加載之后的方法
    img.onload = () => {
        //將畫布處理為透明
        // ctx.clearRect(0, 0, 300, 300);
        //繪畫圖片
        ctx.drawImage(img, 0, 0, 300, 150);

        resolve(makeText(ctx, canvasText,text1))
    };
    //圖片加載失敗的方法
    img.onerror = (e) => {
        reject(e)
    }
});
}
function makeText(ctx, canvas,text1) {
//文字
const x = 10;
const y = 50
ctx.font = "40px Arial";
ctx.fillText(text1, x, y);

let texture = new THREE.CanvasTexture(canvas);
// let picaizhi=new THREE.SpriteMaterial({ map: texture });
return new THREE.SpriteMaterial({ map: texture });
}
// 全部加載
function threeExcute() {
    //初始化渲染器
    initRenderer();
    //初始化場景
    initScene();
    //初始化照相機
    initCamera();
    initTransformControls()
    //初始化光源
    initLight();
    //相機空間
    initcontrols();
    init2DSpriteFont()

}
var animate = function () {
    timer=requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );
    // console.log(xPosition,'-xPosition');
    // let obj =scene.getObjectByName ("guang")
    // if (obj) {
    //     obj.position.x=xPosition
    // }

};
function FnDestroy(){
    cancelAnimationFrame(timer)
    transformControl=null
    renderer=null
    scene=null
    camera=null
    controls=null
    width=null
    height=null
}

export{
    threeExcute,
    animate,
    FnDestroy
}