首先要下載mtl-obj-loader，然後再下載一個three-controls即可
<template>
<div class="hello" ref="box">
</div>
</template>
<script>
import * as THREE from 'three/src/Three'
import {MTLLoader, OBJLoader} from 'mtl-obj-loader'
import {OrbitControls} from 'three-controls'
export default {
data () {
return {
renderer:'',
scene:'',
camera:'',
loader1:'',
loader2:'',
spotlight:'',
orbit:'',
clock:'',
mesh:'',
sportlight1:''
}
},
mounted(){
this.clock=new THREE.Clock()
this.renderer=new THREE.WebGLRenderer();
this.spotlight=new THREE.SpotLight(0xffffff);
this.sportlight1=new THREE.SpotLight(0xffffff);
this.spotlight.position.set(-100,50,0)
this.sportlight1.position.set(100,50,0)
var box=this.$refs.box;
this.scene=new THREE.Scene();
this.scene.add(this.spotlight)
this.scene.add(this.sportlight1)
this.camera=new THREE.PerspectiveCamera(45,box.offsetWidth/box.offsetHeight,0.1,1000)
this.orbit=new OrbitControls(this.camera,this.renderer.domElement);
this.camera.position.set(0,0,200);
this.camera.lookAt(this.scene.position);
this.renderer.setClearColor(0xffffff);
this.renderer.setSize(box.offsetWidth,box.offsetHeight)
var slef=this;
var boxGeometry=new THREE.BoxGeometry(20,20,20);
var materila=new THREE.MeshBasicMaterial({color:0xff0000});
var boxMesh=new THREE.Mesh(boxGeometry,materila);
boxMesh.position.set(0,0,0)
var obj=new OBJLoader()
var mtl=new MTLLoader()
mtl.load('../../static/car/obj.mtl',materials=>{
obj.setMaterials(materials);
obj.load('../../static/car/obj.obj',object=>{
object.scale.set(10,10,10)
this.scene.add(object)
})
})
box.appendChild(this.renderer.domElement)
requestAnimationFrame(render)
function render(){
slef.renderer.render(slef.scene,slef.camera);
requestAnimationFrame(render)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{width:1366px;
height:624px;
}
</style>
效果
