three.js学习之环境贴图

环境贴图"/>

three.js学习之环境贴图

设置cube纹理加载器

// 设置cube纹理加载器
const cubeTextureLoader = new THREE.CubeTextureLoader()
const envMapTexture = cubeTextureLoader.load(["src/assets/textures/environmentMaps/0/px.jpg","src/assets/textures/environmentMaps/0/nx.jpg","src/assets/textures/environmentMaps/0/py.jpg","src/assets/textures/environmentMaps/0/ny.jpg","src/assets/textures/environmentMaps/0/pz.jpg","src/assets/textures/environmentMaps/0/nz.jpg",
])

添加物体

// 添加物体:创建几何体
const geometry = new THREE.SphereBufferGeometry(1,20,20);
// 材质
const material = new THREE.MeshStandardMaterial({metalness:0.7,roughness:0.1,envMap:envMapTexture,
});// 根据几何体和其材质创建物体
const shape = new THREE.Mesh(geometry,material);
// 将物体添加到场景中
scene.add(shape)

添加灯光

// 灯光
// 环境光（没有方向）
const light = new THREE.AmbientLight( 0xffffff, 1  ); // soft white light
scene.add( light );
// 平行光
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
// 方向
directionalLight.position.set(10,10,10)
scene.add( directionalLight );

背景贴图

// 给场景背景贴图
scene.background = envMapTexture;
// 给场景所有的物体添加默认的环境贴图
scene.environment = envMapTexture;