vue3使用Threejs不生效找不到THREE，换个版本试试

一、版本

“three”: “^0.152.2”,

二、3D粒子波浪效果

<template>
  <div class="LatheBufferGeometry"></div>
</template>
<script>
import * as THREE from "three"
export default {
  name: 'LatheBufferGeometry',
  setup() {

    var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;

    var container;
    var camera, scene, renderer;

    var particles, particle, count = 0;

    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    // setTimeout(() => {
    //   console.log(THREE)
    //   init();
    //   animate();
    // }, 10000)


    // function init() {

    //   container = document.createElement('div');
    //   document.body.appendChild(container);

    //   camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    //   camera.position.z = 1000;

    //   scene = new THREE.Scene();

    //   particles = new Array();

    //   var PI2 = Math.PI * 2;
    //   var material = new THREE.ParticleCanvasMaterial({

    //     color: 0xffffff,
    //     program: function (context) {

    //       context.beginPath();
    //       context.arc(0, 0, 1, 0, PI2, true);
    //       context.fill();

    //     }

    //   });

    //   var i = 0;

    //   for (var ix = 0; ix < AMOUNTX; ix++) {

    //     for (var iy = 0; iy < AMOUNTY; iy++) {

    //       particle = particles[i++] = new THREE.Particle(material);
    //       particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
    //       particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
    //       scene.add(particle);

    //     }

    //   }

    //   renderer = new THREE.CanvasRenderer();
    //   renderer.setSize(window.innerWidth, window.innerHeight);
    //   container.appendChild(renderer.domElement);

    //   document.addEventListener('mousemove', onDocumentMouseMove, false);
    //   document.addEventListener('touchstart', onDocumentTouchStart, false);
    //   document.addEventListener('touchmove', onDocumentTouchMove, false);

    //   //

    //   window.addEventListener('resize', onWindowResize, false);

    // }

    // function onWindowResize() {

    //   windowHalfX = window.innerWidth / 2;
    //   windowHalfY = window.innerHeight / 2;

    //   camera.aspect = window.innerWidth / window.innerHeight;
    //   camera.updateProjectionMatrix();

    //   renderer.setSize(window.innerWidth, window.innerHeight);

    // }

    // //

    // function onDocumentMouseMove(event) {

    //   mouseX = event.clientX - windowHalfX;
    //   mouseY = event.clientY - windowHalfY;

    // }

    // function onDocumentTouchStart(event) {

    //   if (event.touches.length === 1) {

    //     event.preventDefault();

    //     mouseX = event.touches[0].pageX - windowHalfX;
    //     mouseY = event.touches[0].pageY - windowHalfY;

    //   }

    // }

    // function onDocumentTouchMove(event) {

    //   if (event.touches.length === 1) {

    //     event.preventDefault();

    //     mouseX = event.touches[0].pageX - windowHalfX;
    //     mouseY = event.touches[0].pageY - windowHalfY;

    //   }

    // }

    // //

    // function animate() {

    //   requestAnimationFrame(animate);

    //   render();


    // }

    // function render() {

    //   camera.position.x += (mouseX - camera.position.x) * .05;
    //   camera.position.y += (- mouseY - camera.position.y) * .05;
    //   camera.lookAt(scene.position);

    //   var i = 0;

    //   for (var ix = 0; ix < AMOUNTX; ix++) {

    //     for (var iy = 0; iy < AMOUNTY; iy++) {

    //       particle = particles[i++];
    //       particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
    //       particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2;

    //     }

    //   }

    //   renderer.render(scene, camera);

    //   count += 0.1;

    // }



    const init = () => {
      container = document.createElement('div')
      document.body.appendChild(container)
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)
      camera.position.z = 1000
      scene = new THREE.Scene()

      // 添加背景图
      // const texture = new THREE.TextureLoader().load(require('../assets/img/index/home-bg.png'))
      // scene.background = texture

      particles = []
      const PI2 = Math.PI * 1
      const material = new THREE.SpriteMaterial({
        color: '#DFF9FE',
        program: (context) => {
          context.beginPath()
          context.arc(0, 0, 1, 0, PI2, true)
          context.fill()
        }
      })

      let i = 0
      for (let ix = 0; ix < AMOUNTX; ix++) {
        for (let iy = 0; iy < AMOUNTY; iy++) {
          particle = particles[i++] = new THREE.Sprite(material)
          particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2)
          particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2)
          scene.add(particle)
        }
      }
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      // 设置透明度
      renderer.setClearAlpha(0.2)
      renderer.setSize(window.innerWidth, window.innerHeight)
      container.appendChild(renderer.domElement)

      document.addEventListener('mousemove', onDocumentMouseMove, false)
      document.addEventListener('touchstart', onDocumentTouchStart, false)
      document.addEventListener('touchmove', onDocumentTouchMove, false)
      window.addEventListener('resize', onWindowResize, false)
    }

    const onWindowResize = () => {
      windowHalfX = window.innerWidth / 2
      windowHalfY = window.innerHeight / 2
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      renderer.setSize(window.innerWidth, window.innerHeight)
    }

    const onDocumentMouseMove = (event) => {
      mouseX = event.clientX - windowHalfX
      mouseY = event.clientY - windowHalfY
    }

    const onDocumentTouchStart = (event) => {
      if (event.touches.length === 1) {
        event.preventDefault()
        mouseX = event.touches[0].pageX - windowHalfX
        mouseY = event.touches[0].pageY - windowHalfY
      }
    }

    const onDocumentTouchMove = (event) => {
      if (event.touches.length === 1) {
        event.preventDefault()
        mouseX = event.touches[0].pageX - windowHalfX
        mouseY = event.touches[0].pageY - windowHalfY
      }
    }

    const animate = () => {
      // stats.begin()
      // stats.end()
      requestAnimationFrame(animate)
      render()
    }

    const render = () => {
      camera.position.x += (mouseX - camera.position.x) * 0.05
      camera.position.y += (-mouseY - camera.position.y) * 0.05
      camera.lookAt(scene.position)

      let i = 0
      for (let ix = 0; ix < AMOUNTX; ix++) {
        for (let iy = 0; iy < AMOUNTY; iy++) {
          particle = particles[i++]
          particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50)
          particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2
        }
      }

      renderer.render(scene, camera)
      count += 0.1
    }

    setTimeout(() => {
      console.log(THREE)
      // 初始化
      init()
      animate()
    }, 1000)



  }
}
</script>