一、首先第一步就是下載
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
}