我创建了一个基于 three.js 的 Web 应用程序来展示 3d 瓷砖。您可以通过以下链接找到展示:https ://www.karak.at/workbench/dd6228117c6faec166b208710b5a52d5
工作原理:使用 InstancedMesh 多次加载和克隆 OBJ 文件以创建瓷砖墙。接下来将一个点和一个聚光灯添加到场景中。灯的位置对当前鼠标位置作出反应。场景在 mousemove 上重新渲染。
在基于 M1 的 Mac 上的所有浏览器以及在基于 Intel 的 Mac 上除 Chrome 之外的所有浏览器上,渲染都非常流畅。在基于 Intel 的 Mac 上使用 Chrome 版本 98 时,计算机的工作量很大,风扇上升,帧率下降,在最坏的情况下应用程序崩溃。
这是我的渲染器设置:
this.renderer = new THREE.WebGLRenderer({
antialias: AA,
powerPreference: "high-performance",
depth: true,
alpha: false,
stencil: false
});
这是用于在隔离环境中展示问题的 Pen:https ://codepen.io/Huangart/pen/VwrVjpj
我的应用程序的实施方面有什么问题吗?这是一个已知的问题?关于如何克服这个 Chrome 问题的任何想法?