Jhun Kusano [personal page]

Showcase
1

My personal website, created using Three.js.
Some credits on the left corner of the webpage.
Thank you all.

16 Likes
2

Very nice! I think people here will recognise a lot of the assets :wink:
The execution is very slick, well done!

2 Likes
3

Thank you, @Peter_Devine !

Awesome assets by the way! :joy: 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!

[]

1 Like
4

Well done.

1 Like
5

Thank you, @threejsman

6

Very nice!

1 Like
7

@alwxkxk, thank you! :pray:

8

really nice! what did you use for the ambient particles?

1 Like
9

Thank you, @alex-shortt !
I just used Points with a particle .png image in PontsMaterial. Very simple. :rofl:
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;

  }

}
3 Likes