Three贴图Textures实例

实例"/>

Three贴图Textures实例

基础环境搭建：

新建文件夹，github clone目录下拷贝贴图文件：

纹理功能一：CubeTextureLoader生成天空盒子：

立方纹理（CubeTexture）：创建一个由6张图片所组成的纹理对象。

function initScene() {scene = new THREE.Scene()const urls = ['textures/cube/pisa/px.png','textures/cube/pisa/nx.png','textures/cube/pisa/py.png','textures/cube/pisa/ny.png','textures/cube/pisa/pz.png','textures/cube/pisa/nz.png',]cubeTexture = new THREE.CubeTextureLoader().load(urls)scene.background = cubeTexture  //texture:给scene生成一个skybox效果
}

纹理功能二：赋予网格模型实现类似反光效果

function initMeshes() {const geometry = new THREE.SphereGeometry(0.1, 64, 64)const material = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: cubeTexture });for (let i = 0; i < count; i++) {mesh = new THREE.Mesh(geometry, material)mesh.position.x = Math.random() * 10 - 5mesh.position.y = Math.random() * 10 - 5mesh.position.z = Math.random() * 10 - 5scene.add(mesh)spheres.push(mesh)}
}

让模型动起来：

    let timer = Date.now() * 0.0001for (let i = 0; i < count; i++) {const sphere = spheres[i]sphere.position.x = 5 * Math.cos(timer + i)sphere.position.y = 5 * Math.sin(timer + i * 1.1)}