<template>
<div class="three">
<div id="three_div"></div>
</div>
</template>
<script>
import * as THREE from "three";
//import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";//obj
//const OrbitControls = require("three-orbit-controls")(THREE);//obj
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";//gltf
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";//gltf
export default {
name: "three",
data () {
return {
scene: null,
camera: null,
renderer: null,
renderEnabled: true,
timer: null,
objectModal: null,
};
},
beforeDestroy () {
this.clearCache(this.objectModal);//清除模型
this.clearRenderer()//清除模型
window.removeEventListener('resize', this.ResizeFun, false)//监听页面的变化
},
methods: {
ResizeFun () {
let container = document.getElementById("three_div");
this.camera.aspect = container.clientWidth / container.clientHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(container.clientWidth, container.clientHeight);
},
timeRender () {
this.renderEnabled = true;
if (this.timer) {
clearTimeout(this.timer);
}
this.timer= setTimeout(() => {
this.renderEnabled = false;
}, 3000)
},
clearCache (obj) {
obj.geometry.dispose();
obj.material.dispose();
},
clearRenderer () {
if (this.renderer) {
this.renderer.dispose();
this.renderer.forceContextLoss();
this.renderer.context = null;
this.renderer.domElement = null;
this.renderer = null;
}
},
// 初始化场景
init () {
let container = document.getElementById("three_div");
//场景
this.scene = new THREE.Scene();
//相机
this.camera = new THREE.PerspectiveCamera(
50,
container.clientWidth / container.clientHeight,
1,
1200
);
this.camera.position.set(150, 315, 148);
// 渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setSize(container.clientWidth, container.clientHeight);
this.renderer.setClearColor(0xeeeeee, 0);
container.appendChild(this.renderer.domElement);
//控制器
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.addEventListener('change', () => {
this.timeRender();
});//监听页面的缩放,拖拽,旋转
this.controls.target.set(0, 0, 0);
this.controls.minDistance = 80;
this.controls.maxDistance = 400;
this.controls.maxPolarAngle = Math.PI / 3;//设置可旋转的范围
this.controls.enablePan = true;//是否可拖拽
this.controls.update();
// 三维坐标轴
// var axis = new THREE.AxisHelper(3);//定位中心点
// this.scene.add(axis);
},
// 加载模型obj+mtl
loadObj () {
let manager = new THREE.LoadingManager();
/*vue-cli2.x 的静态模型模型放在static/demo.mtl,vue-cli3.x以上放在public/static/demo.mtl*/
new MTLLoader(manager).load("/static/demo.mtl", (materials) => {
materials.preload();
new OBJLoader(manager)
.setMaterials(materials).load("/static/demo.obj", (obj) => {
//初始展示的模型的缩放比例
obj.scale.set(1, 1, 1);
this.objectModal = obj;
this.scene.add(obj);
this.timeRender();
});
});
},
//加载gltf模型
loadgltf () {
let that = this;
let loader = new GLTFLoader()
return new Promise(function () {
loader.load('/demo.glb', (gltf) => {
gltf.scene.scale.set(1, 1, 1)
that.objectModal = gltf;
that.scene.add(gltf.scene)
that.timeRender();
})
})
},
// 灯光
light () {
let ambientLight = new THREE.AmbientLight(0x999999); //环境光
this.scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xfffffe, 0.36);//点散光
directionalLight.position.set(50, 200, 100);
directionalLight.position.multiplyScalar(0.3);
this.scene.add(directionalLight);
},
// 动画效果
animate () {
if (this.renderEnabled) {
if (this.renderer) {
this.renderer.render(this.scene, this.camera);
}
}
requestAnimationFrame(this.animate);
},
},
mounted () {
this.init();
this.light();
// this.loadObj();
this.loadgltf();
this.animate();
// window.addEventListener('resize', this.ResizeFun, false)
},
};
</script>
<style>
.three{
color: #ffffff;
}
#three_div {
width: 100px;
height: 100px;
}
</style>