THREE.js 360度全景

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

主要分两个步骤

• 获取360度的图片(HDRI) 然后转成 六个面的纹理
• 渲染使用

获取纹理

实现360的效果 需要一张对应的图片 HDRI 图片 大量的免费纹理 清晰度最高20kpolyhaven.com/hdris 可以从上面下载需要的纹理 介于浏览器需要考虑速度 清晰度不易选择过大2k即可 大概6M 获取HDRI图片后 并不能直接放到THREE中使用需要将HDRI 分割成六份 这个网站帮我们处理 matheowis.github.io/HDRI-to-Cub… 使用 步骤 1 上传下载的HDRI图 如图分割了六个面 2 点击save 选择清晰度 512差不多 3 选择第三个 点击 process按钮 加载完成后 点击下载 会自动分割好THREE.js 需要六张图片 非常方便

需要的六张图 文件名最好不要改 意思是 负x轴 负y轴 负z轴 正x轴 正y轴 正z轴

创建纹理

const cubeTextureLoader = new THREE.CubeTextureLoader();

const environmentMapTexture = cubeTextureLoader.setPath("/img/envTexture/").load(
     ["px.png", "nx.png", "py.png", "ny.png", "pz.png", "nz.png"],
     (cubeTexture) => {
         console.log(cubeTexture);
     },
     () => {},
     (err) => {
         console.log(err);
     }
 );

load 的第一个参数 六张图片的顺序需要按照这个格式来 否则渲染的图片就会有衔接不上 可以尝试看看。

这样就获得了环境纹理 可以直接放到scene上查看 操作其实是非常简单的 只是需要处理图片

scene = new THREE.Scene();
    // scene.background = new THREE.Color(0xcfffcc);

    const cubeTextureLoader = new THREE.CubeTextureLoader();

    const environmentMapTexture = cubeTextureLoader.setPath("/img/envTexture/").load(
        ["px.png", "nx.png", "py.png", "ny.png", "pz.png", "nz.png"],
        () => {
            scene.background = environmentMapTexture;
        },
        undefined,
        (e) => {
            console.log(e);
        }
    );

CubeTexture文档