WebGL particle head

index.markdown

WebGL head made of particles

script.js

import * as particulate from "https://cdn.skypack.dev/particulate@0.3.3";
var site = site || {};
site.window = $(window);
site.document = $(document);
site.Width = site.window.width();
site.Height = site.window.height();

var Background = function () {};

Background.headparticle = function () {
  if (!Modernizr.webgl) {
    alert("Your browser dosent support WebGL");
  }

  var camera, scene, renderer;
  var mouseX = 0,
    mouseY = 0;
  var p;

  var windowHalfX = site.Width / 2;
  var windowHalfY = site.Height / 2;

  Background.camera = new THREE.PerspectiveCamera(
    35,
    site.Width / site.Height,
    1,
    2000
  );
  Background.camera.position.z = 300;

  // scene
  Background.scene = new THREE.Scene();

  // texture
  var manager = new THREE.LoadingManager();
  manager.onProgress = function (item, loaded, total) {
    //console.log('webgl, twice??');
    //console.log( item, loaded, total );
  };

  // particles
  var p_geom = new THREE.Geometry();
  var p_material = new THREE.ParticleBasicMaterial({
    color: 0xffffff,
    size: 1.5
  });

  // model
  var loader = new THREE.OBJLoader(manager);
  loader.load(
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/head.obj",
    function (object) {
      object.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
          // child.material.map = texture;

          var scale = 8;

          $(child.geometry.vertices).each(function () {
            p_geom.vertices.push(
              new THREE.Vector3(this.x * scale, this.y * scale, this.z * scale)
            );
          });
        }
      });

      Background.scene.add(p);
    }
  );

  p = new THREE.ParticleSystem(p_geom, p_material);

  Background.renderer = new THREE.WebGLRenderer({ alpha: true });
  Background.renderer.setSize(site.Width, site.Height);
  Background.renderer.setClearColor(0x000000, 0);

  $(".particlehead").append(Background.renderer.domElement);
  $(".particlehead").on("mousemove", onDocumentMouseMove);
  site.window.on("resize", onWindowResize);

  function onWindowResize() {
    windowHalfX = site.Width / 2;
    windowHalfY = site.Height / 2;
    //console.log(windowHalfX);

    Background.camera.aspect = site.Width / site.Height;
    Background.camera.updateProjectionMatrix();

    Background.renderer.setSize(site.Width, site.Height);
  }

  function onDocumentMouseMove(event) {
    mouseX = (event.clientX - windowHalfX) / 2;
    mouseY = (event.clientY - windowHalfY) / 2;
  }

  Background.animate = function () {
    Background.ticker = TweenMax.ticker;
    Background.ticker.addEventListener("tick", Background.animate);

    render();
  };

  function render() {
    Background.camera.position.x +=
      (mouseX * 0.5 - Background.camera.position.x) * 0.05;
    Background.camera.position.y +=
      (-(mouseY * 0.5) - Background.camera.position.y) * 0.05;

    Background.camera.lookAt(Background.scene.position);

    Background.renderer.render(Background.scene, Background.camera);
  }

  render();

  Background.animate();
};

Background.headparticle();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/OBJLoader.js"></script>

style.css

.particlehead {
  background: #abe1fd;
}

h1 {
  font-size: 31px;
  color: #202022;
  font-family: Montserrat, sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  text-transform: uppercase;
  font-weight: normal;
  margin-left: -264px;
  margin-top: -20px;
  pointer-events: none;
}

h1 strong {
  font-weight: 700;
}

h1 em {
  font-family: 'Playfair Display', serif;
  text-transform: lowercase;
  font-style: italic;
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400italic" rel="stylesheet" />

webgl-particle-head.markdown

WebGL particle head

WebGL particle head for a clients website. See the full result on fremtidenshoder.no. Made with three.js

A Pen by ThreePointSquare on CodePen.

License.