Three.js加载OBJ模型的静态场景中Orbit Controller无法工作求助

核心问题：CSS2DRenderer元素遮挡交互事件 #

你的CSS2DRenderer DOM元素采用绝对定位覆盖在页面顶部，默认会拦截鼠标事件，导致下方的WebGLRenderer画布无法接收鼠标输入，最终让OrbitControls无法响应操作。

修复步骤 #

1. 让CSS2DRenderer不拦截鼠标事件 #

修改labelRenderer的样式，添加pointer-events: none，让鼠标事件能穿透到下方的画布：

const labelRenderer = new CSS2DRenderer()
labelRenderer.setSize(window.innerWidth, window.innerHeight)
labelRenderer.domElement.style.position = 'absolute'
labelRenderer.domElement.style.top = '0px'
labelRenderer.domElement.style.pointerEvents = 'none' // 新增该行
document.body.appendChild(labelRenderer.domElement)

2. 可选：调整OrbitControls目标点（适配模型位置） #

你将模型缩放了0.01倍，若模型原始中心不在(1000, 0, 0)（缩放后对应(10,0,0)），当前设置的controls.target可能偏离模型中心，导致旋转体验异常。可以在模型加载完成后，自动将目标点设为模型中心：

objLoader
    .setMaterials(materials)
    .setPath('models/')
    .load('house_water.obj', function (object) {
        object.scale.set(0.01, 0.01, 0.01)
        scene.add(object)
        // 计算模型包围盒并设置目标点为中心
        object.geometry?.computeBoundingBox();
        if (object.geometry?.boundingBox) {
            const center = object.geometry.boundingBox.getCenter(new THREE.Vector3());
            controls.target.copy(center);
            controls.update();
        }
    })

3. 确认基础配置无误 #

你的代码已经在animate函数中调用了controls.update()，这部分符合规范，无需修改。

额外检查点 #

• 确保Three.js与OrbitControls版本匹配，避免版本兼容问题。
• 查看浏览器控制台是否有报错（比如模型加载失败），这类错误可能影响整体运行逻辑。

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