在前几篇文章，已经介绍了Threejs的基本使用，本文将讲解如何在Vue中加入Threejs以及OBJ、MTL加载。
先上效果：
文档结构（注意在vue3之前的版本，obj等资源要放在static下面）：
其实在vue中使用threejs更加简单，唯一要注意的就是版本问题，我以前用的84版这一次引用的是最新的106版，在相机的处理上感觉与旧版本有区别。
步骤：
npm cnpm vue相关环境不再此处赘言。
1.安装threejs
cnpm install three -s -d2.安装obj mtl加载
cnpm install three-obj-mtl-loader -s -d3.前端代码
<template>
<div style="height: 100%">
<div>
<button @click="triggerTips('m1')">m1</button>
<button @click="triggerTips('m2')">m2</button>
<button @click="triggerTips('m3')">m3</button>
</div>
<div id="container">
</div>
</div>
</template>
<script>
import * as Three from 'three';
import {OBJLoader, MTLLoader} from 'three-obj-mtl-loader'
export default {
data() {
return {
camera: null,
scene: null,
renderer: null,
light: null,
elements: [],
tipsBottom: 5 + 200,
tipsTop:5 + 200 + 40
}
},
mounted() {
this.initThree(document.getElementById('container'))
this.animation();
},
methods: {
createSphere(color) {
//创建球体
let radius = 10, segemnt = 16, rings = 16;
let sphereMaterial = new Three.MeshLambertMaterial({
color: color,
transparent: true,
opacity: 0.8
});
let sphere = new Three.Mesh(
new Three.SphereGeometry(radius, segemnt, rings),
sphereMaterial
);
sphere.geometry.verticesNeedUpdate = true;
sphere.geometry.normalsNeedUpdate = true;
return sphere;
},
triggerTips(id) {
let element = this.elements.find(x => {
if (x.id == id) {
return x;
}
})
if (!element) {
console.log("不存在该id");
return;
}
if (element.timeKey) {
clearInterval(element.timeKey);
element.timeKey = undefined;
element.model.children.forEach(o => {
for (let m in element.materials.materials) {
if (o.name.indexOf(m) != -1) {
o.material = element.materials.materials[m];
}
}
})
element.cylis.forEach(x => {
this.scene.remove(x.cyli);
})
element.cylis.splice(0, element.cylis.length);
} else {
this.crateTips(element);
element.timeIndex = 0;
element.timeKey = setInterval(() => {
element.model.children.forEach(o => {
if (element.timeIndex == 0) {
o.material = new Three.MeshBasicMaterial({color: 0xFF0000});
} else {
for (let m in element.materials.materials) {
if (o.name.indexOf(m) != -1) {
o.material = element.materials.materials[m];
}
}
}
})
element.timeIndex = ++element.timeIndex % 2;
}, 500);
}
},
crateTips(element) {
element.cylis = [];
let cyliMesh01 = this.createSphere(0xFF0000);
cyliMesh01.position.set(element.model.position.x, this.tipsBottom, element.model.position.z);
this.scene.add(cyliMesh01);
element.cylis.push({cyli: cyliMesh01});
let cyliMesh02 = this.createSphere(0xFFFF00);
cyliMesh02.position.set(element.model.position.x, this.tipsTop, element.model.position.z);
this.scene.add(cyliMesh02);
element.cylis.push({cyli: cyliMesh02});
},
onResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
},
animation() {
this.elements.forEach(x => {
x.cylis.forEach(c => {
let cyl = c.cyli;
if (cyl.position.y >= this.tipsTop) {
c.direction = -1;
} else if (cyl.position.y <=this.tipsBottom) {
c.direction = 1;
}
cyl.position.setY(cyl.position.y + c.direction * 1.2);
})
})
//刷新页面
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.animation);
},
loadObj(id, baseUrl, objName, multiplyScalar, position, materials) {
let obj = {id: id, isTips: false,cylis:[]};
if (!multiplyScalar) {
multiplyScalar = 1;
}
let manager = new Three.LoadingManager();
let loader = new OBJLoader(manager);
if (multiplyScalar) {
loader.setMaterials(materials);
obj.materials = materials;
}
loader.setPath(baseUrl);
loader.load(objName, object => {
//显示比例
object.scale.multiplyScalar(multiplyScalar);
//加入到页面中
this.scene.add(object);
object.castShadow = true;
object.receiveShadow = true;
obj.model = object;
object.position.set(position.x, position.y, position.z);
this.elements.push(obj);
});
},
loadObjWithMaterials(id, baseUrl, objName, mtlName, position, multiplyScalar) {
let mtlLoader = new MTLLoader();
mtlLoader.setPath(baseUrl);
mtlLoader.load(mtlName, materials => {
this.loadObj(id, baseUrl, objName, multiplyScalar, position, materials);
});
},
initThree(element) {
let container = element;
//初始化相机
this.camera = new Three.PerspectiveCamera(70, element.clientWidth / element.clientHeight, 1, 10000);
this.camera.position.x = 0;
this.camera.position.y = 1000;
this.camera.position.z = 1000;
this.camera.rotation.x -= 45 * (Math.PI / 180);
//场景
this.scene = new Three.Scene();
//渲染
this.renderer = new Three.WebGLRenderer({antialias: true});
this.renderer.setSize(element.clientWidth, element.clientHeight);
element.appendChild(this.renderer.domElement);
//灯光
this.light = new Three.AmbientLight(0xFFFFFF);
this.scene.add(this.light);
//创建地面
let plane = new Three.Mesh(
new Three.PlaneBufferGeometry(2000, 2000),
new Three.MeshPhongMaterial({
color: 0x999999,
specular: 0x101010
})
);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -0.5;
this.scene.add(plane);
plane.receiveShadow = true;
window.addEventListener('resize', this.onResize, false);
this.loadObjWithMaterials("m1", 'static/model/female02/', 'female02.obj', 'female02.mtl', {
x: 0,
y: 0,
z: 0
}, 1,)
this.loadObjWithMaterials("m2", 'static/model/female02/', 'female02.obj', 'female02.mtl', {
x: 500,
y: 0,
z: 0
}, 1,)
this.loadObjWithMaterials("m3", 'static/model/female02/', 'female02.obj', 'female02.mtl', {
x: 0,
y: 0,
z: 600
}, 1,)
}
}
}
</script>
<style>
#container {
height: 100%;
}
</style>
最后说一句webstrom写前端是真的爽，不管是vue单页面，还是threejs都很流畅，提示也很到位。
