ahora estoy aprendiendo sobre Three JS y ahora estoy en el bloqueador de que mi expectativa debería ser así:

pero ahora mi código no muestra ninguna vista, donde mi código era así:

 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" />; };

Probé diferentes respuestas del foro, pero parece que no funciona para mí.

¿podrían ayudar? Yo lo apreciaré