three.js 模型坐标转为html坐标

将three.js中的3D坐标转换为 HTML 坐标（2D屏幕坐标）可以使用以下代码：

var vector = new THREE.Vector3();
vector.setFromMatrixPosition(object.matrixWorld);

var widthHalf = 0.5 * renderer.context.canvas.width;
var heightHalf = 0.5 * renderer.context.canvas.height;

vector.project(camera);

vector.x = (vector.x * widthHalf) + widthHalf;
vector.y = -(vector.y * heightHalf) + heightHalf;

其中 `object` 是你要转换的3D对象，`camera` 是当前场景中的相机，`renderer` 是用于渲染场景的渲染器对象。

使用上面的代码，将 3D 坐标转换为 HTML 坐标。

相关问题

three.js 对模型表面添加文字

### 使用 Three.js 在 3D 模型表面上添加文字

为了在 Three.js 中实现于 3D 模型表面添加文字的效果，可以采用纹理映射的方法。具体来说，创建带有文字的图像作为材质贴图应用到目标几何体上。

#### 创建带文字的 Canvas 并转换成 Texture

通过 HTML5 `<canvas>` 绘制所需的文字内容并将其转化为纹理对象供 Three.js 使用：

// 初始化画布尺寸和上下文环境
const canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;

const context = canvas.getContext('2d');

// 设置字体样式和其他属性
context.font = 'bold 70px Arial';
context.textAlign = 'center';
context.fillStyle = '#ffffff'; // 白色填充颜色
context.fillText('Hello', canvas.width / 2, canvas.height / 2);

// 将Canvas转为Texture
const texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

#### 应用自定义纹理至模型

一旦拥有了基于文字绘制而成的 `THREE.Texture` 对象，则可进一步设置其成为特定材料的一部分，并最终应用于 STL 或其他类型的加载器所导入的对象之上。

// 加载STL文件
const loader = new THREE.STLLoader();
loader.load('./model.stl', function (geometry) {
    const material = new THREE.MeshBasicMaterial({ map: texture });
    
    // 构建网格并将它加入场景中
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
});

上述方法适用于较为简单的平面化处理；对于更复杂的曲面情况可能需要额外考虑 UV 坐标调整等问题来确保文字能够正确地投射到物体表面[^1]。

mapbox-gl.js three.js 添加的几何体的点击事件 如何获取

在Mapbox GL JS 中添加的 Three.js 几何体，并希望监听其点击事件，你需要结合两者的事件系统。以下是基本步骤：

1. 首先，在Three.js中，你需要给几何体添加一个`raycaster`和`mouse拾取`功能。当你鼠标点击时，它会检查这个位置是否落在你的几何体上。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 当地图触发click事件时
map.on('click', function(e) {
    mouse.x = (e.lngLat.lng * Math.PI / 180);
    mouse.y = (e.lngLat.lat * Math.PI / 90) - 0.5; // 将经纬度转为屏幕坐标
    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children); // 交集数组
    if (intersects.length > 0) {
        const hitObject = intersects[0].object;
        handleHitObject(hitObject);
    }
});

2. `handleHitObject`函数负责处理几何体被点击后的操作，例如传递给Mapbox GL JS 或者执行其他定制的逻辑。

function handleHitObject(hitObject) {
    console.log('Clicked on:', hitObject); // 获取到被点击的3D模型

    // 如果需要，你也可以在这里更新Mapbox GL JS 的UI，如显示信息窗口
}

请注意，这里的代码示例简化了处理过程，实际应用中可能需要考虑浏览器的差异以及性能优化。