ThreeJS-环境贴图（十五）

素材：

使用球形几何体

 const cubeGeometry = new THREE.SphereBufferGeometry(1, 100, 100);

使用立方体材质

    let cubeTextureLoader = new THREE.CubeTextureLoader();

关键代码：

 //添加物体

    //创建一个半径为1，经纬度分段数位20的球

    const cubeGeometry = new THREE.SphereBufferGeometry(1, 100, 100);

    //纹理加载器

    let cubeTextureLoader = new THREE.CubeTextureLoader();

    cubeTextureLoader =  cubeTextureLoader.setPath('three/').load([

      'sphere.webp',

      'sphere.webp',

      'sphere.webp',

      'sphere.webp',

      'sphere.webp',

      'sphere.webp'

    ]);

    //纹理加载器加载图片

    const cubeMaterial = new THREE.MeshStandardMaterial({

      metalness: 0.7,

      roughness: 0.1,

      envMap: cubeTextureLoader//添加环境贴图

    });

 效果图：

添加场景背景

关键代码

  scene.background = cubeTextureLoader;

 完整代码;

 

效果图：

设置物体默认环境贴图

此时我们先尝试将材质配置的换进该贴图注释掉

    const cubeMaterial = new THREE.MeshStandardMaterial({

      metalness: 1,

      roughness: 0.1,

     // envMap: cubeTextureLoader//添加环境贴图

    });

效果图：

设置默认环境题图

    //给场景所有的物体添加默认的环境贴图

    scene.environment = cubeTextureLoader;

效果图：