Three贴图Textures实例

留奇

已于 2022-09-30 16:31:04 修改

阅读量497

点赞数

分类专栏： THREE 文章标签：贴图

于 2022-09-30 16:28:00 首次发布

本文链接：https://blog.csdn.net/lqiqil/article/details/127124579

版权

THREE 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

基础环境搭建：

在这里插入图片描述

新建文件夹，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 - 5
        mesh.position.y = Math.random() * 10 - 5
        mesh.position.z = Math.random() * 10 - 5
        scene.add(mesh)
        spheres.push(mesh)
    }
}

在这里插入图片描述

让模型动起来：

    let timer = Date.now() * 0.0001
    for (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)
    }