3D模型组件在移动端加载后无法交互是怎么回事?

程序猿瑞丹 阅读 5

我用 three.js 做了个简单的 3D 模型展示组件,在桌面端点击旋转都正常,但一到手机上模型就卡住不动了,touch 事件好像没生效。试过加 touchstart 和 pointerdown 监听,也设置了 renderer 的 alpha 和 antialias,还是不行。

这是我的初始化代码:

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.getElementById('canvas-container').appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

是不是 OrbitControls 在移动端需要额外配置什么?或者 domElement 的绑定方式有问题?

我来解答 赞 0 收藏
二维码
手机扫码查看
1 条解答
轩辕顺红
问题很简单,90%是CSS的touch-action没禁掉,导致手指一碰屏幕就触发了浏览器默认的滚动/缩放,OrbitControls根本接不到事件。

在canvas容器上加:

#canvas-container {
width: 100%;
height: 100%;
touch-action: none;
}


如果还不行,OrbitControls这边也明确写一下:

controls.enableTouchZoom = true;
controls.enableTouchPan = true;
controls.enableRotate = true;


另外检查下HTML里的viewport meta标签有没有加user-scalable=no:



三点改完基本就能跑了。
点赞
2026-03-13 14:24