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

在上一篇小程序使用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;

      });

关于threejs的研究继续中…