3D模型组件在移动端加载后无法交互是怎么回事?
我用 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 的绑定方式有问题?
在canvas容器上加:
如果还不行,OrbitControls这边也明确写一下:
另外检查下HTML里的viewport meta标签有没有加user-scalable=no:
三点改完基本就能跑了。