Merge branch 'main' of https://git.shikicc.com/wangqiujuan0808/bw
commit
685d956d6c
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -37,10 +37,12 @@ onMounted(() => {
|
|||
init();
|
||||
loadSence();
|
||||
renderScene();
|
||||
document.addEventListener("click", onMouseDown);
|
||||
//点击模型
|
||||
document.addEventListener('click', onMouseDown);
|
||||
// document.addEventListener("mousemove", onMouseMove);
|
||||
});
|
||||
let scene, renderer, camera, controls, pointsArr = true;
|
||||
let biggerSphereMesh = null;
|
||||
let i = 1;
|
||||
let mouse = new THREE.Vector2();
|
||||
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
|
||||
|
|
@ -63,6 +65,7 @@ Bus.on('clickBuild', (isParent) => {
|
|||
|
||||
// 拉近场景
|
||||
// nearCamera(Floor);
|
||||
|
||||
boxLight(Floor);
|
||||
return;
|
||||
}
|
||||
|
|
@ -97,9 +100,7 @@ const init = () => {
|
|||
scene.background = new THREE.Color(bimStore().activateMenu.background);
|
||||
// 相机
|
||||
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
// camera.position.z = 5;
|
||||
camera.position.set(-92.650, 67.456, 38.088);
|
||||
// camera.position.set(-92.936, 180.990, -28.179);
|
||||
//渲染器
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
|
|
@ -116,11 +117,9 @@ const loadSence = () => {
|
|||
const dracoLoader = new DRACOLoader();
|
||||
dracoLoader.setDecoderPath('/draco/gltf/')//设置解压库文件路径
|
||||
gltfLoader.setDRACOLoader(dracoLoader)
|
||||
gltfLoader.load('/jzc/scene2.gltf', (gltf) => {
|
||||
gltfLoader.load('/jzc/scene3.gltf', (gltf) => {
|
||||
var model = gltf.scene;
|
||||
// console.log(roamdObjects);
|
||||
roamdObjects = model.children[0].children;
|
||||
// console.log(model.children[0].children);
|
||||
scene.add(model);
|
||||
});
|
||||
};
|
||||
|
|
@ -130,12 +129,6 @@ const renderScene = () => {
|
|||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
labelRenderer.render(scene, camera);
|
||||
// if (roamdObjects.length > 0) {
|
||||
// const currentModel = roamdObjects.shift();
|
||||
// setTimeout(() => {
|
||||
// roam(currentModel);
|
||||
// }, 3000);
|
||||
// }
|
||||
};
|
||||
|
||||
const onWindowResize = () => {
|
||||
|
|
@ -205,13 +198,14 @@ const onMouseDown = (event) => {
|
|||
mouse.y = -((event.clientY - marginTop) / window.innerHeight) * 2 + 1;
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const intersects = raycaster.intersectObjects(scene.children, true);
|
||||
console.log(123, event);
|
||||
|
||||
if (intersects.length > 0) {
|
||||
const clickedObject = intersects[0].object;
|
||||
console.log('这是我选中的模型', clickedObject);
|
||||
var selectedObject = isSelent(clickedObject);
|
||||
console.log(123, selectedObject);
|
||||
// 高亮所在区域
|
||||
boxLight(selectedObject);
|
||||
// nearCamera(selectedObject)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -234,70 +228,79 @@ const centerSelectedGroup = (obj) => {
|
|||
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 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),
|
||||
new THREE.Vector3(130.076658411178222, 58.489999368786826, -32.514521795452985), // 起始坐标
|
||||
new THREE.Vector3(128.938067229663826, 55.0220540878815, 30.184599697589874) //中间节点
|
||||
]);
|
||||
pointsArr = path.getSpacedPoints(500);
|
||||
// console.log(pointsArr);
|
||||
i = 100;
|
||||
|
||||
|
||||
d(path)
|
||||
pointsArr = path.getSpacedPoints(50);
|
||||
|
||||
|
||||
i = 0;
|
||||
console.log(pointsArr[i]);
|
||||
// 设置相机起点， 相机位置：曲线上当前点pointsArr[i]
|
||||
camera.position.copy(pointsArr[i]);
|
||||
// 相机观察目标：当前点的下一个点pointsArr[i + 1]
|
||||
camera.lookAt(pointsArr[i + 1]);
|
||||
renders();
|
||||
// controls.target.copy(pointsArr[i+1])
|
||||
|
||||
setTimeout(() => {
|
||||
renders();
|
||||
}, 1000);
|
||||
}
|
||||
let num = 0;
|
||||
const d = (cameraCurve) => {
|
||||
let sphereCurve = null;
|
||||
//参考路径上取100个点，每个点上添加蓝色小球
|
||||
//做一个小0.6倍的路径添加到场景，作相机运动路径参考
|
||||
sphereCurve = cameraCurve.clone()
|
||||
sphereCurve.points.forEach(point => {
|
||||
point.x *= 0.6
|
||||
point.y *= 0.2
|
||||
point.z *= 0.6
|
||||
return point
|
||||
})
|
||||
|
||||
//参考路径上取100个点，每个点上添加蓝色小球
|
||||
const pathPoints = sphereCurve.getPoints(100)
|
||||
pathPoints.forEach(point => {
|
||||
const sphere = new THREE.SphereGeometry(0.2)
|
||||
const sphereMaterial = new THREE.MeshBasicMaterial({
|
||||
color: 0x0000ff
|
||||
})
|
||||
const sphereMesh = new THREE.Mesh(sphere, sphereMaterial)
|
||||
sphereMesh.position.set(point.x, point.y, point.z)
|
||||
scene.add(sphereMesh)
|
||||
})
|
||||
|
||||
//绘制一条红色的路径参考线
|
||||
const geometry = new THREE.BufferGeometry().setFromPoints(pathPoints)
|
||||
const material = new THREE.LineBasicMaterial({
|
||||
color: 0xff0000
|
||||
})
|
||||
const curveObject = new THREE.Line(geometry, material)
|
||||
scene.add(curveObject)
|
||||
|
||||
//做一个较大的绿色小球沿相机相反反向移动
|
||||
const biggerSphere = new THREE.SphereGeometry(2)
|
||||
const sphereMaterial1 = new THREE.MeshBasicMaterial({ color: 0x0ff00 })
|
||||
biggerSphereMesh = new THREE.Mesh(biggerSphere, sphereMaterial1)
|
||||
biggerSphereMesh.position.set(
|
||||
pathPoints[0].x,
|
||||
pathPoints[0].y,
|
||||
pathPoints[0].z
|
||||
)
|
||||
scene.add(biggerSphereMesh)
|
||||
|
||||
|
||||
}
|
||||
let num = 1;
|
||||
const renders = () => {
|
||||
/* angle += 0.01;
|
||||
// 相机y坐标不变，在XOZ平面上做圆周运动
|
||||
|
|
@ -306,14 +309,21 @@ const renders = () => {
|
|||
if (num < pointsArr.length - 1) {
|
||||
// 相机位置设置在当前点位置
|
||||
camera.position.copy(pointsArr[num]);
|
||||
// camera.position.set(pointsArr[num]);
|
||||
// 曲线上当前点pointsArr[num]和下一个点pointsArr[num+1]近似模拟当前点曲线切线
|
||||
// 设置相机观察点为当前点的下一个点，相机视线和当前点曲线切线重合
|
||||
camera.lookAt(pointsArr[num + 1]);
|
||||
biggerSphereMesh.position.copy(pointsArr[num]
|
||||
)
|
||||
|
||||
// controls.target.copy(pointsArr[num+1])
|
||||
num += 1; //调节速度
|
||||
requestAnimationFrame(renders);
|
||||
controls.update();
|
||||
} else {
|
||||
num = 0
|
||||
}
|
||||
requestAnimationFrame(renders);
|
||||
|
||||
};
|
||||
|
||||
let roamdObjects = ref([]);
|
||||
|
|
@ -428,30 +438,6 @@ const setBottom = () => {
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@ const getCharts = () => {
|
|||
},
|
||||
grid: {
|
||||
top: '24%',
|
||||
left: '5%',
|
||||
right: '8%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
// bottom: '2%',
|
||||
height: '80%',
|
||||
containLabel: true
|
||||
|
|
|
|||
Loading…
Reference in New Issue