# Jhun Kusano \[personal page\]

**URL:** <https://discourse.threejs.org/t/jhun-kusano-personal-page/25091>\
**Category:** Showcase\
**Tags:** portfolio-website\
**Created:** [April 6, 2021, 6:24am UTC](https://discourse.threejs.org/t/jhun-kusano-personal-page/25091 "2021-04-06T06:24:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jhun](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jhun/32/17501_2.png) [@jhun](https://discourse.threejs.org/u/jhun)\
**Post date:** [April 6, 2021, 6:24am UTC](https://discourse.threejs.org/t/jhun-kusano-personal-page/25091/1 "2021-04-06T06:24:07Z")

</div>

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

> **[Jhun Kusano](https://jhun.com.br/)**
>
> Jhun Kusano - Creative Developer

---

<div class="post-metadata">

**Author:** ![Peter\_Devine](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/peter_devine/32/11301_2.png) [@Peter\_Devine](https://discourse.threejs.org/u/Peter_Devine)\
**Post date:** [April 6, 2021, 7:17am UTC](https://discourse.threejs.org/t/jhun-kusano-personal-page/25091/2 "2021-04-06T07:17:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jhun](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jhun/32/17501_2.png) [@jhun](https://discourse.threejs.org/u/jhun)\
**Post date:** [April 6, 2021, 1:21pm UTC](https://discourse.threejs.org/t/jhun-kusano-personal-page/25091/3 "2021-04-06T13:21:26Z")

</div>

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.](https://github.com/dataarts/3-dreams-of-black)) 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!

[]

---

<div class="post-metadata">

**Author:** ![threejsman](https://avatars.discourse-cdn.com/v4/letter/t/7ba0ec/32.png) [@threejsman](https://discourse.threejs.org/u/threejsman)\
**Post date:** [April 7, 2021, 8:52pm UTC](https://discourse.threejs.org/t/jhun-kusano-personal-page/25091/4 "2021-04-07T20:52:52Z")

</div>

Well done.

---

<div class="post-metadata">

**Author:** ![jhun](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jhun/32/17501_2.png) [@jhun](https://discourse.threejs.org/u/jhun)\
**Post date:** [April 7, 2021, 9:18pm UTC](https://discourse.threejs.org/t/jhun-kusano-personal-page/25091/5 "2021-04-07T21:18:07Z")

</div>

Thank you, @threejsman

---

<div class="post-metadata">

**Author:** ![alwxkxk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alwxkxk/32/6221_2.png) [@alwxkxk](https://discourse.threejs.org/u/alwxkxk)\
**Post date:** [April 13, 2021, 3:51am UTC](https://discourse.threejs.org/t/jhun-kusano-personal-page/25091/6 "2021-04-13T03:51:03Z")

</div>

Very nice!

---

<div class="post-metadata">

**Author:** ![jhun](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jhun/32/17501_2.png) [@jhun](https://discourse.threejs.org/u/jhun)\
**Post date:** [April 14, 2021, 7:51pm UTC](https://discourse.threejs.org/t/jhun-kusano-personal-page/25091/7 "2021-04-14T19:51:38Z")

</div>

@alwxkxk, thank you! 🙏

---

<div class="post-metadata">

**Author:** ![alex-shortt](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alex-shortt/32/13475_2.png) [@alex-shortt](https://discourse.threejs.org/u/alex-shortt)\
**Post date:** [April 15, 2021, 1:41am UTC](https://discourse.threejs.org/t/jhun-kusano-personal-page/25091/8 "2021-04-15T01:41:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jhun](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jhun/32/17501_2.png) [@jhun](https://discourse.threejs.org/u/jhun)\
**Post date:** [April 16, 2021, 8:07pm UTC](https://discourse.threejs.org/t/jhun-kusano-personal-page/25091/9 "2021-04-16T20:07:47Z")

</div>

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:

```javascript
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;

  }

}
```