3.js - premultiplyAlpha

你瞅啥啊！！！

先看效果图吧

在这里插入图片描述

代码


// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'
// 导入hdr加载器（专门加载hdr的）
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

//#region
const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 5) // 设置相机位置
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer({
  antialias: true // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//#endregion

//#region
// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05

// 每一帧根据控制器更新画面
function animate() {
  // 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`
  controls.update()
  // `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染
  requestAnimationFrame(animate)
  // 渲染
  renderer.render(scence, camera)
  // 更新tween
  TWEEN.update()
}
animate()
//#endregion

// --------------------------------------------------------------
// --------------------------------------------------------------

const textureLoader = new THREE.TextureLoader()
let texture = textureLoader.load('../public/assets/texture/rain.png')

let planeGeometry = new THREE.PlaneGeometry(1, 1)
let material = new THREE.MeshBasicMaterial({
  map: texture,
  transparent: true
})
const plane = new THREE.Mesh(planeGeometry, material)
scence.add(plane)

// 图片在Y轴上翻转
// texture.flipY = false
// 将 flipY 置为 true（默认就是true，图片在Y轴上不翻转 ）
// texture.flipY = true

// 场景的背景色（添加这个背景色，是因为，可以更清楚的看到`premultiplyAlpha`的作用）
scence.background = new THREE.Color(0xffffff)

const gui = new GUI()

/*
  premultiplyAlpha：用于指示纹理加载器(THREE.TextureLoader)在加载纹理时是否自动进行alpha预乘

  1、如果 premultiplyAlpha 为 true，加载器将在加载纹理时自动对 RGB 分量进行预乘。
     `premultiplyAlpha`默认为true，
     因为这样可以确保与大多数 GPU 渲染的兼容性。

  2、如果 premultiplyAlpha 为 false，加载器将不会进行预乘，而是保持RGB分量的原始值，
     这可能在某些情况下需要，但通常需要更小心地处理透明度和混合。
*/
gui
  .add(texture, 'premultiplyAlpha')
  .name('premultiplyAlpha')
  .onChange(() => {
    texture.needsUpdate = true
  })