你瞅啥啊！！！
先看效果图吧
代码
// @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)// 更新tweenTWEEN.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})
