362 lines
13 KiB
JavaScript
362 lines
13 KiB
JavaScript
|
||
import * as THREE from 'three';
|
||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
|
||
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
|
||
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
|
||
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
|
||
export default class Cockpit3d {
|
||
|
||
constructor(_element) {
|
||
this._initScene(_element);
|
||
this.shapes = [];
|
||
}
|
||
|
||
|
||
/**
|
||
* 初始化场景
|
||
*/
|
||
initScene() {
|
||
this.scene = new THREE.Scene();
|
||
}
|
||
/**
|
||
* 初始化相机
|
||
*/
|
||
initCamera() {
|
||
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||
// position and point the camera to the center of the scene
|
||
this.camera.position.set(-30, 40, 30);
|
||
this.camera.lookAt(this.scene.position);
|
||
}
|
||
|
||
/**
|
||
* 初始化渲染器
|
||
*/
|
||
initRenderer(_element) {
|
||
|
||
// create a render and set the size
|
||
this.renderer = new THREE.WebGLRenderer();
|
||
this.renderer.setClearColor(new THREE.Color(0x87CEEB));
|
||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||
this.renderer.antialias = true;
|
||
|
||
this.renderer.alpha = true;
|
||
|
||
this.renderer.precision = 'mediump'
|
||
// add the output of the renderer to the html element
|
||
this.container = document.getElementById(_element);
|
||
this.container.appendChild(this.renderer.domElement);
|
||
}
|
||
|
||
initControls() {
|
||
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
||
// 设置控制器阻尼，让控制器更有真是效果，必须在动画循环里调用update（）
|
||
//this.controls.enableDamping = true;
|
||
this.controls.minPolarAngle = 0;
|
||
this.controls.maxPolarAngle = 75 / 180 * Math.PI;
|
||
this.controls.minDistance = 200;
|
||
this.controls.maxDistance = 500; // 相机位置与观察目标点最大值
|
||
}
|
||
|
||
/**
|
||
* 初始化灯光
|
||
*/
|
||
initLight() {
|
||
this.light = new THREE.SpotLight(0xffffff);
|
||
this.light.position.set(-300, 600, -400);
|
||
this.light.castShadow = true;
|
||
this.scene.add(this.light);
|
||
this.scene.add(new THREE.AmbientLight(0x404040));
|
||
}
|
||
|
||
update() {
|
||
this.controls.update();
|
||
|
||
this.upDownShap();
|
||
}
|
||
|
||
_initScene(_element) {
|
||
|
||
this.initScene();
|
||
this.initCamera();
|
||
this.initRenderer(_element);
|
||
this.initLight();
|
||
this.initControls();
|
||
|
||
let _that = this;
|
||
function animate() {
|
||
requestAnimationFrame(animate);
|
||
_that.renderer.render(_that.scene, _that.camera);
|
||
_that.update(_that);
|
||
}
|
||
animate();
|
||
|
||
addEventListener('click', function (event) {
|
||
_that.onMouseDblclick(event, _that)
|
||
}, false);
|
||
window.addEventListener('mousemove', function (event) {
|
||
_that.onMouseMove(event, _that)
|
||
}, false);
|
||
|
||
|
||
}
|
||
|
||
addGltfObject(_modal) {
|
||
const loader = new GLTFLoader();
|
||
const dracoLoader = new DRACOLoader();
|
||
dracoLoader.setDecoderPath('/js/three/examples/jsm/libs/draco/');
|
||
loader.setDRACOLoader(dracoLoader);
|
||
let _that = this;
|
||
return new Promise((resolve, reject) => {
|
||
loader.load(
|
||
_modal.path,
|
||
function (gltf) {
|
||
//需要添加的部分
|
||
gltf.scene.traverse(function (child) {
|
||
if (child.isMesh) {
|
||
child.material.emissive = child.material.color;
|
||
child.material.emissiveMap = child.material.map;
|
||
}
|
||
});
|
||
gltf.scene.scale.set(1, 1, 1);
|
||
_that.scene.add(gltf.scene);
|
||
resolve();
|
||
},
|
||
// called while loading is progressing
|
||
function (xhr) {
|
||
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
|
||
},
|
||
// called when loading has errors
|
||
function (error) {
|
||
console.log('An error happened', error);
|
||
reject(error);
|
||
}
|
||
);
|
||
})
|
||
|
||
}
|
||
addJpgBackgroup(_modal) {
|
||
const texture = new THREE.TextureLoader().load(_modal.path);
|
||
texture.mapping = THREE.EquirectangularReflectionMapping;
|
||
texture.magFilter = THREE.LinearFilter;//③
|
||
texture.minFilter = THREE.LinearMipmapLinearFilter;//④
|
||
texture.encoding = THREE.sRGBEncoding;
|
||
//texture.repeat.set( 4, 4 );
|
||
this.scene.background = texture;
|
||
this.scene.environment = texture;
|
||
}
|
||
addHdrBackgroup(_modal) {
|
||
const rgbeLoader = new RGBELoader();
|
||
//资源较大，使用异步加载
|
||
let _that = this;
|
||
rgbeLoader.loadAsync(_modal.path).then((texture) => {
|
||
texture.mapping = THREE.EquirectangularReflectionMapping;
|
||
//将加载的材质texture设置给背景和环境
|
||
_that.scene.background = texture;
|
||
_that.scene.environment = texture;
|
||
});
|
||
}
|
||
|
||
|
||
|
||
clearThree(obj) {
|
||
while (obj.children.length > 0) {
|
||
this.clearThree(obj.children[0])
|
||
obj.remove(obj.children[0]);
|
||
}
|
||
if (obj.geometry) obj.geometry.dispose()
|
||
|
||
if (obj.material) {
|
||
//in case of map, bumpMap, normalMap, envMap ...
|
||
Object.keys(obj.material).forEach(prop => {
|
||
if (!obj.material[prop])
|
||
return
|
||
if (typeof obj.material[prop].dispose === 'function')
|
||
obj.material[prop].dispose()
|
||
})
|
||
obj.material.dispose()
|
||
}
|
||
}
|
||
|
||
resetScene() {
|
||
this.clearThree(this.scene);
|
||
}
|
||
|
||
setSelect3DObject(_callback) {
|
||
this.selectCallBack = _callback;
|
||
}
|
||
|
||
onMouseMove(event, _that) {
|
||
let intersects = _that.getIntersects(event, _that);
|
||
if (!intersects || intersects.length === 0) {
|
||
return;
|
||
}
|
||
let _name = "";
|
||
document.body.style.cursor = 'default';
|
||
for (let _index = 0; _index < intersects.length; _index++) {
|
||
_name = intersects[_index].object.name;
|
||
if (_name.endsWith('_focus') || _name.endsWith('_text')) {
|
||
document.body.style.cursor = 'pointer'; // 将鼠标状态设置为小手
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
onMouseDblclick(event, _that) {
|
||
//alert("a");
|
||
//获取raycaster和所有模型相交的数组，其中的元素按照距离排序，越近的越靠前
|
||
let intersects = _that.getIntersects(event, _that);
|
||
// console.log(intersects[0].object);
|
||
|
||
//获取选中最近的Mesh对象
|
||
//instance坐标是对象，右边是类，判断对象是不是属于这个类的
|
||
let _name = ''; //&& intersects[0].object.type === 'Mesh'
|
||
if (intersects.length !== 0) {
|
||
//intersects[0].object.material.color.set(0x00FF00);
|
||
//console.log(intersects[0].object.material.color);
|
||
for (let _index = 0; _index < intersects.length; _index++) {
|
||
_name = intersects[_index].object.name;
|
||
if (_name == 'X' || _name == 'Y' || _name == 'Z'
|
||
|| _name == 'XY' || _name == 'XZ' || _name == 'YZ'
|
||
|| _name == 'XYZ' || _name == 'E' || _name == 'XYZE'
|
||
|| _name == 'START' || _name == 'END') {
|
||
continue
|
||
}
|
||
if (intersects[_index].object.type === 'Mesh') {
|
||
_that.selectObject = intersects[_index].object;
|
||
if (_that.selectCallBack) {
|
||
_that.selectCallBack(_that.selectObject);
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
|
||
//changeMaterial(selectObject)
|
||
|
||
} else {
|
||
console.log('未选中 Mesh!');
|
||
}
|
||
}
|
||
|
||
getIntersects(event, _that) {
|
||
|
||
if (event.target.tagName != 'CANVAS') {
|
||
return [];
|
||
}
|
||
|
||
event.preventDefault();// 阻止默认的点击事件执行, https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault
|
||
// console.log("event.clientX:" + event.clientX);
|
||
// console.log("event.clientY:" + event.clientY);
|
||
|
||
//声明 rayCaster 和 mouse 变量
|
||
let rayCaster = new THREE.Raycaster();
|
||
let mouse = new THREE.Vector2();
|
||
|
||
//通过鼠标点击位置，计算出raycaster所需点的位置，以屏幕为中心点，范围-1到1
|
||
mouse.x = ((event.clientX - _that.container.getBoundingClientRect().left) / _that.container.offsetWidth) * 2 - 1;
|
||
mouse.y = -((event.clientY - _that.container.getBoundingClientRect().top) / _that.container.offsetHeight) * 2 + 1; //这里为什么是-号，没有就无法点中
|
||
|
||
//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
|
||
rayCaster.setFromCamera(mouse, _that.camera);
|
||
|
||
//获取与射线相交的对象数组， 其中的元素按照距离排序，越近的越靠前。
|
||
//+true，是对其后代进行查找，这个在这里必须加，因为模型是由很多部分组成的，后代非常多。
|
||
let intersects = rayCaster.intersectObjects(_that.scene.children, true);
|
||
|
||
//返回选中的对象
|
||
return intersects;
|
||
}
|
||
|
||
getObjectByName(_objName) {
|
||
return this.scene.getObjectByName(_objName);
|
||
}
|
||
|
||
addConicalShape(_objName) {
|
||
let geometry = new THREE.ConeGeometry(8, 15, 20); // 第三个参数是分段数，可以根据需要调整
|
||
|
||
// 创建材质
|
||
let material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.7 }); // 绿色
|
||
|
||
// 创建锥形对象
|
||
let cone = new THREE.Mesh(geometry, material);
|
||
cone.name = _objName;
|
||
cone.rotation.x = Math.PI;
|
||
this.scene.add(cone); // 将锥形对象添加到场景中
|
||
}
|
||
|
||
addText(_objName, _text, _position) {
|
||
let _that = this;
|
||
const loader = new FontLoader();
|
||
loader.load('/js/three/examples/fonts/helvetiker_regular.typeface.json', function (font) {
|
||
const geometry = new TextGeometry(_text, {
|
||
font: font,
|
||
size: 6,
|
||
height: 1,
|
||
curveSegments: 8,
|
||
bevelEnabled: true,
|
||
bevelThickness: 1,
|
||
bevelSize: 0.1,
|
||
bevelSegments: 2
|
||
});
|
||
|
||
let material = new THREE.MeshBasicMaterial({ color: 0xc17e14, transparent: true, opacity: 0.8}); // 创建材质
|
||
let mesh = new THREE.Mesh(geometry, material); // 创建网格并添加到场景中
|
||
mesh.name = _objName;
|
||
//mesh.scale.set(10, 10, 10)
|
||
mesh.position.set(_position.x, _position.y, _position.z);
|
||
mesh.rotateX(270/180 * Math.PI)
|
||
_that.scene.add(mesh); // 将锥形对象添加到场景中
|
||
});
|
||
}
|
||
|
||
getObjectPosition(targetObject) {
|
||
let targetCenter = new THREE.Vector3();
|
||
// targetObject.updateMatrixWorld(true); // 确保目标物体的世界矩阵是最新的
|
||
// targetObject.getWorldPosition(targetCenter); // 将目标物体的世界位置存储到 targetCenter 中
|
||
// // 将源物体的位置设置为目标物体的中心位置
|
||
// console.log(targetCenter);
|
||
let box = new THREE.Box3().setFromObject(targetObject);
|
||
targetCenter.x = (box.max.x + box.min.x) / 2;
|
||
targetCenter.y = box.min.y;
|
||
targetCenter.z = (box.max.z + box.min.z) / 2;
|
||
|
||
return { x: targetCenter.x, y: targetCenter.y, z: targetCenter.z };
|
||
}
|
||
|
||
getObjectHeight(targetObject) {
|
||
let box = new THREE.Box3().setFromObject(targetObject);
|
||
// 获取包围盒的高度
|
||
let height = box.max.y - box.min.y;
|
||
return height;
|
||
}
|
||
|
||
addShap(_object) {
|
||
|
||
this.shapes.push({
|
||
object: _object,
|
||
y: _object.position.y
|
||
});
|
||
}
|
||
|
||
upDownShap() {
|
||
if (!this.shapes || this.shapes.length < 1) {
|
||
return;
|
||
}
|
||
// 设置移动的速度和幅度
|
||
let speed = 1.5; // 移动速度
|
||
let amplitude = 5; // 移动幅度
|
||
this.shapes.forEach(shape => {
|
||
let newYPosition = shape.y + amplitude * Math.sin(speed * Date.now() / 1000);
|
||
shape.object.position.y = newYPosition;
|
||
|
||
})
|
||
}
|
||
|
||
lookAtObject(_object) {
|
||
// 将相机移动到物体位置并面对物体
|
||
let _pos = this.getObjectPosition(_object);
|
||
this.camera.position.set(_pos.x, _pos.y, _pos.z);
|
||
this.camera.lookAt(_object.position);
|
||
}
|
||
} |