My personal website, created using Three.js.
Some credits on the left corner of the webpage.
Thank you all.
Very nice! I think people here will recognise a lot of the assets
The execution is very slick, well done!
Thank you, @Peter_Devine !
Awesome assets by the way! I take this opportunity to thank the authors of 3 Dreams of Black(GitHub - dataarts/3-dreams-of-black: Source for the 3 Dreams of Black Interactive Film.) and all three.js contributors.
I tried to value the movements of the animations, programming some effects within the context of the created scene.
I’m glad you liked! Thanks for the feedback!
[]
Well done.
Thank you, @threejsman
Very nice!
@alwxkxk, thank you!
really nice! what did you use for the ambient particles?
Thank you, @alex-shortt !
I just used Points with a particle .png image in PontsMaterial. Very simple.
I just spread them out randomly in a certain area, based on an axis in the center of the scene. Then just animate by rotating them.
This is the class I made for the job:
import * as THREE from "three";
import particle from "../../imagens/particle.png";
import { FrontSide } from "three";
export default class ParticlesEnvironment {
constructor(particlesLength, scene) {
this.scene = scene;
this.materials = [];
this.particlesLength = particlesLength;
this.geometry = new THREE.BufferGeometry();
this.vertices = [];
this.sprite1 = new THREE.TextureLoader().load(particle);
for (var i = 0; i < this.particlesLength; i++) {
var x = this.randomFloatFromInterval(-50, 50);
var y = this.randomFloatFromInterval(0, 35);
var z = this.randomFloatFromInterval(-40, 10);
this.vertices.push(x, y, z);
}
this.geometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(this.vertices, 3)
);
this.parameters = [
[[22, 0.1, 0.3], this.sprite1, 0.34],
[[22, 0.1, 0.3], this.sprite1, 0.308],
[[22, 0.1, 0.3], this.sprite1, 0.266],
[[22, 0.1, 0.3], this.sprite1, 0.244],
[[22, 0.1, 0.3], this.sprite1, 0.202],
];
for (var i = 0; i < this.parameters.length; i++) {
var color = this.parameters[i][0];
var sprite = this.parameters[i][1];
var size = this.parameters[i][2];
this.materials[i] = new THREE.PointsMaterial({
size: size,
map: sprite,
blending: THREE.AdditiveBlending,
depthTest: false,
transparent: true,
side: FrontSide,
});
this.materials[i].color.setHSL(color[0], color[1], color[2]);
var particles = new THREE.Points(this.geometry, this.materials[i]);
particles.rotation.x = Math.random() * Math.PI;
particles.rotation.y = Math.random() * Math.PI;
particles.rotation.z = Math.random() * Math.PI;
this.scene.add(particles);
}
}
updateParticles() {
var time = Date.now() * 0.00005;
for (var i = 0; i < this.scene.children.length; i++) {
var object = this.scene.children[i];
if (object instanceof THREE.Points) {
object.rotation.y = 2 * time * (i < 4 ? i + 1 : -(i + 1));
object.rotation.x = 1 * (time * (i < 4 ? i + 1 : -(i + 1)));
}
}
}
randomFloatFromInterval(min, max) {
return Math.random() * (max - min) + min;
}
}