3D Cube Black Metal Animation ThreeJS Bookmarklet

metalcube.md

3D Cube Black Metal Animation

a ThreeJS Bookmarklet

Dynamically load Three.js library and construct a cool 3D cube, make it rotate, and inject into a website. I don't know why you'd want to but it's really none of my business. Working on some things tonight I found a cube inject I did a couple months ago actually because the preview panel look blank i thought it was a broken gist i should fix or delete, but i saw the code, ran it and though a functional injection it was needing a few things namely color sceheme and transparency. Made some fixes, they work, and now it's ready to go in a project. Don't recall what led to makign the original, but replacing the pill icon in my terminal web app that serves as a minimize maximize might be what i was thinking for this. Then of course theres the adcube3d project I did a decade ago but there's some limitations that make it not ideal for that. For now though it'll sit here. In between other stuff and here it is as a bookmarklet I usually have multiple uses for things but this is just a toy maybe years from now i'll have a use for it randomly come up.

script

highlight and select then cop and paste into bookmark bar, name it whatever but make sure the url starts with javascript: and ends with ();

javascript:(function () {
  var s = document.createElement("script");
  s.src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js";
  document.body.appendChild(s);
  s.onload = function () {
    /*canvas*/
    var overlay = document.createElement("div");
    overlay.style.position = "fixed";
    overlay.style.top = "10px";
    overlay.style.right = "10px";
    overlay.style.width = "150px";
    overlay.style.height = "150px";
    overlay.style.pointerEvents = "none"; /* allow click through the cube*/
    document.body.appendChild(overlay);

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
    camera.position.z = 3;

    var renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(150, 150);
    overlay.appendChild(renderer.domElement);

    // Cube with metallic chrome effect
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshStandardMaterial({
      color: 0xffffff,
      metalness: 1,
      roughness: 0.3
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    /*define cube borders*/ 
    var edges = new THREE.EdgesGeometry(geometry);
    var lineMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
    var wireframe = new THREE.LineSegments(edges, lineMaterial);
    cube.add(wireframe);

    /*cube color*/
    var light = new THREE.PointLight(0xffffff, 1, 100);
    light.position.set(5, 5, 5);
    scene.add(light);

    var animate = function () {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };

    animate();
  };
})();

bigger

javascript: (function () {
  var s = document.createElement("script");
  s.src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js";
  document.body.appendChild(s);
  s.onload = function () {
    /*canvas*/
    var overlay = document.createElement("div");
    overlay.style.position = "fixed";
    overlay.style.top = "100px";
    overlay.style.left = "100px";
    overlay.style.width = "350px";
    overlay.style.height = "350px";
    /*click passthrough*/
    overlay.style.pointerEvents = "none";
    document.body.appendChild(overlay);

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
    camera.position.z = 3;

    var renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(350, 350);
    overlay.appendChild(renderer.domElement);

    // Cube with metallic chrome effect
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshStandardMaterial({
      color: 0xffffff,
      metalness: 1,
      roughness: 0.3
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    /*define cube borders*/
    var edges = new THREE.EdgesGeometry(geometry);
    var lineMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
    var wireframe = new THREE.LineSegments(edges, lineMaterial);
    cube.add(wireframe);

    /*cube color*/
    var light = new THREE.PointLight(0xffffff, 1, 100);
    light.position.set(5, 5, 5);
    scene.add(light);

    var animate = function () {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };

    animate();
  };
})();