threejs(11)-shader着色器打造漫天飞舞孔明灯

本文主要是介绍threejs(11)-shader着色器打造漫天飞舞孔明灯，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述
src/main/main.js

import * as THREE from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap"; // 动画库
import vertexShader from "../shaders/flylight/vertex.glsl"; // 顶点着色器
import fragmentShader from "../shaders/flylight/fragment.glsl"; // 片元着色器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";// 目标：认识shader// 初始化场景
const scene = new THREE.Scene();// 创建透视相机
const camera = new THREE.PerspectiveCamera(90,window.innerHeight / window.innerHeight,0.1,1000
);
// 设置相机位置
// object3d具有position，属性是1个3维的向量
camera.position.set(0, 0, 2);
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
//   更新摄像机的投影矩阵
camera.updateProjectionMatrix();
scene.add(camera);// 加入辅助轴，帮助我们查看3维坐标轴
// const axesHelper = new THREE.AxesHelper(5);
// scene.add(axesHelper);// 加载纹理// 创建纹理加载器对象
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync("./assets/2k.hdr").then((texture) => {texture.mapping = THREE.EquirectangularReflectionMapping;scene.background = texture;scene.environment = texture;
});// 创建着色器材质;
const shaderMaterial = new THREE.ShaderMaterial({vertexShader: vertexShader,fragmentShader: fragmentShader,uniforms: {},side: THREE.DoubleSide,//   transparent: true,
});// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ alpha: true });
/**
* 色调映射
*/
// renderer.shadowMap.enabled = true;
// renderer.shadowMap.type = THREE.BasicShadowMap;
// renderer.shadowMap.type = THREE.VSMShadowMap;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping; // 电影级别的色调映射
// renderer.toneMapping = THREE.LinearToneMapping;
// renderer.toneMapping = THREE.ReinhardToneMapping;
// renderer.toneMapping = THREE.CineonToneMapping;
renderer.toneMappingExposure = 0.2; // 环境光亮程度const gltfLoader = new GLTFLoader();
let LightBox = null;
gltfLoader.load("./assets/model/flyLight.glb", (gltf) => { // 添加孔明灯console.log(gltf);LightBox = gltf.scene.children[1];LightBox.material = shaderMaterial;for (let i = 0; i < 150; i++) {let flyLight = gltf.scene.clone(true);let x = (Math.random() - 0.5) * 300;let z = (Math.random() - 0.5) * 300;let y = Math.random() * 60 + 25;flyLight.position.set(x, y, z);gsap.to(flyLight.rotation, {y: 2 * Math.PI,duration: 10 + Math.random() * 30,repeat: -1,});gsap.to(flyLight.position, {x: "+=" + Math.random() * 5,y: "+=" + Math.random() * 20,yoyo: true,duration: 5 + Math.random() * 10,repeat: -1,});scene.add(flyLight);}
});// 设置渲染尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);// 监听屏幕大小改变的变化，设置渲染的尺寸
window.addEventListener("resize", () => {//   console.log("resize");// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;//   更新摄像机的投影矩阵camera.updateProjectionMatrix();//   更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);//   设置渲染器的像素比例renderer.setPixelRatio(window.devicePixelRatio);
});// 将渲染器添加到body
document.body.appendChild(renderer.domElement);// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼
controls.enableDamping = true;
// 设置自动旋转
controls.autoRotate = true;
controls.autoRotateSpeed = 0.1;
controls.maxPolarAngle = (Math.PI / 3) * 2;
controls.minPolarAngle = (Math.PI / 3) * 2;const clock = new THREE.Clock();
function animate(t) {controls.update();const elapsedTime = clock.getElapsedTime();requestAnimationFrame(animate);// 使用渲染器渲染相机看这个场景的内容渲染出来renderer.render(scene, camera);
}animate();

src/shaders/flylight/vertex.glsl

precision lowp float;
varying vec4 vPosition;
varying vec4 gPosition;
void main(){vec4 modelPosition = modelMatrix * vec4( position, 1.0 );vPosition = modelPosition;gPosition = vec4( position, 1.0 );gl_Position =  projectionMatrix * viewMatrix * modelPosition;
}

src/shaders/flylight/fragment.glsl

precision lowp float;
varying vec4 vPosition;
varying vec4 gPosition;void main(){vec4 redColor = vec4(1,0,0,1);vec4 yellowColor = vec4(1,1,0.5,1);vec4 mixColor = mix(yellowColor,redColor,gPosition.y/3.0);if(gl_FrontFacing){ // 判断正面还是反面 true-> 正面 false-> 反面gl_FragColor = vec4(mixColor.xyz-(vPosition.y-20.0)/80.0-0.1,1); }else{gl_FragColor = vec4(mixColor.xyz,1);}
}