小程序使用threejs第五篇—室内效果3D文件的加载，可旋转查看上下四周效果

本文链接：https://blog.csdn.net/WeiHan_Seven/article/details/121620393

本文介绍如何在微信小程序中利用three.js加载HDR（高动态范围图像）文件来实现室内效果。通过从Poly Haven网站下载.hdr文件，上传至云存储，然后在小程序中使用RGBELoader加载HDR文件，并进行一系列处理，如EquirectangularToCubeGenerator、PMREMGenerator和PMREMCubeUVPacker，设置为场景背景，最终实现3D室内效果的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇小程序使用threejs第四篇—加载3D模型中我们介绍了threejs加载几种3D模型，包括gltf、obj、glb等格式。但好像一直没有用的场景，最直观的场景应该是室内效果了。

解决思路

室内效果图一般用到一种.hdr格式的文件，这种文件可以在Poly
Haven这个网站下载到，这样素材的问题我们就解决了；
由于这种格式的文件较大，放在小程序里不太现实，所以有自己服务器的可以把它放在服务器，没有的也没事，微信云开发给我们提供了很大的方便，传到云存储，用的时候把fileID换成临时下载路径是很完美的解决方案；
剩下的问题就是在小程序中加载这个url了，这里就要用到的我们的支持小程序版本的threejs了，把相关的类引入进来，然后开始调用。

效果图

在这里插入图片描述
素材不是特别清晰，需要清晰的可以到上述网站上自行下载，比较大。

体验

在这个小程序中我写了很多示例代码，欢迎大家体验

核心代码


    camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 0.25, 20);
    camera.position.set(- 1.8, 0.9, 2.7);

    scene = new THREE.Scene();

    new RGBELoader()
      .setDataType(THREE.UnsignedByteType)
      .load('这里写您的hdr文件链接', function (texture) {

        var cubeGenerator = new EquirectangularToCubeGenerator(texture, { resolution: 1024 });
        cubeGenerator.update(renderer);

        var pmremGenerator = new PMREMGenerator(cubeGenerator.renderTarget.texture);
        pmremGenerator.update(renderer);

        var pmremCubeUVPacker = new PMREMCubeUVPacker(pmremGenerator.cubeLods);
        pmremCubeUVPacker.update(renderer);

        var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;

        // 在此添加model

        pmremGenerator.dispose();
        pmremCubeUVPacker.dispose();

        scene.background = cubeGenerator.renderTarget;

      });