function clickDom(dom) { if (clickFalge) { // 点击 div 后执行的函数 // 获取被点击的 div DOM 元素的 ID clickFalge = false; const clickedId = JSON.parse(dom); const clickedIndex = idArray.indexOf(clickedId.equipmentId); console.log(clickedIndex); if (clickedIndex >= 0) { const divObject = divObjects[clickedIndex]; const x = divObject.position.x; const z = divObject.position.z; console.log(x, z); divObject.position.set(0, 0, radius); divObject.element.style.zIndex = 1; for (let i = 0; i < divObjects.length; i++) { if (clickedIndex !== i) { const divObject1 = divObjects[i]; const posX = radius * Math.cos(angle * i); const posY = 0; const posZ = radius * Math.sin(angle * i); divObject1.position.set(posX, posY, posZ); divObject1.element.style.zIndex = 0; } } } // 将被点击的 div 定位到最前方放置正中间 // for (let i = 0; i < divObjects.length; i++) { // const divObject = divObjects[i]; // if (i === clickedIndex) { // // 被点击的 div 保持在圆心位置 // console.log(divObject.position) // } else if (clickedIndex >= 0) { // // 计算其他 div 的位置 // let angleDiff = i - clickedIndex; // if (angleDiff < 0) { // angleDiff += divObjects.length; // } // angleDiff *= angle; // const posX = radius * Math.cos(angleDiff); // const posY = 0; // const posZ = radius * Math.sin(angleDiff); // divObject.position.set(posX, posY, posZ); // divObject.element.style.zIndex = 0; // } // } renderer.render(scene, camera); // 渲染场景和相机 // 暂停动画 cancelAnimationFrame(animationFrameId); var timer = setTimeout(() => { requestAnimationFrame(render); clearTimeout(timer); clickFalge = true; }, 3000) } } 这段代码执行后点击div,被点击的div定位到指定位置,其他div分布错乱
时间: 2023-11-28 19:49:36 浏览: 78
这段代码中的问题可能出在计算其他 div 位置的部分。你可以尝试使用下面的代码替换这部分代码:
```javascript
for (let i = 0; i < divObjects.length; i++) {
const divObject = divObjects[i];
if (i === clickedIndex) {
// 被点击的 div 保持在圆心位置
divObject.position.set(0, 0, radius);
divObject.element.style.zIndex = 1;
} else {
// 计算其他 div 的位置
let angleDiff = i - clickedIndex;
if (angleDiff < 0) {
angleDiff += divObjects.length;
}
angleDiff *= angle;
const posX = radius * Math.cos(angleDiff);
const posY = 0;
const posZ = radius * Math.sin(angleDiff);
divObject.position.set(posX, posY, posZ);
divObject.element.style.zIndex = 0;
}
}
```
这段代码会先将被点击的 div 定位到圆心位置,再计算其他 div 的位置。如果计算的位置有问题,你可以在控制台输出 `posX`,`posY` 和 `posZ` 的值,查看是否正确。
阅读全文