如何在Three.js中合并几何图形/网格？并将图标居中于2D矩形内

嘿，我来帮你把图标精准居中到你画的2D矩形里！先把你的代码补全，再一步步实现居中逻辑：

首先，先完成你那部分方形几何的代码，然后计算矩形的中心坐标，最后把图标（这里用Sprite来实现图标，因为适合2D元素）定位到中心。

完整实现代码 #

// 初始化场景、相机、渲染器（基础配置，你应该已经有了）
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-window.innerWidth/2, window.innerWidth/2, window.innerHeight/2, -window.innerHeight/2, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 定义矩形的对角坐标（可根据你的需求修改）
var startX = -100;
var startY = 100;
var endX = 100;
var endY = -100;

// 你的方形几何代码补全
var combined = new THREE.Geometry();
var squareGeometry = new THREE.Geometry();
squareGeometry.vertices.push(
    new THREE.Vector3(startX, startY, 0),
    new THREE.Vector3(endX, startY, 0),
    new THREE.Vector3(endX, endY, 0),
    new THREE.Vector3(startX, endY, 0),
    new THREE.Vector3(startX, startY, 0)
);
// 创建方形线框并添加到场景
const squareMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
const square = new THREE.Line(squareGeometry, squareMaterial);
scene.add(square);

// --- 关键：计算矩形中心坐标 ---
const centerX = (startX + endX) / 2;
const centerY = (startY + endY) / 2;
const centerZ = 0; // 保持和方形同一平面

// --- 创建图标并居中 ---
// 加载图标纹理（替换成你的图标路径）
const iconTexture = new THREE.TextureLoader().load('your-icon.png');
// 创建Sprite材质（支持透明背景）
const iconMaterial = new THREE.SpriteMaterial({ map: iconTexture, transparent: true });
// 创建Sprite图标
const icon = new THREE.Sprite(iconMaterial);
// 设置图标大小（按需调整）
icon.scale.set(50, 50, 1);
// 把图标位置设为矩形中心
icon.position.set(centerX, centerY, centerZ);
scene.add(icon);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

核心要点解释 #

• 计算中心：矩形的中心坐标就是对角坐标的平均值，这个逻辑简单直观，不管矩形的尺寸和位置如何变化，都能精准定位中心。
• 使用Sprite：Sprite是Three.js中专门用于展示2D图标的元素，它会始终面向相机，非常适合这类UI图标需求。如果你的图标需要固定角度展示，也可以用PlaneMesh，位置设置逻辑完全一致。
• 层级调整：如果图标被方形线框挡住，只需微调centerZ的值（比如设为1），就能让图标显示在方形的上层。

如果需要用PlaneMesh实现图标，替换以下代码即可：

// 创建PlaneMesh版本的图标
const iconGeometry = new THREE.PlaneGeometry(50, 50);
const iconMaterial = new THREE.MeshBasicMaterial({ map: iconTexture, transparent: true });
const icon = new THREE.Mesh(iconGeometry, iconMaterial);
icon.position.set(centerX, centerY, centerZ);
// 透视相机下需要让平面面向相机，正交相机可省略
icon.lookAt(camera.position);
scene.add(icon);

内容的提问来源于stack exchange，提问作者karthick187