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{
     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
}