3.js - 效果合成（使用法向纹理合成渲染效果）【THREE.CubeTextureLoader() 添加环境纹理】

改了一个昵称

已于 2024-09-26 09:02:37 修改

阅读量400

点赞数 3

CC 4.0 BY-SA版权

分类专栏： three.js 文章标签： three.js

于 2024-09-19 10:08:56 首次发布

本文链接：https://blog.csdn.net/pig_ning/article/details/142352647

哈哈

在这里插入图片描述

代码


import * as THREE from 'three'
import {
   
    OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import {
   
    RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import {
   
    GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import {
   
    DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import {
   
    GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

// 导入，后期效果合成器
import {
   
    EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'

// three.js框架，本身自带效果
import {
   
    RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
import {
   
    DotScreenPass } from 'three/examples/jsm/postprocessing/DotScreenPass'
import {
   
    SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass'
import {
   
    UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
import {
   
    GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass'

// 着色器，编写，渲染通道
import {
   
    ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.set(0, 0, 3)
scene.add(camera)

const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

/*
  THREE.CubeTextureLoader()
    添加环境纹理，
    这个方法，接收一个包含六个图像URL的数组作为参数，并自动加载这些图像，以创建立方体贴图。*/
const cubeTextureLoader = new THREE.CubeTextureLoader()
const envMapTexture = cubeTextureLoader.load([
  '../public/textures/environmentMaps/0/px.jpg',
  '../public/textures/environmentMaps/0/nx.jpg',
  '../public/textures/environmentMaps/0/py.jpg',
  '../public/textures/environmentMaps/0/ny.jpg',
  '../public/textures/environmentMaps/0/pz.jpg',
  '../public/textures/environmentMaps/0/nz.jpg'
])
scene.environment = envMapTexture
scene