当前位置：首页 > article >正文

【Threejs】从零开始（八）--贴图

article 2024/12/21 15:45:02

一、创建一个基本的平面

不懂的地方可以看前面的进行回顾

// 导入three
import * as THREE from 'three'  // 导入threejs
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// 创建场景
const scene = new THREE.Scene()

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 3

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

//辅助坐标系
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement)

//自适应窗口
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
})

// 创建平面
const PlaneGe = new THREE.PlaneGeometry(1, 1)
const material = new THREE.MeshBasicMaterial({ 
    color: 0xffffff ,
    side: THREE.DoubleSide, 

})
const plane = new THREE.Mesh(PlaneGe, material)
scene.add(plane)

// 渲染循环
function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
}
animate()

这样会得到一个平面

二、给平面添加贴图

1.创建贴图

// 创建贴图
const textureLoader = new THREE.TextureLoader()
const map = textureLoader.load('./assets/1.png')

2.使用贴图（在创建材质时添加map属性）

const material = new THREE.MeshBasicMaterial({ 
    color: 0xffffff ,
    side: THREE.DoubleSide, 
    map: map,

})

这样可以将我们想要的图片贴到我们的物体上面。

三、设置全景贴图

1.导入hdr加载器

// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'

2.创建全景贴图

// 全景贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('./assets/night.hdr', (texture) => {
    //设置球型映射
    texture.mapping = THREE.EquirectangularReflectionMapping 
    scene.background = texture // 设置背景
    scene.environment = texture  // 设置环境
    //反射贴图
    material.envMap = texture
})

这样我们就得到了类似3d空间的效果。