const getRandomParticelPos = (particleCount) => { const arr = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount; i++) { arr[i] = (Math.random() - 0.5) * 10; } return arr; }; const resizeRendererToDisplaySize = (renderer) => { const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; const needResize = canvas.width !== width || canvas.height !== height; // resize only when necessary if (needResize) { //3rd parameter `false` to change the internal canvas size renderer.setSize(width, height, false); } return needResize; }; // mouse let mouseX = 0; let mouseY = 0; document.addEventListener("mousemove", (e) => { mouseX = e.clientX; mouseY = e.clientY; }); document.addEventListener("touchmove", (e) => { const startouches = e.touches; for (let i = 0; i < startouches.length; i++) { mouseX = startouches[i].pageX; mouseY = startouches[i].pageY; } }); const noOfPoints = 500; //1500; let drawCount; const main = () => { // look up the canvas const canvas = document.getElementById("c"); // create a WebGLRenderer const renderer = new THREE.WebGLRenderer({ canvas }); //field of view - 75deg vertical const fov = 75; // default a canvas is 300x150 pixels // which makes the aspect 300/150 or 2. const aspect = 2; const near = 0.1; const far = 5; // create a PerspectiveCamera const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // camera defaults to looking down the -Z axis with +Y up // so we need to move the camera back a little from // the origin in order to see anything camera.position.z = 2; const scene = new THREE.Scene(); // create a light source const color = 0xffffff; const intensity = 1; const light = new THREE.DirectionalLight(color, intensity); light.position.set(-1, 2, 4); scene.add(light); // Geometry const geometrys = [new THREE.BufferGeometry(), new THREE.BufferGeometry()]; geometrys[0].setAttribute( "position", new THREE.BufferAttribute(getRandomParticelPos(350), 3) ); geometrys[1].setAttribute( "position", new THREE.BufferAttribute(getRandomParticelPos(1500), 3) ); const loader = new THREE.TextureLoader(); // material const materials = [ new THREE.PointsMaterial({ size: 0.05, map: loader.load(sp1), transparent: true // color: "#ff0000" }), new THREE.PointsMaterial({ size: 0.075, map: loader.load(sp2), transparent: true // color: "#0000ff" }) ]; const starsT1 = new THREE.Points(geometrys[0], materials[0]); const starsT2 = new THREE.Points(geometrys[1], materials[1]); scene.add(starsT1); scene.add(starsT2); const render = (time) => { time *= 0.001; //in seconds if (resizeRendererToDisplaySize(renderer)) { const canvas = renderer.domElement; // changing the camera aspect to remove the strechy problem camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } starsT1.position.x = mouseX * 0.0001; starsT1.position.y = mouseY * -0.0001; starsT2.position.x = mouseX * 0.0001; starsT2.position.y = mouseY * -0.0001; // render the scene renderer.render(scene, camera); // loop requestAnimationFrame(render); }; requestAnimationFrame(render); }; main();