123
parent
a78535f6a7
commit
6afd75b70b
|
|
@ -9,7 +9,7 @@
|
|||
<div class="button" @click="setLabel">
|
||||
{{ isAddLabel ? '添加标签' : '移除标签' }}
|
||||
</div>
|
||||
<div class="button" @click="roam({x: -1.6464157104492188, y: 2.9064807891845703, z: -11.564851760864258})">
|
||||
<div class="button" @click="roam()">
|
||||
漫游
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
import { onMounted, ref } from 'vue';
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
import { DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader.js";
|
||||
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
|
||||
import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
|
||||
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
||||
import TWEEN from "@tweenjs/tween.js";
|
||||
|
|
@ -37,7 +37,8 @@ onMounted(() => {
|
|||
document.addEventListener("click", onMouseDown);
|
||||
// document.addEventListener("mousemove", onMouseMove);
|
||||
});
|
||||
let scene, renderer, camera, controls = true;
|
||||
let scene, renderer, camera, controls, pointsArr = true;
|
||||
let i = 1;
|
||||
let mouse = new THREE.Vector2();
|
||||
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
|
||||
const data = reactive({
|
||||
|
|
@ -51,7 +52,7 @@ Bus.on('clickBuild', (isParent) => {
|
|||
if (!isParent) {// 点击子级
|
||||
var clickName = bimStore().activateTree.clickName;
|
||||
var Floor = scene.getObjectByName(clickName);
|
||||
console.log(123, Floor.position);
|
||||
|
||||
//投放间坐标 x: 42.6454163 y: 5.36651754 z: -95.03277
|
||||
//糖化间坐标 x: 27.127655 y: 8.55 z: -6.132766
|
||||
//原料处理间坐标 x: 27.6954441 y: 10.7530384 z: -37.73485
|
||||
|
|
@ -91,7 +92,7 @@ const init = () => {
|
|||
//渲染器
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.outputEncoding = THREE.sRGBEncoding;
|
||||
document.getElementById('gltf').appendChild(renderer.domElement);
|
||||
|
||||
|
|
@ -161,7 +162,7 @@ const isSelent = (obj) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let selectedObjects = ref([]);
|
||||
let selectBoxByClick, selectBoxByMouseon;
|
||||
var marginLeft = 0;
|
||||
|
|
@ -193,28 +194,26 @@ const onMouseDown = (event) => {
|
|||
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;
|
||||
// 起点 {x: -1.6464157104492188, y: 2.9064807891845703, z: -11.564851760864258}
|
||||
// 终点 {x: -1.7519302368164062, y: 6.542750358581543, z: 11.509664535522461}
|
||||
var selectedObject = isSelent(clickedObject);
|
||||
console.log(selectedObject);
|
||||
// boxLight(selectedObject);
|
||||
nearCamera(selectedObject)
|
||||
console.log(123, selectedObject);
|
||||
boxLight(selectedObject);
|
||||
// nearCamera(selectedObject)
|
||||
}
|
||||
}
|
||||
|
||||
const boxLight = (selectedObject) => {
|
||||
if (selectedObject) {
|
||||
selectedObjects[0] = selectedObject;
|
||||
if (selectBoxByClick) {
|
||||
scene.remove(selectBoxByClick);
|
||||
}
|
||||
selectBoxByClick = new THREE.BoxHelper(selectedObjects[0], '#00ffff');
|
||||
scene.add(selectBoxByClick);
|
||||
centerSelectedGroup(selectedObject);
|
||||
selectedObjects[0] = selectedObject;
|
||||
if (selectBoxByClick) {
|
||||
scene.remove(selectBoxByClick);
|
||||
}
|
||||
selectBoxByClick = new THREE.BoxHelper(selectedObjects[0], '#00ffff');
|
||||
scene.add(selectBoxByClick);
|
||||
centerSelectedGroup(selectedObject);
|
||||
}
|
||||
}
|
||||
// 居中显示选中
|
||||
const centerSelectedGroup = (obj) => {
|
||||
|
|
@ -244,24 +243,68 @@ const centerSelectedGroup = (obj) => {
|
|||
// tween1.start()
|
||||
|
||||
}
|
||||
|
||||
// 漫游
|
||||
const i = 0;
|
||||
const roam = (obj) => {
|
||||
gsap.to(camera.position, {
|
||||
x: obj.x,
|
||||
y: obj.y,
|
||||
z: obj.z,
|
||||
duration: 2,
|
||||
ease: "power1.inOut",
|
||||
onComplete: () => {
|
||||
// if (i < 1) {
|
||||
// // 获取第二个点位坐标
|
||||
// roam( {x: -1.7519302368164062, y: 6.542750358581543, z: 11.509664535522461})
|
||||
// }
|
||||
// i++;
|
||||
},
|
||||
});
|
||||
const roam = () => {
|
||||
//漫游
|
||||
controls.enableDamping = false; // 启用惯性
|
||||
controls.dampingFactor = 0.05; // 惯性阻尼，应该介于 0 到 1 之间。 default = 0.25
|
||||
controls.screenSpacePanning = false; // 默认的屏幕空间行为。当它控制在真正的三维空间中时使用屏幕空间拖动。default = false
|
||||
controls.minDistance = 100;
|
||||
controls.maxDistance = 200;
|
||||
controls.maxPolarAngle = Math.PI / 2; // 限制atorbit控制操作（禁止摄像机下凹）
|
||||
// 启用飞行模式，默认轨道
|
||||
controls.enablePan = false; // 禁用拖拽pan
|
||||
controls.enableKeys = true;
|
||||
controls.keyPanSpeed = 30; // 默认值 7，每按一次 WSAD 键的速度像素量
|
||||
controls.enableZoom = false; // 禁用滚轮缩放
|
||||
controls.keyRotateSpeed = 90; // 默认值：30，每按一次Q和E的旋转度数
|
||||
controls.spaceingFactor = 0.4; //默认值：0.4，每按一次上下左右的速度像素量
|
||||
|
||||
//漫游坐标
|
||||
const path = new THREE.CatmullRomCurve3([
|
||||
new THREE.Vector3(-50, 20, 90), // 起始坐标
|
||||
new THREE.Vector3(-10, 40, 40), //中间节点
|
||||
new THREE.Vector3(0, 0, 0), // 中间节点
|
||||
new THREE.Vector3(60, -60, 0), //中间节点
|
||||
new THREE.Vector3(90, -40, 60), //中间节点
|
||||
new THREE.Vector3(120, 30, 30), //终点
|
||||
// //起点
|
||||
// new THREE.Vector3(-10, 0, 10),
|
||||
// //中间节点
|
||||
// new THREE.Vector3(-5,10,-10),
|
||||
// new THREE.Vector3(2, 5, -5),
|
||||
// //终点
|
||||
// new THREE.Vector3(10, 0, 10),
|
||||
]);
|
||||
pointsArr = path.getSpacedPoints(500);
|
||||
// console.log(pointsArr);
|
||||
i = 100;
|
||||
// 设置相机起点， 相机位置：曲线上当前点pointsArr[i]
|
||||
camera.position.copy(pointsArr[i]);
|
||||
// 相机观察目标：当前点的下一个点pointsArr[i + 1]
|
||||
camera.lookAt(pointsArr[i + 1]);
|
||||
renders();
|
||||
}
|
||||
let num = 0;
|
||||
const renders = () => {
|
||||
/* angle += 0.01;
|
||||
// 相机y坐标不变，在XOZ平面上做圆周运动
|
||||
camera.position.x = R * Math.sin(angle);
|
||||
camera.lookAt(0, 0, 0); */
|
||||
if (num < pointsArr.length - 1) {
|
||||
// 相机位置设置在当前点位置
|
||||
camera.position.copy(pointsArr[num]);
|
||||
// 曲线上当前点pointsArr[num]和下一个点pointsArr[num+1]近似模拟当前点曲线切线
|
||||
// 设置相机观察点为当前点的下一个点，相机视线和当前点曲线切线重合
|
||||
camera.lookAt(pointsArr[num + 1]);
|
||||
num += 1; //调节速度
|
||||
} else {
|
||||
num = 0
|
||||
}
|
||||
requestAnimationFrame(renders);
|
||||
};
|
||||
|
||||
let roamdObjects = ref([]);
|
||||
// 返回初始值
|
||||
const toHomeView = () => {
|
||||
|
|
@ -270,21 +313,21 @@ const toHomeView = () => {
|
|||
// 拉近距离
|
||||
const nearCamera = (floor) => {
|
||||
controls.reset();
|
||||
|
||||
// gsap.to(camera.position, {
|
||||
// x: floor.position.x,
|
||||
// y: floor.position.y,
|
||||
// z: floor.position.z,
|
||||
// duration: 2,
|
||||
// ease: "power1.inOut",
|
||||
// onComplete: () => {
|
||||
// },
|
||||
// });
|
||||
|
||||
|
||||
gsap.to(camera.position, {
|
||||
x: floor.position.x,
|
||||
y: floor.position.y,
|
||||
z: floor.position.z,
|
||||
duration: 2,
|
||||
ease: "power1.inOut",
|
||||
onComplete: () => {
|
||||
},
|
||||
});
|
||||
|
||||
}
|
||||
//标签
|
||||
const setLabel = () => {
|
||||
if(isAddLabel.value) {
|
||||
if (isAddLabel.value) {
|
||||
addLabel();
|
||||
} else {
|
||||
removeLabel();
|
||||
|
|
@ -326,6 +369,7 @@ const removeLabel = () => {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btnGroup {
|
||||
width: 180px;
|
||||
position: absolute;
|
||||
|
|
@ -348,6 +392,7 @@ const removeLabel = () => {
|
|||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.laber_name {
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div class="box4"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as THREE from 'three';
|
||||
import Stats from 'three/examples/jsm/libs/stats.module';
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
scene:null,
|
||||
camera:null,
|
||||
renderer:null,
|
||||
stats:null,
|
||||
pointLight:null,
|
||||
pos:0,
|
||||
curve:null,
|
||||
sphereLightMesh:null,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
init(){
|
||||
this.scene=new THREE.Scene();//创建场景
|
||||
this.camera=new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,1000);//创建相机
|
||||
this.camera.position.set(0,70,70);//设置相机位置
|
||||
this.camera.lookAt(new THREE.Vector3(0,0,0));//设置相机关注点
|
||||
|
||||
this.scene.add(new THREE.AxesHelper(20));//添加辅助函数
|
||||
this.pointLight=new THREE.PointLight(0xffffff);
|
||||
this.pointLight.position.set(0,5,5);
|
||||
this.pointLight.name="pointLight";//给灯光命名，用于后期获取灯光对象
|
||||
this.scene.add(this.pointLight);
|
||||
//创建灯
|
||||
let sphereLight=new THREE.SphereGeometry(0.5,50,50);
|
||||
let spLightMaterial=new THREE.MeshLambertMaterial({
|
||||
color:0xffffff,
|
||||
emissive:0xffffff
|
||||
})
|
||||
this.sphereLightMesh=new THREE.Mesh(sphereLight,spLightMaterial);
|
||||
this.sphereLightMesh.position.copy(this.pointLight.position);
|
||||
this.scene.add(this.sphereLightMesh);
|
||||
//创建物体
|
||||
let spheregeo=new THREE.SphereGeometry(5,100,100);
|
||||
let sphereMaterial=new THREE.MeshLambertMaterial({
|
||||
color:new THREE.Color().setHSL(Math.random(),0.5,0.5),
|
||||
})
|
||||
this.scene.add(new THREE.Mesh(spheregeo,sphereMaterial));
|
||||
this.curve = new THREE.CatmullRomCurve3( [
|
||||
//起点
|
||||
new THREE.Vector3(-10, 0, 10),
|
||||
//中间节点
|
||||
new THREE.Vector3(-5,10,-10),
|
||||
new THREE.Vector3(2, 5, -5),
|
||||
//终点
|
||||
new THREE.Vector3(10, 0, 10),
|
||||
],
|
||||
true,
|
||||
);
|
||||
console.log(this.curve.getPoint( 0.1 ));
|
||||
// 绘制曲线
|
||||
let geometry = new THREE.Geometry();
|
||||
// 初始化曲线的顶点(放样点，数值越大弯曲更光滑)
|
||||
geometry.vertices = this.curve.getSpacedPoints(100);
|
||||
let material = new THREE.LineBasicMaterial({ color:new THREE.Color().setHSL(Math.random(),0.5,0.5) });
|
||||
let curveObject = new THREE.Line(geometry, material);
|
||||
this.scene.add(curveObject);
|
||||
|
||||
|
||||
this.renderer=new THREE.WebGLRenderer({antialias:true});//创建渲染器,并打开反锯齿
|
||||
this.renderer.setSize(window.innerWidth,window.innerHeight);//设置渲染的尺寸
|
||||
this.renderer.setClearColor(0x000000);//设置颜色
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
this.stats=new Stats();
|
||||
let control=new OrbitControls(this.camera,this.renderer.domElement);
|
||||
|
||||
//挂载
|
||||
document.getElementsByClassName("box4")[0].appendChild(this.stats.domElement);
|
||||
document.getElementsByClassName("box4")[0].appendChild(this.renderer.domElement);
|
||||
window.addEventListener("resize",this.onSize,false);//添加监听事件
|
||||
},
|
||||
run(){
|
||||
requestAnimationFrame(this.run);
|
||||
|
||||
let pointLight=this.scene.getObjectByName("pointLight");
|
||||
if(this.pos<1){
|
||||
pointLight.position=this.curve.getPointAt(this.pos);//光移动
|
||||
this.sphereLightMesh.position.copy(pointLight.position);//物体跟着光移动
|
||||
this.pos+=0.001;
|
||||
}else{
|
||||
this.pos=0;
|
||||
}
|
||||
|
||||
this.renderer.render(this.scene,this.camera);
|
||||
this.stats.update();
|
||||
},
|
||||
onSize(){
|
||||
this.camera.aspect=window.innerWidth/window.innerHeight;
|
||||
this.renderer.setSize(window.innerWidth,window.innerHeight);
|
||||
this.camera.updateProjectionMatrix();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this.run();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
|
|
@ -49,6 +49,7 @@ import ApplicationTree from './components/ApplicationTree.vue';
|
|||
import EquipmentInfo from './components/EquipmentInfo.vue';
|
||||
import RealData from './components/RealData.vue';
|
||||
import ThreeView from './components/ThreeView2.vue';
|
||||
// import ThreeView from './components/qqq.vue';
|
||||
import DeviceInfoDialog from './components/DeviceInfoDialog.vue';
|
||||
import RealInfoDialog from './components/RealInfoDialog.vue';
|
||||
import DeviceDetial from './components/DeviceDetial.vue';
|
||||
|
|
|
|||
Loading…
Reference in New Issue