我是 NASA 新伽马射线星座页面的首席开发人员，该页面是一个交互式外展工具，用于突出显示夜空在不同波长下的样子：
https://fermi.gsfc.nasa.gov/science/constellations/ https://fermi.gsfc.nasa.gov/science/constellations/
我使用 ThreeJS 将交互式内容组合在一起，虽然该页面在现代笔记本电脑上运行良好，但我一直在寻找提高旧设备和移动平台性能的方法。
如果这个问题太宽泛，我深表歉意，但如果有任何关于如何在此类应用程序中提高 ThreeJS 效率的评论，我将不胜感激。特别是，我很好奇经验丰富的 ThreeJS 编码员如何潜在地整合/合并几何图形以减少 CPU/内存开销。我是一名科学家，肩负着程序员的双重职责，因此任何有关如何提高当前代码性能的建议将不胜感激。
以下是交互式场景构建方式的基本细分，但完整代码可以在上面的链接中找到：
- 创建“天空”球体并为其添加纹理
- 将相机放置在球体内部
- 沿球体创建网格线
- 创建光学星座线
- 创建伽马射线星座线
- 创建几何图形来包含星座艺术
- 创建透明的点击捕捉几何图形来切换星座艺术
最终产品有 1083 个几何图形、75 个纹理、125336 个顶点和 40642 个面。在我的 2016 款 MacBook Pro 上查看该页面几分钟，其温度足以煎鸡蛋。任何关于使代码更高效的最佳实践的建议将不胜感激。
您当前每秒渲染场景 60 次。性能的最大改进应该是通过仅在需要时进行渲染来实现。
对于静态场景，您只需要在相机移动时进行渲染——不需要动画循环。
例如，如果您正在使用OrbitControls要控制你的相机，你可以使用这个模式。
var controls = new THREE.OrbitControls( camera, renderer.domElement );
// call this only in static scenes (i.e., if there is no animation loop)
controls.addEventListener( 'change', render );
此外，即使您在演示中使用 TWEEN，您也可以使用如下模式仅在补间持续时间内实例化动画循环：
// start animate loop
var id;
animate();
// tween
var time = { t: 0 };
new TWEEN.Tween( time )
.to( { t : 1 }, 1000 )
.onStart( function() {
// custom
} )
.onUpdate( function() {
// custom
} )
.onComplete( function() {
// custom
cancelAnimationFrame( id );
} )
.start();
function animate() {
id = requestAnimationFrame( animate );
TWEEN.update();
render();
}
function render() {
renderer.render( scene, camera );
}
三.js r.97
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
