import * as THREE from "three";
|
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
|
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
|
|
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
|
import { MTLLoader } from "three/addons/loaders/MTLLoader.js";
|
|
const mapThree = {
|
scene: null,
|
camera: null,
|
mesh: null,
|
renderer: null,
|
object: null,
|
mixer: null,
|
clock: null,
|
speed: 0,
|
LoopId: null,
|
init() {
|
// 创建场景
|
this.setSceneCreate();
|
},
|
setModelStart() {
|
this.speed = 0.2;
|
this.animate();
|
},
|
setModelClosed() {
|
if (mapThree.LoopId) {
|
cancelAnimationFrame(mapThree.LoopId);
|
mapThree.LoopId = null;
|
|
}
|
},
|
setModeladdSpeed() {
|
mapThree.speed += 0.2;
|
mapThree.speed = mapThree.speed > 1 ? 1 : mapThree.speed;
|
|
},
|
setModeldelSpeed() {
|
mapThree.speed -= 0.2;
|
mapThree.speed = mapThree.speed < 0.2 ? 0.2 : mapThree.speed;
|
|
},
|
setModelreFreash() {
|
this.speed = 0;
|
this.animate();
|
},
|
setSceneCreate() {
|
const threeBox = document.getElementById("threeBox");
|
const width = threeBox.offsetWidth;
|
const height = threeBox.offsetHeight;
|
// 创建场景
|
this.scene = new THREE.Scene();
|
// AxesHelper：辅助观察的坐标系
|
// 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.clock = new THREE.Clock();
|
this.addOrbitControls();
|
this.addObjModel();
|
//监听点击事件
|
const that = this;
|
window.addEventListener("click", (event) => {
|
event.preventDefault();
|
|
var raycaster = new THREE.Raycaster();
|
|
var mouse = new THREE.Vector2();
|
|
mouse.x = (event.clientX / that.renderer.domElement.clientWidth) * 2 - 1;
|
|
mouse.y =
|
-(event.clientY / that.renderer.domElement.clientHeight) * 2 + 1;
|
|
raycaster.setFromCamera(mouse, that.camera);
|
|
var intersects = raycaster.intersectObjects(that.scene.children, true);
|
|
//当intersects.length > 0说明碰点击到物体（可能为多个重合的物体），获取最近的物体名称进行判断
|
|
if (intersects.length > 0) {
|
// console.log(intersects);
|
}
|
});
|
},
|
addObjModel() {
|
var that = this;
|
var mtlLoader = new MTLLoader();
|
mtlLoader.load("http://localhost:5173/data/电机/电机.mtl", (material) => {
|
material.preload();
|
var objLoader = new OBJLoader();
|
//设置当前加载的纹理
|
objLoader
|
.setMaterials(material)
|
.load("http://localhost:5173/data/电机/电机.obj", (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();
|
});
|
});
|
},
|
animate() {
|
mapThree.LoopId = requestAnimationFrame(mapThree.animate);
|
mapThree.setModelChange();
|
mapThree.renderer.render(mapThree.scene, mapThree.camera);
|
},
|
setModelChange() {
|
if (mapThree.object) {
|
mapThree.object.traverse((obj) => {
|
if (obj.isMesh && obj.name == "dj_01") {
|
let center = new THREE.Vector3();
|
obj.geometry.computeBoundingBox();
|
obj.geometry.boundingBox.getCenter(center);
|
let x = center.x;
|
let y = center.y;
|
let z = center.z;
|
// 把对象放到坐标原点
|
obj.geometry.center();
|
// 绕轴旋转
|
obj.geometry.rotateZ(mapThree.speed);
|
// 再把对象放回原来的地方
|
obj.geometry.translate(x, y, z);
|
}
|
});
|
}
|
},
|
|
setRender() {
|
this.renderer.render(this.scene, this.camera);
|
},
|
addFBXModel() {
|
var that = this;
|
var fbxLoader = new FBXLoader();
|
|
var url = "http://localhost:5173/data/电机/电机.obj";
|
|
fbxLoader.load(url, (object) => {
|
//模型设置位置
|
object.position.set(0, 0, 0);
|
//模型大小
|
object.scale.multiplyScalar(0.5);
|
object.traverse((child) => {
|
if (child.isMesh) {
|
// console.log(child);
|
// 定制材质颜色
|
child.material.color.set(0x00ffff); // 红色
|
}
|
});
|
that.scene.add(object);
|
that.renderer.render(that.scene, that.camera);
|
});
|
},
|
addGeometry() {
|
// 模型形状
|
const geometry = new THREE.BoxGeometry(50, 50, 50);
|
// 模型材质
|
const material = new THREE.MeshBasicMaterial({
|
color: 0x00ffff, //16进制颜色
|
transparent: true, //允许透明
|
opacity: 0.5 //透明度
|
});
|
//创建一个网格模型
|
this.mesh = new THREE.Mesh(geometry, material);
|
//网格模型设置位置
|
this.mesh.position.set(10, 10, 10);
|
// 场景添加模型
|
this.scene.add(this.mesh);
|
this.camera.lookAt(this.mesh.position);
|
this.renderer.render(this.scene, this.camera);
|
},
|
addOrbitControls() {
|
// 设置相机控件轨道控制器OrbitControls
|
const controls = new OrbitControls(this.camera, this.renderer.domElement);
|
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
|
const that = this;
|
controls.addEventListener("change", function () {
|
that.setRender();
|
}); //监听鼠标、键盘事件
|
}
|
};
|
export default mapThree;
|
