canvas = html`<canvas class="webgl"></canvas>`
{
const baseUrl =
"https://bumbeishvili.github.io/threejs-journey-particles-18/";
/**
* Base
*/
// Debug
// Canvas
const canvas = document.querySelector("canvas.webgl");
// Scene
const scene = new THREE.Scene();
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader();
/**
* Particles
*/
const particlesGeometry = new THREE.BufferGeometry();
const count = 10000;
const positions = new Float32Array(count * 3);
const colors = new Float32Array(count * 3);
for (let i = 0; i < count * 3; i++) {
positions[i] = (Math.random() - 0.5) * 10;
colors[i] = Math.random();
}
particlesGeometry.setAttribute(
"position",
new THREE.BufferAttribute(positions, 3)
);
particlesGeometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
const particlesMaterial = new THREE.PointsMaterial({
size: 0.1,
sizeAttenuation: true
});
const points = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(points);
/* Textures
*
*/
//const particleTexture = textureLoader.load('textures/particles/1.png')
const particleTexture = textureLoader.load(
baseUrl + "textures/particles/2.png"
);
//const particleTexture = textureLoader.load('textures/particles/3.png')
// const particleTexture = textureLoader.load('textures/particles/4.png')
//const particleTexture = textureLoader.load('textures/particles/5.png')
// const particleTexture = textureLoader.load('textures/particles/6.png')
// const particleTexture = textureLoader.load('textures/particles/7.png')
//const particleTexture = textureLoader.load('textures/particles/8.png')
//const particleTexture = textureLoader.load('textures/particles/9.png')
// const particleTexture = textureLoader.load('textures/particles/10.png')
particlesMaterial.transparent = true;
particlesMaterial.alphaMap = particleTexture;
// particlesMaterial.alphaTest = 0.01;
// particlesMaterial.depthTest = false;
particlesMaterial.depthWrite = false;
particlesMaterial.blending = THREE.AdditiveBlending;
particlesMaterial.vertexColors = true;
// const cube = new THREE.Mesh(
// new THREE.BoxGeometry(1, 1, 1),
// new THREE.MeshBasicMaterial({ })
// )
// scene.add(cube)
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
};
sizes.width = width;
sizes.height = 900;
window.addEventListener("resize", () => {
// Update sizes
sizes.width = width;
sizes.height = 900;
// Update camera
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
// Update renderer
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setClearColor("#080914");
});
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(
75,
sizes.width / sizes.height,
0.1,
100
);
camera.position.z = 3;
scene.add(camera);
// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
/**
* Animate
*/
const clock = new THREE.Clock();
const tick = () => {
const elapsedTime = clock.getElapsedTime();
// points.rotation.y = elapsedTime * 0.2;
for (let i = 0; i < count; i++) {
const i3 = i * 3;
const x = particlesGeometry.attributes.position.array[i3 + 0];
const y = particlesGeometry.attributes.position.array[i3 + 2];
particlesGeometry.attributes.position.array[i3 + 1] =
Math.sin(elapsedTime + x) * 0.5 + Math.sin(elapsedTime + y) * 0.5;
}
particlesGeometry.attributes.position.needsUpdate = true;
// Update controls
controls.update();
// Render
renderer.render(scene, camera);
// Call tick again on the next frame
window.requestAnimationFrame(tick);
};
tick();
console.log("UUID", THREE.MathUtils.generateUUID());
console.log("lerp", THREE.MathUtils.lerp(1, 2, 0.5));
console.log("ceilPowerOfTwo", THREE.MathUtils.ceilPowerOfTwo(9));
console.log("floorPowerOfTwo", THREE.MathUtils.floorPowerOfTwo(9));
console.log("randFloat", THREE.MathUtils.randFloat(10, 100));
console.log("randInt", THREE.MathUtils.randInt(10, 100));
console.log("seededRandom", THREE.MathUtils.seededRandom(5));
controls.autoRotate = true;
}
THREE = {
const THREE = (window.THREE = await require("three@0.137.5/build/three.min.js"));
await require("three@0.137.5/examples/js/controls/OrbitControls.js").catch(
() => {}
);
return window.THREE;
}
OrbitControls = THREE.OrbitControls
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.