I am currently working on creating a space warp particle effect using Three.js, but I encountered an issue. The particles that are being created appear cubical in shape, however, I want them to be spherical. I tried loading a circle png and mapping it to the particle material, but it didn't produce the desired result.
function init() {
const renderer = new THREE.WebGLRenderer({
antialias: true,
});
renderer.setSize(innerWidth, innerHeight);
const app = document.getElementById("app");
app.appendChild(renderer.domElement);
// set up camera
const camera = new THREE.PerspectiveCamera(
60,
innerWidth / innerHeight,
1,
1000
);
camera.position.set(0, 0, 1);
camera.rotation.x = Math.PI / 2;
const scene = new THREE.Scene();
const starGeo = new THREE.BufferGeometry();
const starCount = 6000;
const vertices = new window.Float32Array(starCount * 3);
starGeo.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const starsArr = [];
for (let i = 0; i < starCount * 3; i += 3) {
vertices[i] = Math.random() * 600 - 300;
vertices[i + 1] = Math.random() * 600 - 300;
vertices[i + 2] = Math.random() * 600 - 300;
if (i % 3 === 0) {
starsArr.push({
velocity: 0,
acceleration: 0.02,
});
}
}
starGeo.attributes.position.stars = starsArr;
// link to yellow circle
const starTexture = new THREE.TextureLoader().load("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHU59FFoWzbzpl_37EPznha05psUWXZJqeXDK_57OXhRCuB6IYMamNujWbewVL4CAYuMM&usqp=CAU");
// using white circle does nothing, gives blank screen, even while using local image
/* const starTexture = new THREE.TextureLoader().load("https://toppng.com/uploads/preview/white-circle-png-new-moon-phase-drawi-11563654400bdrw3yigxk.png");*/
const material = new THREE.PointsMaterial({
size: 5,
map: starTexture,
transparent: true,
});
const stars = new THREE.Points(starGeo, material);
scene.add(stars);
window.addEventListener("resize", () => {
renderer.setSize(innerWidth, innerHeight);
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix()
});
animate();
function update() {
const position = starGeo.getAttribute("position");
const { array } = position;
for (let i = 1; i < array.length; i += 3) {
const _i = parseInt(i);
const j = Math.floor((_i - 1) / 3);
position.stars[j].velocity += position.stars[j].acceleration;
array[i] -= position.stars[j].velocity;
if (array[i] < -200) {
array[i] = 200;
position.stars[j].velocity = 0;
}
}
stars.rotation.y += 0.01;
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
// update();
starGeo.getAttribute("position").needsUpdate = true;
}
}
init();*{
box-sizing: border-box;
}
body{
margin: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</body>
</html>I have also shared the codepen related to this issue here > https://codepen.io/exxnnonymous/pen/rNJyYwx