123
parent
6afd75b70b
commit
2b7ca3ce54
File diff suppressed because one or more lines are too long
|
|
@ -34,10 +34,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
|
||||
|
|
@ -59,6 +61,7 @@ Bus.on('clickBuild', (isParent) => {
|
|||
|
||||
// 拉近场景
|
||||
// nearCamera(Floor);
|
||||
|
||||
boxLight(Floor);
|
||||
return;
|
||||
}
|
||||
|
|
@ -105,7 +108,7 @@ 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;
|
||||
|
|
@ -189,19 +192,36 @@ const onMouseMove = (event) => {
|
|||
}
|
||||
// 鼠标点击效果
|
||||
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;
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const intersects = raycaster.intersectObjects(scene.children, true);
|
||||
|
||||
var vector = new THREE.Vector3();//三维坐标对象
|
||||
vector.set(
|
||||
(event.clientX / window.innerWidth) * 2 - 1,
|
||||
- (event.clientY / window.innerHeight) * 2 + 1,
|
||||
0.5);
|
||||
vector.unproject(camera);
|
||||
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
|
||||
var intersects = raycaster.intersectObjects(scene.children);
|
||||
if (intersects.length > 0) {
|
||||
const clickedObject = intersects[0].object;
|
||||
var selectedObject = isSelent(clickedObject);
|
||||
console.log(123, selectedObject);
|
||||
boxLight(selectedObject);
|
||||
// nearCamera(selectedObject)
|
||||
var selected = intersects[0];//取第一个物体
|
||||
console.log("x坐标:" + selected.point.x);
|
||||
console.log("y坐标:" + selected.point.y);
|
||||
console.log("z坐标:" + selected.point.z);
|
||||
}
|
||||
|
||||
|
||||
// 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);
|
||||
// console.log(123, event);
|
||||
|
||||
// if (intersects.length > 0) {
|
||||
// const clickedObject = intersects[0].object;
|
||||
// console.log('这是我选中的模型', clickedObject);
|
||||
// var selectedObject = isSelent(clickedObject);
|
||||
// // 高亮所在区域
|
||||
// boxLight(selectedObject);
|
||||
// }
|
||||
}
|
||||
|
||||
const boxLight = (selectedObject) => {
|
||||
|
|
@ -246,47 +266,75 @@ const centerSelectedGroup = (obj) => {
|
|||
|
||||
// 漫游
|
||||
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;
|
||||
function 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平面上做圆周运动
|
||||
|
|
@ -295,14 +343,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([]);
|
||||
|
|
@ -404,30 +459,6 @@ const removeLabel = () => {
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue