基于threeJS实现圣诞节孔明灯效果

Myth丶恋晨 2023-09-27 13:32 12阅读 0赞

### 1.效果图 ###

![2abcf419bc4d4a789e0dc0108f357a16.gif][]

![fea5e27aa31b481eacec94625e1c0342.png][]

### 2.实现思路 ###

使用three.js的套路几乎是固定的：

> 1 初始化场景（scene）
> 
> 2.创建透视相机（camera）
> 
> 3.设置相机位置（position）
> 
> 4.创建纹理加载器对象（texture）
> 
> 5.创建着色器材质（Material）
> 
> 6.初始化渲染器（WebGLRenderer）
> 
> 7.设置渲染尺寸大小（Size）
> 
> 8.将渲染器添加到body（appendChild）
> 
> 9.初始化控制器（controls）
> 
> 10.设置控制器阻尼（enableDamping）
> 
> 11.不停地调用渲染（animate）
> 
> ps:万事的开头，你都得先下载引入并初始化three对象

--------------------

### 3.核心代码 ###

import * as THREE from "three";
    
    import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
    import gsap from "gsap";
    import * as dat from "dat.gui";
    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
    
    //创建gui对象
    const gui = new dat.GUI();
    
    // console.log(THREE);
    // 初始化场景
    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();

###  ###

[2abcf419bc4d4a789e0dc0108f357a16.gif]: https://img-blog.csdnimg.cn/2abcf419bc4d4a789e0dc0108f357a16.gif
[fea5e27aa31b481eacec94625e1c0342.png]: https://img-blog.csdnimg.cn/fea5e27aa31b481eacec94625e1c0342.png