漫游失败
parent
7fc7eab702
commit
773425455f
|
|
@ -1,14 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="gltf"></div>
|
||||
<div id="dom"></div>
|
||||
<div class="btnGroup">
|
||||
<div class="button" @click="toHomeView">
|
||||
主视角
|
||||
</div>
|
||||
<div class="button" @click="setLabel">
|
||||
{{ isAddLabel ? '添加标签' : '移除标签' }}
|
||||
</div>
|
||||
<div class="button" @click="walk">
|
||||
漫游
|
||||
</div>
|
||||
|
|
@ -21,13 +14,8 @@ import * as THREE from 'three';
|
|||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
|
||||
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
||||
import {
|
||||
CSS2DObject,
|
||||
CSS2DRenderer,
|
||||
} from "three/examples/jsm/renderers/CSS2DRenderer";
|
||||
import Bus from '@/utils/bus.js'
|
||||
import bimStore from '@/store/modules/bim';
|
||||
import gsap from "gsap";
|
||||
import TWEEN from "@tweenjs/tween.js";
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
loadSence();
|
||||
|
|
@ -35,47 +23,14 @@ onMounted(() => {
|
|||
document.addEventListener("click", onMouseDown);
|
||||
// document.addEventListener("mousemove", onMouseMove);
|
||||
});
|
||||
let scene, renderer, camera, orbit, isAddLabel = true;
|
||||
let mouse = new THREE.Vector2();
|
||||
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
|
||||
|
||||
// 建筑树点击
|
||||
Bus.on('clickBuild', (isParent) => {
|
||||
// Todo
|
||||
console.log('clickBuild', isParent);
|
||||
if (!isParent) {// 点击子级
|
||||
var clickName = bimStore().activateTree.clickName;
|
||||
var Floor = scene.getObjectByName(clickName);
|
||||
// 拉近场景
|
||||
nearCamera(Floor);
|
||||
return;
|
||||
}
|
||||
})
|
||||
// 设备树点击
|
||||
Bus.on('clickDevice', (isParent) => {
|
||||
if (!isParent) {// 点击子级
|
||||
var clickName = bimStore().activateDevice.clickName;
|
||||
var Floor = scene.getObjectByName(clickName);
|
||||
// 拉近距离
|
||||
nearCamera(Floor);
|
||||
return;
|
||||
}
|
||||
})
|
||||
|
||||
// 系统树点击
|
||||
Bus.on('clickApplication', e => {
|
||||
// Todo
|
||||
console.log('clickApplication');
|
||||
})
|
||||
|
||||
let scene, renderer, camera, controls;
|
||||
const init = () => {
|
||||
// 场景
|
||||
scene = new THREE.Scene();
|
||||
// 相机
|
||||
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
// camera.position.z = 5;
|
||||
camera.position.set(-66.650, 0, 80.088);
|
||||
|
||||
camera.position.set(-46.650, 67.456, 38.088);
|
||||
//渲染器
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
|
|
@ -83,8 +38,7 @@ const init = () => {
|
|||
renderer.outputEncoding = THREE.sRGBEncoding;
|
||||
document.getElementById('gltf').appendChild(renderer.domElement);
|
||||
|
||||
orbit = new OrbitControls(camera, renderer.domElement);
|
||||
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
const pmremGenerator = new THREE.PMREMGenerator(renderer);
|
||||
scene.environment = pmremGenerator.fromScene(new RoomEnvironment()).texture;
|
||||
}
|
||||
|
|
@ -92,12 +46,23 @@ const loadSence = () => {
|
|||
const gltfLoader = new GLTFLoader();
|
||||
gltfLoader.load('/jzc/scene.gltf', (gltf) => {
|
||||
var model = gltf.scene;
|
||||
// console.log(roamdObjects);
|
||||
roamdObjects = model.children[0].children;
|
||||
// console.log(model.children[0].children);
|
||||
scene.add(model);
|
||||
});
|
||||
};
|
||||
const renderScene = () => {
|
||||
requestAnimationFrame(renderScene);
|
||||
TWEEN.update();
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
// if (roamdObjects.length > 0) {
|
||||
// const currentModel = roamdObjects.shift();
|
||||
// setTimeout(() => {
|
||||
// roam(currentModel);
|
||||
// }, 3000);
|
||||
// }
|
||||
};
|
||||
|
||||
// 能选中的组
|
||||
|
|
@ -128,15 +93,36 @@ const isSelent = (obj) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
// 鼠标点击效果
|
||||
let mouse = new THREE.Vector2();
|
||||
let selectedObjects = ref([]);
|
||||
let selectBoxByClick, selectBoxByMouseon;
|
||||
var marginLeft = 0;
|
||||
var marginTop = 70;
|
||||
// 鼠标移动效果
|
||||
const onMouseMove = (event) => {
|
||||
var raycaster = new THREE.Raycaster()
|
||||
mouse.x = ((event.clientX - marginLeft) / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -((event.clientY - marginTop) / window.innerHeight) * 2 + 1;
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const intersects = raycaster.intersectObjects(scene.children, true);
|
||||
if (intersects.length > 0) {
|
||||
const clickedObject = intersects[0].object;
|
||||
var selectedObject = isSelent(clickedObject);
|
||||
if (selectedObject) {
|
||||
selectedObjects[0] = selectedObject;
|
||||
if (selectBoxByMouseon) {
|
||||
scene.remove(selectBoxByMouseon);
|
||||
}
|
||||
selectBoxByMouseon = new THREE.BoxHelper(selectedObjects[0], '#ffffff');
|
||||
scene.add(selectBoxByMouseon);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 鼠标点击效果
|
||||
const onMouseDown = (event) => {
|
||||
var raycaster = new THREE.Raycaster()
|
||||
mouse.x = ((event.clientX-marginLeft) / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -((event.clientY-marginTop) / window.innerHeight) * 2 + 1;
|
||||
mouse.x = ((event.clientX - marginLeft) / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -((event.clientY - marginTop) / window.innerHeight) * 2 + 1;
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const intersects = raycaster.intersectObjects(scene.children, true);
|
||||
if (intersects.length > 0) {
|
||||
|
|
@ -150,68 +136,63 @@ const onMouseDown = (event) => {
|
|||
}
|
||||
selectBoxByClick = new THREE.BoxHelper(selectedObjects[0], '#00ffff');
|
||||
scene.add(selectBoxByClick);
|
||||
centerSelectedGroup(selectedObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 返回初始值
|
||||
const toHomeView = () => {
|
||||
orbit.reset();
|
||||
}
|
||||
// 拉近距离
|
||||
const nearCamera = (floor) => {
|
||||
orbit.reset();
|
||||
gsap.to(camera.position, {
|
||||
x: floor.position.x,
|
||||
y: floor.position.y,
|
||||
z: floor.position.z,
|
||||
duration: 2,
|
||||
ease: "power1.inOut",
|
||||
onComplete: () => {
|
||||
},
|
||||
// 居中显示选中
|
||||
const centerSelectedGroup = (obj) => {
|
||||
let tween = new TWEEN.Tween(controls.target).to(obj.position, 1000).easing(TWEEN.Easing.Quadratic.Out);
|
||||
controls.enabled = false;
|
||||
tween.onComplete(function () {
|
||||
controls.enabled = true;
|
||||
});
|
||||
tween.start();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// let distance = 100
|
||||
// let angel = Math.PI / 5
|
||||
|
||||
// let position = {
|
||||
// x: targetPosition.x + Math.sin(angel) * distance,
|
||||
// // y: targetPosition.y,
|
||||
// y: targetPosition.y + Math.sin(angel) * distance,
|
||||
// z: targetPosition.z + Math.sin(angel) * distance,
|
||||
// }
|
||||
|
||||
// let tween = new TWEEN.Tween(camera.position).to(position, 3000)
|
||||
// let tween1 = new TWEEN.Tween(controls.target).to(targetPosition, 1000)
|
||||
|
||||
|
||||
// // tween.start()
|
||||
// tween1.start()
|
||||
|
||||
}
|
||||
//标签
|
||||
const setLabel = () => {
|
||||
if(isAddLabel) {
|
||||
addLabel();
|
||||
} else {
|
||||
removeLabel();
|
||||
// 漫游
|
||||
const roam = (obj) => {
|
||||
// 添加选中效果
|
||||
if (selectBoxByClick) {
|
||||
scene.remove(selectBoxByClick);
|
||||
}
|
||||
isAddLabel = !isAddLabel;
|
||||
selectBoxByClick = new THREE.BoxHelper(obj, '#00ffff');
|
||||
scene.add(selectBoxByClick);
|
||||
// 移动到中心
|
||||
let tween = new TWEEN.Tween(controls.target).to(obj.position, 1000).easing(TWEEN.Easing.Quadratic.Out);
|
||||
// controls.enabled = false;
|
||||
// tween.onComplete(function () {
|
||||
// controls.enabled = true;
|
||||
// });
|
||||
tween.start();
|
||||
}
|
||||
// 添加标签
|
||||
const addLabel = () => {
|
||||
let obj = scene.getObjectByName('set2');
|
||||
console.log(123, obj);
|
||||
let text = "设备二";
|
||||
let pointLabel = createLableObj(text);
|
||||
obj.add(pointLabel);
|
||||
labelRenderer.setSize(window.innerWidth, window.innerHeight);
|
||||
labelRenderer.domElement.style.position = "absolute";
|
||||
labelRenderer.domElement.style.top = 0;
|
||||
labelRenderer.domElement.style.pointerEvents = 'none';// 必须加上
|
||||
document.body.appendChild(labelRenderer.domElement);
|
||||
|
||||
// 将呈现器的输出添加到HTML元素
|
||||
document.getElementById("dom").appendChild(renderer.domElement);
|
||||
};
|
||||
const createLableObj = (text) => {
|
||||
let laberDiv = document.createElement("div"); //创建div容器
|
||||
laberDiv.className = "laber_name";
|
||||
laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称：${text}</span><span>状态：启用</span><span>压力：50 Pa</span>`
|
||||
let pointLabel = new CSS2DObject(laberDiv);
|
||||
return pointLabel;
|
||||
};
|
||||
const removeLabel = () => {
|
||||
document.body.removeChild(labelRenderer.domElement);
|
||||
let roamdObjects = ref([]);
|
||||
const walk = () => {
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
#gltf {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
<style scoped>
|
||||
.btnGroup {
|
||||
width: 180px;
|
||||
position: absolute;
|
||||
|
|
@ -234,44 +215,4 @@ const removeLabel = () => {
|
|||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.laber_name {
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
padding: 5px 10px;
|
||||
white-space: nowrap;
|
||||
background-color: #ffffffb3;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&::before {
|
||||
// content: "";
|
||||
// display: inline-block;
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// border: 12px solid transparent;
|
||||
// border-right-color: #ffffffb3;
|
||||
// position: absolute;
|
||||
// left: -23px;
|
||||
// top: 0;
|
||||
}
|
||||
|
||||
.arrow_outer {
|
||||
// position: absolute;
|
||||
// left: -22px;
|
||||
// top: 6px;
|
||||
// margin: 0;
|
||||
// width: 12px;
|
||||
// height: 12px;
|
||||
// background-color: #eb6852;
|
||||
// border-radius: 100%;
|
||||
// border: 1px solid #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue