Samin Sami Human Futuristic

by Samin Sami

HTML

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.159.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/"
    }
  }
</script>
<div class="writing back unselectable">SAMIN SAMI</div>
<div class="writing front unselectable">SAMIN SAMI</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap');
body{
  overflow: hidden;
  margin: 0;
  background-color: #000;
}

.writing{
  font-family: 'Orbitron', sans-serif;
  font-size: 15vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.back {
  color: white;
  z-index: -1;
}
.front {
  color: transparent;
  -webkit-text-stroke: 0.5vh white;
  z-index: 2;
  pointer-events: none;
}
canvas{
  z-index: 1;
}

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

JavaScript

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { SimplexNoise } from "three/addons/math/SimplexNoise.js";

console.clear();

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
  45 * 0.4,
  innerWidth / innerHeight,
  1,
  1000
);
camera.position.set(1, -5, 8).setLength(21);
let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x000000, 0);

document.body.appendChild(renderer.domElement);

window.addEventListener("resize", (event) => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;
controls.autoRotate = true;
controls.minDistance = controls.getDistance();
controls.maxDistance = controls.getDistance();

let gu = {
  time: { value: 0 }
};

let loader = new GLTFLoader();
let model = (
  await loader.loadAsync(
    "https://threejs.org/examples/models/gltf/LeePerrySmith/LeePerrySmith.glb"
  )
).scene.children[0];
model.position.y = -0.75;

let box = new THREE.Box3().setFromBufferAttribute(
  model.geometry.attributes.position
);
let size = new THREE.Vector3();
box.getSize(size);

let presets = {
  transitionLevel: {value: 0.5},
  black: {value: (() => {
    let c = document.createElement("canvas");
    c.width = 1024;
    c.height = 1024;
    let ctx = c.getContext("2d");

    let unit = (val) => val * c.height * 0.01;

    ctx.fillStyle = "#222222";
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.lineCap = "round";

    ctx.strokeStyle = "#ddd";
    ctx.filter = `blur(${unit(0.5)}px)`;

    let rows = 8;
    let cols = 4;
    let colFactor = 0.75;
    let...