时间戳

首页 > 解决方案 > Three.js - 图片管理 - 推荐

javascript - Three.js - 图片管理 - 推荐

问题描述

我有一个看起来像这样的项目：

在此处输入图像描述

这个想法是：根据用户加载的图片数量增加其高度的通用房间。

它可以工作......但是当我加载超过 100 张图片时，它开始对性能造成非常严重的影响。这是我的第一个 Three.js 项目，所以我绝对是新手。

我一直在寻找一些关于优化的提示和技巧，我想听听你的意见。

为了尊重图像尺寸，我做了一个 Promise.all 在 World 初始化之前获取所有图像。然后我使用 PlaneBufferGeometry 根据图像宽度/高度比构建网格。

在此处输入图像描述

显然，建议加载具有两倍大小的纹理（https://discoverthreejs.com/tips-and-tricks/ -> 纹理部分）。我是否应该调整所有图像的大小，使它们的宽度和高度是 2 的幂，并且比例最接近原始图像？由于原始图像有许多不同的尺寸，您将如何处理这样的事情？

编辑：这是创建绘图对象的方法：

export class Drawing {
    constructor(texture) {        
        
        const imgW = Math.floor(texture.image.naturalWidth / 20);
        const imgH = Math.floor(texture.image.naturalHeight / 20);        
        const material = new MeshBasicMaterial({
            color: 0xffffff,
            map: texture
        });      
        material.color.convertSRGBToLinear();  
        this.mesh = new Mesh(new PlaneBufferGeometry(imgW, imgH), material);
    }

最后，我只是网格到场景。

标签： javascriptimageoptimizationthree.js

解决方案

您可以生成以相应比例加载不同（功率）质量图像的 mipmap。然而，一个更大的性能瓶颈显然是资源管理。您应该将图像加载作为一个反馈（惰性）循环来处理，而不是一个巨大的一次性功能。也许您会解析 1000 幅图像的元数据，但实际上会在相机位置接近断点时动态加载新纹理。例如在 y=100 时，加载图像 200-300。您还可以使用网格砖石和雾来改善灯箱体验。绝对减少超过合理尺寸的图像，使用画布或适当的东西。避免“围墙花园”方法，负担将集中在功能上，而不是数量上。

推荐阅读