<template>
|
<div id="threeBox" class="appBox"></div>
|
</template>
|
|
<script>
|
import * as THREE from "three";
|
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
|
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
|
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
|
export default {
|
props: {
|
someData: {
|
type: String,
|
default: "",
|
}
|
},
|
data() {
|
return {
|
scene: null,
|
camera: null,
|
mesh: null,
|
renderer: null,
|
object: null,
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
setRender() {
|
this.renderer.render(this.scene, this.camera);
|
},
|
setMapThreeStart() {
|
const threeBox = document.getElementById("threeBox");
|
const width = threeBox.offsetWidth;
|
const height = threeBox.offsetHeight;
|
// 创建场景
|
this.scene = new THREE.Scene();
|
// const axesHelper = new THREE.AxesHelper(200);
|
// this.scene.add(axesHelper);
|
// 创建相机
|
this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 10000);
|
// 根据需要设置相机位置具体值
|
this.camera.position.set(0.5, 0.5, 0.5);
|
this.camera.lookAt(0, 0, 0);
|
this.scene.add(this.camera);
|
// 添加光源
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
|
this.scene.add(ambientLight);
|
|
const pointLight = new THREE.PointLight(0xffffff, 0.8);
|
|
this.camera.add(pointLight);
|
|
const ambientLight1 = new THREE.HemisphereLight("#Ffffff", "#000000", 1);
|
this.scene.add(ambientLight1);
|
|
// 创建渲染器
|
this.renderer = new THREE.WebGLRenderer({ antialias: false });
|
|
this.renderer.setClearColor("rgb(248,248,255)", 1.0);
|
this.renderer.setSize(width, height);
|
threeBox.appendChild(this.renderer.domElement);
|
this.setRender();
|
|
this.clock = new THREE.Clock();
|
this.addOrbitControls();
|
},
|
addOrbitControls() {
|
// 设置相机控件轨道控制器OrbitControls
|
const controls = new OrbitControls(this.camera, this.renderer.domElement);
|
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
|
const that = this;
|
controls.addEventListener("change", function () {
|
that.setRender();
|
}); //监听鼠标、键盘事件
|
},
|
replaceLast6Chars(res, replacement) {
|
if (!res) return
|
return res.slice(0, -3) + replacement.padEnd(3, '');
|
},
|
setMapThree(res) {
|
var that = this;
|
var mtlLoader = new MTLLoader();
|
const objUrl = res;
|
var mtlUrl = res;
|
if (res.indexOf('.obj') > -1) {
|
mtlUrl = this.replaceLast6Chars(res, 'mtl')
|
}
|
mtlLoader.load(mtlUrl, (material) => {
|
console.log(material);
|
material.preload();
|
var objLoader = new OBJLoader();
|
//设置当前加载的纹理
|
objLoader
|
.setMaterials(material)
|
.load(objUrl, (item) => {
|
item.position.set(0, 0, 0);
|
//
|
//
|
item.traverse(function (obj) {
|
if (obj.isMesh) {
|
obj.castShadow = true; //阴影
|
obj.receiveShadow = true; //接受别人投的阴影
|
}
|
});
|
|
that.scene.add(item);
|
that.object = item;
|
that.setRender();
|
});
|
});
|
},
|
setRender() {
|
this.renderer.render(this.scene, this.camera);
|
},
|
},
|
watch: {
|
someData(n, o) {
|
if (n) {
|
if (!this.scene) {
|
this.setMapThreeStart();
|
}
|
this.$nextTick(() => {
|
this.setMapThree(n);
|
})
|
//
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.appBox {
|
// width: 100%;
|
// height: 100%;
|
width: 616px;
|
height: 379px;
|
position: absolute;
|
}
|
</style>
|
