在 Next JS 中用三个 JS 将图像制作成粒子

Question

现在我正在学习三个 JS，现在我在阻止我的期望应该是这样的：

但现在我的代码没有显示任何视图，我的代码是这样的：

import { useEffect } from "react/cjs/react.development";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export default () => {
  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      1,
      1000
    );
    const canvas = document.querySelector("canvas.background");
    let renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    new OrbitControls(camera, renderer.domElement);

    const img = new Image();
    let texture = new THREE.Texture(img);
    img.onload = () => {
      texture.needsUpdate = true;
      const material = new THREE.PointsMaterial({
        size: 20,
        map: texture,
        blending: THREE.AdditiveBlending,
        transparent: true,
        depthTest: false,
      });
      const particle = new THREE.Sprite(material);
      particle.scale.x = particle.scale.y = 1;
      scene.add(particle);
    };
    img.src = "/flower.png";
    scene.add(camera);

    camera.position.z = 3;
    const animate = () => {
      const elapsedTime = new THREE.Clock().getElapsedTime();

      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    };
    animate();
  }, []);

  return <canvas className="background" />;
};

我尝试了论坛的不同答案，但似乎对我不起作用

你们能帮忙吗？我会感激的

Answer 1

您不能将THREE.PointsMaterial 与THREE.Sprite 一起使用。 THREE.PointsMaterial 适用于 THREE.Points。请改用THREE.SpriteMaterial。