邓洁 : 隧道模型合并
This commit is contained in:
dengj
456
src/components/content/tunnelScene/sceneClass/demo.js
Normal file
456
src/components/content/tunnelScene/sceneClass/demo.js
Normal file
@@ -0,0 +1,456 @@
|
||||
import { handleLClick } from "./handleRLclick/handleLclick";
|
||||
import { handleRClick } from "./handleRLclick/handleRclick";
|
||||
import { handleDBLClick } from "./handleDBLclick";
|
||||
import { checkAnimation } from "./checkTag";
|
||||
import {
|
||||
handleEndChange,
|
||||
handleStartChange,
|
||||
} from "./handleOrbitControlsChange";
|
||||
import { saveState, resetState } from "./viewBack";
|
||||
|
||||
import { addDev } from "./addDevice";
|
||||
import { removeDev } from "./removeDevice";
|
||||
import { checkDevModel } from "./checkDevModel";
|
||||
export default class Demo {
|
||||
// 摄像机看向位置
|
||||
origin = null;
|
||||
//附着点的模型
|
||||
points = [];
|
||||
//设备模型数组
|
||||
deviceModels = [];
|
||||
constructor(three, mountedElement) {
|
||||
// 外部引入匿名函数
|
||||
this._handleLClick = handleLClick;
|
||||
this._handleRClick = handleRClick;
|
||||
this._handleDBLClick = handleDBLClick;
|
||||
this._checkAnimation = checkAnimation;
|
||||
this._saveSate = saveState;
|
||||
this._resetState = resetState;
|
||||
this._removeDev = removeDev;
|
||||
|
||||
this.THREE = three;
|
||||
this.mountedElement = mountedElement;
|
||||
//初始化场景
|
||||
this.scene = new this.THREE.Scene();
|
||||
// 初始化摄像机
|
||||
this.camera = new this.THREE.PerspectiveCamera(
|
||||
75,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
|
||||
this.camera.position.z = 130;
|
||||
this.camera.position.y = 35;
|
||||
this.camera.position.x = 40;
|
||||
|
||||
this.camera.lookAt(0, 0, 1000);
|
||||
// 初始化渲染器
|
||||
this.renderer = new this.THREE.WebGLRenderer({
|
||||
// 抗锯齿
|
||||
antialias: true,
|
||||
});
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.domElement.style.position = "absolute";
|
||||
this.mountedElement.appendChild(this.renderer.domElement);
|
||||
// 创建渲染帧
|
||||
this.render = () => {
|
||||
this.__renderScope();
|
||||
requestAnimationFrame(this.render);
|
||||
};
|
||||
this.render();
|
||||
this.canvasResize();
|
||||
this.addXYZ();
|
||||
|
||||
this.HTMLTagEventListener();
|
||||
|
||||
this.bindRightPlaneInfo();
|
||||
}
|
||||
//渲染函数作用域(这里主要写渲染帧内操作)
|
||||
__renderScope() {
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
// 轨道控制器更新
|
||||
if (this.orbitControls) {
|
||||
this.orbitControls.update();
|
||||
}
|
||||
|
||||
// 摄像头移动动画
|
||||
if (this.cameraPositionTween) {
|
||||
this.cameraPositionTween.update();
|
||||
}
|
||||
|
||||
//html标签渲染
|
||||
if (this.CSS2Renderer) {
|
||||
this.CSS2Renderer.render(this.scene, this.camera);
|
||||
}
|
||||
// 选中标签动画渲染
|
||||
if (this.checkAnimationTween) {
|
||||
this.checkAnimationTween.update();
|
||||
}
|
||||
// 视角重置动画
|
||||
if (this.resetViewAngleAnimation) {
|
||||
this.resetViewAngleAnimation.update();
|
||||
}
|
||||
//视角回退动画
|
||||
if (this.viewSateResetAnimation) {
|
||||
this.viewSateResetAnimation.update();
|
||||
}
|
||||
// 视角跟随动画
|
||||
if (this.intoPointAnimation) {
|
||||
this.intoPointAnimation.update();
|
||||
}
|
||||
}
|
||||
|
||||
// 添加世界坐标系
|
||||
addXYZ() {
|
||||
// const axesHelper = new this.THREE.AxesHelper(100);
|
||||
// this.scene.add(axesHelper);
|
||||
}
|
||||
|
||||
// 屏幕自适应
|
||||
canvasResize() {
|
||||
window.addEventListener("resize", () => {
|
||||
this.camera.aspect = window.innerWidth / window.innerHeight;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
}
|
||||
|
||||
// 模型加载
|
||||
/**
|
||||
* @param {Object} GLTFLoader 模型加载器
|
||||
* @param {String} path 模型资源路径
|
||||
*/
|
||||
loadModel(GLTFLoader, path) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.gltfloader = new GLTFLoader();
|
||||
this.gltfloader.load(
|
||||
"../../../../../public/tunnelModel/chanel.glb",
|
||||
(gltf) => {
|
||||
gltf.scene.traverse((child) => {
|
||||
this._forModels(child);
|
||||
});
|
||||
this.scene.add(gltf.scene);
|
||||
|
||||
// 加载完后可执行函数
|
||||
this._afterLoaded(gltf.scene);
|
||||
resolve(gltf);
|
||||
},
|
||||
(xhr) => {
|
||||
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
|
||||
},
|
||||
(error) => {
|
||||
console.log(error);
|
||||
reject(error);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
// 模型加载完函数
|
||||
_afterLoaded() {
|
||||
// 可以进行选中
|
||||
this._hoverModel(this.points);
|
||||
// 可以进行点击
|
||||
this._ClickModel(this.points);
|
||||
}
|
||||
|
||||
// 在此方法中对模型批量操作
|
||||
_forModels(child) {
|
||||
// 匹配附着点(这里不适合对单个模型进行保存，批量对模型进行操作)
|
||||
if (child.isMesh && /^point+/.test(child.name)) {
|
||||
this.points.push(child);
|
||||
// 改变为基础材质
|
||||
child.material = new this.THREE.MeshBasicMaterial();
|
||||
|
||||
// 遍历一个属性是否存在设备
|
||||
child.hasDevice = false; //初始化
|
||||
}
|
||||
}
|
||||
|
||||
// 添加轨道控制器
|
||||
/**
|
||||
* @param {Object} OrbitControls 轨道控制器
|
||||
*/
|
||||
addOrbitControls(OrbitControls) {
|
||||
this.orbitControls = new OrbitControls(
|
||||
this.camera,
|
||||
this.renderer.domElement
|
||||
);
|
||||
|
||||
//限制轨道控制器的视角变化
|
||||
this.orbitControls.maxPolarAngle = Math.PI * (3 / 5);
|
||||
// 监听控制器变化
|
||||
this.orbitControls.addEventListener("end", handleEndChange.bind(this));
|
||||
this.orbitControls.addEventListener("start", handleStartChange.bind(this));
|
||||
}
|
||||
/**
|
||||
* @param {Class} Tween 添加补间动画
|
||||
*/
|
||||
|
||||
addTween(Tween) {
|
||||
this.TWEEN = Tween;
|
||||
}
|
||||
|
||||
/***
|
||||
* 鼠标移入可以高亮的模型
|
||||
*@param {Array} hoverModels 需要高亮的模型
|
||||
*/
|
||||
_hoverModel(hoverModels) {
|
||||
this.renderer.domElement.addEventListener("mousemove", (e) => {
|
||||
const mouse = new this.THREE.Vector2();
|
||||
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
||||
const raycaster = new this.THREE.Raycaster();
|
||||
raycaster.setFromCamera(mouse, this.camera);
|
||||
const intersects = raycaster.intersectObjects(hoverModels);
|
||||
if (intersects.length > 0) {
|
||||
if (!this.preHover) {
|
||||
this.preHover = intersects[0].object;
|
||||
} else {
|
||||
this.preHover.material.color.set("white");
|
||||
this.preHover = intersects[0].object;
|
||||
}
|
||||
|
||||
intersects[0].object.material.color.set("red");
|
||||
const tagP = intersects[0].object.getWorldPosition(
|
||||
new this.THREE.Vector3()
|
||||
);
|
||||
|
||||
this._checkAnimation(tagP);
|
||||
} else {
|
||||
if (!this.preHover) return;
|
||||
this.preHover.material.color.set("white");
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @param {Array} isClickModels 可以进行点击的模型吧
|
||||
*/
|
||||
_ClickModel(isClickModels) {
|
||||
// 点击两次处理事件
|
||||
this.renderer.domElement.addEventListener(
|
||||
"dblclick",
|
||||
this.__handleListenerDBLClickEvent.bind(this, isClickModels) //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
|
||||
);
|
||||
// 点击一次时处理时间
|
||||
this.renderer.domElement.addEventListener(
|
||||
"mousedown",
|
||||
this.__handleListenerClickRLEvent.bind(this, isClickModels) //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
|
||||
);
|
||||
}
|
||||
// 处理点击2次触发事件事件
|
||||
__handleListenerDBLClickEvent(isClickModels, e) {
|
||||
// 如果监听到双击则清空单次点击事件
|
||||
clearTimeout(this.EventTimer);
|
||||
//最后一个是监听器默认参数
|
||||
const mouse = new this.THREE.Vector2();
|
||||
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
||||
const raycaster = new this.THREE.Raycaster();
|
||||
raycaster.setFromCamera(mouse, this.camera);
|
||||
const intersects = raycaster.intersectObjects(isClickModels);
|
||||
// 取消定位的视角返回初始化
|
||||
if (intersects.length === 0) {
|
||||
this.clearTagsObj();
|
||||
this._resetState();
|
||||
return;
|
||||
}
|
||||
// 处理连续双击击事件
|
||||
this._handleDBLClick(intersects[0].object);
|
||||
}
|
||||
|
||||
// 处理点击左右键触发的事件
|
||||
__handleListenerClickRLEvent(isClickModels, e) {
|
||||
clearTimeout(this.EventTimer);
|
||||
this.EventTimer = setTimeout(() => {
|
||||
const mouse = new this.THREE.Vector2();
|
||||
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
||||
const raycaster = new this.THREE.Raycaster();
|
||||
raycaster.setFromCamera(mouse, this.camera);
|
||||
const intersects = raycaster.intersectObjects(isClickModels);
|
||||
if (intersects.length === 0) return;
|
||||
this.setBoxHelper(intersects[0].object);
|
||||
|
||||
// 处理点击左右键事件
|
||||
if (e.button === 0) {
|
||||
this._handleLClick(intersects[0].object);
|
||||
} else if (e.button === 2) {
|
||||
this._handleRClick(intersects[0].object);
|
||||
}
|
||||
}, 400);
|
||||
}
|
||||
|
||||
// 添加css3Renderer
|
||||
addCSS3Renderer(CSS2Renderer, CSS2DObject, [infoDom, editDom]) {
|
||||
this.CSS2Renderer = new CSS2Renderer();
|
||||
this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.CSS2Renderer.render(this.scene, this.camera);
|
||||
|
||||
this.mountedElement.appendChild(this.CSS2Renderer.domElement);
|
||||
|
||||
// 初始化html标签
|
||||
this.tagHtml = infoDom;
|
||||
this.tag2Html = infoDom;
|
||||
this.tag3Html = editDom;
|
||||
this.CSS2DObject = CSS2DObject;
|
||||
// 创建html标签模型
|
||||
this.tagCSS2DObj = new CSS2DObject(this.tagHtml);
|
||||
this.tag2CSS2DObj = new CSS2DObject(this.tag2Html);
|
||||
this.tag3CSS2DObj = new CSS2DObject(this.tag3Html);
|
||||
// 设置该标签初始化透明
|
||||
|
||||
this.tagCSS2DObj.element.style.display = "none";
|
||||
this.tag2CSS2DObj.element.style.display = "none";
|
||||
this.tag3CSS2DObj.element.style.display = "none";
|
||||
this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
|
||||
this.tag2CSS2DObj.scale.set(0.1, 0.1, 0.1);
|
||||
this.tag3CSS2DObj.scale.set(0.1, 0.1, 0.1);
|
||||
|
||||
this.tagCSS2DObj.scale.set(3, 3, 3);
|
||||
}
|
||||
clearTagsObj() {
|
||||
if (this.preDBLModel) {
|
||||
this.preDBLModel.remove(this.tagCSS2DObj);
|
||||
}
|
||||
// 所有标签看不见
|
||||
this.scene.remove(this.tag2CSS2DObj);
|
||||
this.scene.remove(this.tag3CSS2DObj);
|
||||
// 删除标记动画
|
||||
this.scene.remove(this.group);
|
||||
}
|
||||
/**
|
||||
* @param {Array} paths 所有设备模型的路径
|
||||
*/
|
||||
addDeviceModels(paths) {
|
||||
const gltfloader = this.gltfloader;
|
||||
load(paths);
|
||||
function load(paths, current = 0) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// try {
|
||||
gltfloader(paths[current], (deviceModel) => {
|
||||
this.deviceModels.push(deviceModel);
|
||||
current++;
|
||||
console.log(deviceModel);
|
||||
load(paths, current);
|
||||
if (current > paths.length) {
|
||||
resolve("ok");
|
||||
}
|
||||
});
|
||||
// } catch (e) {
|
||||
// reject(new Error("加载异常"));
|
||||
// }
|
||||
});
|
||||
}
|
||||
}
|
||||
// 附着点选中线宽包围
|
||||
setBoxHelper(obj) {
|
||||
// 判断场景是否纯在该3d对象
|
||||
if (this.scene.getObjectByName("boxHelper")) {
|
||||
const preModel = this.scene.getObjectByName("boxHelper");
|
||||
this.scene.remove(preModel);
|
||||
}
|
||||
const boxHelper = new this.THREE.BoxHelper(obj, 0xffff00);
|
||||
boxHelper.name = "boxHelper";
|
||||
this.scene.add(boxHelper);
|
||||
}
|
||||
/**
|
||||
*@param {Class} DRACOLoader 解压器
|
||||
* @param {String} dracoPath 解压器路径
|
||||
*/
|
||||
addDARCOLoder(DRACOLoader, dracoPath) {
|
||||
this.DRAC = new DRACOLoader();
|
||||
this.DRAC.setDecoderPath(dracoPath);
|
||||
//给模型加载器添解压器
|
||||
this.gltfloader.setDRACOLoader(this.DRAC);
|
||||
}
|
||||
|
||||
// 监听tagHTML标签内事件
|
||||
HTMLTagEventListener() {
|
||||
// this.addBtn = document.querySelector("#add-model");
|
||||
// this.removeBtn = document.querySelector("#remove-model");
|
||||
// //开启监听
|
||||
// this.addBtn.addEventListener("click", addDev.bind(this));
|
||||
// this.removeBtn.addEventListener("click", removeDev.bind(this));
|
||||
// //监听选择设备
|
||||
// this.devList = document.querySelector(".divice-list ul");
|
||||
// this.devList.addEventListener("click", checkDevModel.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Meshes} meshes gltf加载过后的模型数组
|
||||
*/
|
||||
initDevicesModel(meshes) {
|
||||
this.deviceList = [];
|
||||
meshes.forEach((mesh) => {
|
||||
this.deviceList.push(mesh);
|
||||
});
|
||||
console.log(this.deviceList);
|
||||
}
|
||||
/**
|
||||
* @param {String} devId 添加的设备ID
|
||||
*/
|
||||
addDevice(devId) {
|
||||
addDev.bind(this, devId);
|
||||
}
|
||||
/**
|
||||
* @param {String} devId 删除的设备ID
|
||||
*/
|
||||
removeDevice(devId) {
|
||||
removeDev.bind(this, devId);
|
||||
}
|
||||
//获取右边面板信息
|
||||
bindRightPlaneInfo() {
|
||||
// this.chanelLengthInput = document.querySelector("#chanel-length-input");
|
||||
// this.aspectValue = document.querySelector("#aspect-length-value");
|
||||
// this.chanelLengthInput.addEventListener("input", (e) => {
|
||||
// // console.log(e.target.value);
|
||||
// });
|
||||
}
|
||||
/**
|
||||
* @param {OBJLoader} objloader 模型加载器
|
||||
*/
|
||||
addOBJLoader(objloader) {
|
||||
this.OBJLoader = new objloader();
|
||||
}
|
||||
// 先把模型加载完成
|
||||
loadeOBJModel() {
|
||||
this.devMap = new Map();
|
||||
this.OBJLoader.load(
|
||||
"../../../../../public/devicesModel/Camera.obj",
|
||||
callBack.bind(this, "dev_1")
|
||||
);
|
||||
this.OBJLoader.load(
|
||||
"../../../../../public/devicesModel/Camera.obj",
|
||||
callBack.bind(this, "dev_2")
|
||||
);
|
||||
this.OBJLoader.load(
|
||||
"../../../../../public/devicesModel/Camera.obj",
|
||||
callBack.bind(this, "dev_3")
|
||||
);
|
||||
this.OBJLoader.load(
|
||||
"../../../../../public/devicesModel/Camera.obj",
|
||||
callBack.bind(this, "camera")
|
||||
);
|
||||
function callBack(param, model) {
|
||||
switch (param) {
|
||||
case "dev_1":
|
||||
model.scale.set(0.2, 0.2, 0.2);
|
||||
break;
|
||||
case "dev_2":
|
||||
model.scale.set(0.2, 0.2, 0.2);
|
||||
break;
|
||||
case "dev_3":
|
||||
model.scale.set(0.1, 0.1, 0.1);
|
||||
break;
|
||||
case "camera":
|
||||
model.scale.set(0.7, 0.7, 0.7);
|
||||
|
||||
model.name = "camera";
|
||||
break;
|
||||
}
|
||||
this.devMap.set(param, model);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user