一，下載相關(guān)插件
npm install three --save?
npm install?three-obj-mtl-loader?
npm install?three-orbit-controls??
二，建立一個(gè)帶有坐標(biāo)系的三維空間
1.引入插件
import * as THREE from "three";? //引入three.js??
import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";???//引入加載外部模型
const OrbitControls = require("three-orbit-controls")(THREE);??//引入控制器
2.定義一個(gè)帶有id的div
? ?<template>
? <div id="container" ref="container"></div>
</template>
3.自定義變量
data() {
? ? return {
? ? ? scene: null, // 場景
? ? ? camera: null, // 相機(jī)
? ? ? renderer: null, // 渲染
? ? ? controls: null, // 控制器
? ? };
? },
4.方法事件
//初始化環(huán)境
? ? initScene() {
? ? ? this.scene = new THREE.Scene();
? ? ? var axesHelper = new THREE.AxesHelper(15); // 建立xyz坐標(biāo)軸,紅色代表 X 軸. 綠色代表 Y 軸. 藍(lán)色代表 Z 軸.長度15
? ? ? this.scene.add(axesHelper);
? ? ? var AmbientLight = new THREE.AmbientLight(0xc0560c); // 環(huán)境光
? ? ? this.scene.add(AmbientLight);
? ? ? let DirectionalLight = new THREE.DirectionalLight(0xdfebff, 0.45); // 平行光
? ? ? this.scene.add(DirectionalLight);
? ? },? ??
// 初始化相機(jī)
? ? initCamera() {
? ? ? this.camera = new THREE.PerspectiveCamera(
? ? ? ? 75,
? ? ? ? window.innerWidth / window.innerHeight,
? ? ? ? 0.1,
? ? ? ? 1000
? ? ? );
? ? ? this.camera.position.set(50, 50, 50); // 調(diào)整相機(jī)方位
? ? ? this.camera.lookAt(new THREE.Vector3(0, 0, 0)); // 讓相機(jī)指向原點(diǎn)
? ? },
? ? // 初始化加載器
? ? initRenderer() {
? ? ? this.renderer = new THREE.WebGLRenderer();
? ? ? let container = document.getElementById("container");
? ? ? this.renderer.setSize(container.offsetWidth, container.offsetHeight);
? ? ? this.renderer.setClearColor(0xffd2ff, 1.0); // 背景光
? ? ? container.appendChild(this.renderer.domElement);
? ? },? ??
// 加載初始化
? ? init() {
? ? ? this.initScene();
? ? ? this.initCamera();
? ? ? this.initRenderer();
? ? },
? ? // 刷新動(dòng)畫
? ? animate() {??
? ? // requestAnimationFrame 應(yīng)運(yùn)而生，它采用的是系統(tǒng)時(shí)間間隔(約16.7ms)，保持最佳繪制效果與效率，
? ? ? // 使各種網(wǎng)頁動(dòng)畫有一個(gè)統(tǒng)一的刷新機(jī)制，從而節(jié)省系統(tǒng)資源，提高系統(tǒng)性能。
? ? ? requestAnimationFrame(this.animate);
? ? ? this.renderer.render(this.scene, this.camera);
? ? },
5.加載初始化方法以及刷新動(dòng)畫事件啟動(dòng)??
mounted() {
? ? this.init();
? ? this.animate();
? },
6.效果圖
三，加載mtl貼圖和obj模型，并加入控制
1,加載模型的文件存放位置，vue2是主目錄下的static目錄，vue3是主目錄的public目錄
? ? loadMTL() {
? ? ? let that = this;
? ? ? let mtlLoader = new MTLLoader();
? ? ? let objloader = new OBJLoader();
? ? ? mtlLoader.load(`/static/model/car/file.mtl`, function (materials) {
? ? ? ? materials.preload();
? ? ? ? objloader.load("/static/model/car/file.obj", function (obj) {
? ? ? ? ? obj.position.set(0, -20, 0); // 平移位置
? ? ? ? ? that.scene.add(obj);
? ? ? ? });
? ? ? });
? ? },
2.? ? 初始化控制器
? ? initOrbitControls() {
? ? ? let controls = new OrbitControls(this.camera, this.renderer.domElement);
? ? ? controls.enableDamping = true; // 將其設(shè)置為true以啟用阻尼（慣性），這將給控制器帶來重量感。默認(rèn)值為false。
? ? ? controls.enableZoom = true; // 啟用或禁用攝像機(jī)的縮放。
? ? ? controls.autoRotate = false; // 將其設(shè)為true，以自動(dòng)圍繞目標(biāo)旋轉(zhuǎn)。
? ? ? controls.autoRotateSpeed = 3; // 當(dāng) .autoRotate : Boolean為true時(shí)，圍繞目標(biāo)旋轉(zhuǎn)的速度將有多快，默認(rèn)值為2.0，相當(dāng)于在60fps時(shí)每旋轉(zhuǎn)一次需要30秒。
? ? ? controls.enablePan = true; // 啟用或禁用攝像機(jī)平移，默認(rèn)為true。
? ? ? controls.enableKeys = true; // 啟用或禁用鍵盤控制。
? ? ? controls.keyPanSpeed = 7; // 當(dāng)使用鍵盤按鍵的時(shí)候，相機(jī)平移的速度有多快。默認(rèn)值為每次按下按鍵時(shí)平移7像素。
? ? ? controls.keys = {
? ? ? ? // 這一對(duì)象包含了用于控制相機(jī)平移的按鍵代碼的引用。默認(rèn)值為4個(gè)箭頭（方向）鍵。
? ? ? ? LEFT: 37,
? ? ? ? UP: 38,
? ? ? ? RIGHT: 39,
? ? ? ? BOTTOM: 40,
? ? ? };
3.在加入控制器后，動(dòng)畫刷新事件中加入一行代碼
// 刷新動(dòng)畫
? ? animate() {
? ? ? requestAnimationFrame(this.animate);
? ? ? this.controls.update();
? ? ? this.renderer.render(this.scene, this.camera);
? ? },
4.效果圖
