threejs入门知识纹理篇

threejs入门知识纹理篇

官方文档给我们提供了基础的纹理材质，如果我们要使用自定义的纹理的时候
材质贴图网站

import wl1 from "../assets/image/1.jpg"
import wl2 from "../assets/image/2.jfif"

...省略部分代码 这里有详细代码 `https://blog.csdn.net/weixin_48255917/article/details/129227961`
// 导入纹理
// 导入纹理
const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load(wl2)
//超远或者超近的时候显示的纹理素
// doorColorTexture.minFilter = THREE.NearestFilter
// doorColorTexture.magFilter = THREE.NearestFilter 
doorColorTexture.minFilter = THREE.LinearFilter
doorColorTexture.magFilter = THREE.LinearFilter
doorColorTexture.offset.x = 0.1//0-1区间
// 旋转中心点
doorColorTexture.center.set(0.5, 0.5)
doorColorTexture.rotation = Math.PI / 4
// 设置重复次数
doorColorTexture.repeat.set(2, 3)
// 设置问题重复的模式
doorColorTexture.wrapT = THREE.MirroredRepeatWrapping
doorColorTexture.wrapS = THREE.RepeatWrapping
//添加物体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
//设置物体的材质
const cubeMaterial = new THREE.MeshBasicMaterial({
    color: 'red',
    map: doorColorTexture,//添加到物体中
})
//根据材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
//将物体添加到场景中
scene.add(cube)

以上省略部分代码不懂得可以查看这篇文章详细threejs还不懂的可以留言

标准网格材质（MeshStandardMaterial）

标准网格材质就需要灯光来配合才能显现出来

const cubeMaterial = new THREE.MeshStandardMaterial({
    color: 'red',
    map: doorColorTexture,//添加到物体中
    //displacementMap:置换贴图变量
})
//灯光
// 环境光从四面八方过来的灯光
const light = new THREE.AmbientLight('#fff', 0.5)
scene.add(light)
// 太阳光也称直线光源
const directionalLight = new THREE.DirectionalLight('#fff', .5)//不设置位置默认从y轴过来
directionalLight.position.set(10, 10, 10)
scene.add(directionalLight)

• 置换贴图：首先导入置换贴图 displacementMap:（置换贴图变量）添加到物体中
  如果需要顶点突出还需要新增细小的点widthSegments — （可选）平面的宽度分段数，默认值是1。
  heightSegments — （可选）平面的高度分段数，默认值是1。可以设置大点
  然后太突出还可以设置影响度displacementScale:0.05数值是突出度
• roughness:0,//粗糙度 0-1
  -roughnessMap:粗糙贴图
• metalness：1,//金属度0-1 ，1金属
• metalnessMap,//金属贴图
• normalMap//法线贴图

纹理加载器事件

// 设置加载器管理
const loadingManager = new THREE.LoadingManager(
    function onload() {
        console.log('加载完成');
    },
     function onProgress(url, num, total) {//路径 ，当前加载数，加载总数
        console.log('加载过程', url, num, total);
    },
    function onError(e) {
        console.log('加载失败', e);
    },

)
// 导入纹理
const textureLoader = new THREE.TextureLoader(loadingManager) //将纹理加载器导入纹理中，那么下面所有的纹理加载都储存在纹理加载器中
const doorColorTexture = textureLoader.load(wl2)
const doorColorTexture2 = textureLoader.load(wl1)

环境贴图

const envMapTexture = cubeTextureLoader.load([wl4, wl1, wl5, wl2, wl6, wl3])
//给场景添加背景
scene.background=envMapTexture
// 给所有场景添加默认的环境贴图
scene.environment=envMapTexture

添加了这两个就有点意思了

hdrRPEG环境贴图

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
// 加载hdr环境图
const rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync(hdr1).then((texture)=>{  //异步执行函数  hdr1环境贴图
    texture.mapping=THREE.EquirectangularReflectionMapping   //用于等距圆柱投影的环境贴图，也被叫做经纬线映射贴图。
        scene.background=texture	//设置背景
    scene.environment=texture //设置环境
})

import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import gsap from 'gsap'
import * as dat from "dat.gui"
import wl1 from "../assets/image/nx.jpg"
import wl2 from "../assets/image/ny.jpg"
import wl3 from "../assets/image/nz.jpg"
import wl4 from "../assets/image/px.jpg"
import wl5 from "../assets/image/py.jpg"
import wl6 from "../assets/image/pz.jpg"
import hdr1 from "../assets/image/002.hdr"
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'


// 加载hdr环境图
const rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync(hdr1).then((texture)=>{
    texture.mapping=THREE.EquirectangularReflectionMapping
    scene.background=texture
    scene.environment=texture
})
//初始化场景
const scene = new THREE.Scene()

//创建相机
const camera = new THREE.PerspectiveCamera(75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000)
//设置相机位置
camera.position.set(0, 0, 10);
// 添加相机到场景
scene.add(camera)




// 设置纹理加载器
const cubeTextureLoader = new THREE.CubeTextureLoader()
const envMapTexture = cubeTextureLoader.load([wl4, wl1, wl5, wl2, wl6, wl3])
// //给场景添加背景
// scene.background = envMapTexture
// // 给所有场景添加默认的环境贴图
// scene.environment = envMapTexture
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
const material = new THREE.MeshStandardMaterial({
    metalness: 0.7,
    roughness: 0.1,
    // color: 'red',
    // envMap: envMapTexture
})
const sphere = new THREE.Mesh(sphereGeometry, material)
scene.add(sphere)
//灯光
// 环境光从四面八方过来的灯光
const light = new THREE.AmbientLight('#fff', 0.5)
scene.add(light)
// 太阳光也称直线光源

const directionalLight = new THREE.DirectionalLight('#fff', .5)//不设置位置默认从y轴过来
directionalLight.position.set(20, 20, 20)
scene.add(directionalLight)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 创建轨道控制器实现3d
const controls = new OrbitControls(camera, renderer.domElement)

// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper(50)
scene.add(axesHelper)
function render() {
    renderer.render(scene, camera)
    // 不停的渲染
    requestAnimationFrame(render)
}
render()

想要素材的可以私聊联系我