vue使用three.js，并加载obj模型mtl贴图

一，下载相关插件

npm install three --save

npm install three-obj-mtl-loader

npm install three-orbit-controls

二，建立一个带有坐标系的三维空间

1.引入插件

import * as THREE from "three"; //引入three.js

import { OBJLoader, MTLLoader } from "three-obj-mtl-loader"; //引入加载外部模型

const OrbitControls = require("three-orbit-controls")(THREE); //引入控制器

2.定义一个带有id的div

</template>

3.自定义变量

data() {

return {

scene: null, // 场景

camera: null, // 相机

renderer: null, // 渲染

controls: null, // 控制器

};

4.方法事件

//初始化环境

initScene() {

this.scene = new THREE.Scene();

var axesHelper = new THREE.AxesHelper(15); // 建立xyz坐标轴,红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.长度15

this.scene.add(axesHelper);

var AmbientLight = new THREE.AmbientLight(0xc0560c); // 环境光

this.scene.add(AmbientLight);

let DirectionalLight = new THREE.DirectionalLight(0xdfebff, 0.45); // 平行光

this.scene.add(DirectionalLight);

// 初始化相机

initCamera() {

this.camera = new THREE.PerspectiveCamera(

75,

window.innerWidth / window.innerHeight,

0.1,

1000

);

this.camera.position.set(50, 50, 50); // 调整相机方位

this.camera.lookAt(new THREE.Vector3(0, 0, 0)); // 让相机指向原点

// 初始化加载器

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();

// 刷新动画

animate() {

// requestAnimationFrame 应运而生，它采用的是系统时间间隔(约16.7ms)，保持最佳绘制效果与效率，

// 使各种网页动画有一个统一的刷新机制，从而节省系统资源，提高系统性能。

requestAnimationFrame(this.animate);

this.renderer.render(this.scene, this.camera);

5.加载初始化方法以及刷新动画事件启动

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; // 将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。

controls.enableZoom = true; // 启用或禁用摄像机的缩放。

controls.autoRotate = false; // 将其设为true，以自动围绕目标旋转。

controls.autoRotateSpeed = 3; // 当 .autoRotate : Boolean为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一次需要30秒。

controls.enablePan = true; // 启用或禁用摄像机平移，默认为true。

controls.enableKeys = true; // 启用或禁用键盘控制。

controls.keyPanSpeed = 7; // 当使用键盘按键的时候，相机平移的速度有多快。默认值为每次按下按键时平移7像素。

controls.keys = {

// 这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头（方向）键。

LEFT: 37,

UP: 38,

RIGHT: 39,

BOTTOM: 40,

};

3.在加入控制器后，动画刷新事件中加入一行代码