Spooky Jack-o-Lantern (WIP)

In this example below you will see how to do a Spooky Jack-o-Lantern (WIP) with some HTML / CSS and Javascript

Spooky Jack-o-Lantern in 3D (Work in Progress)

Thumbnail
This awesome code was written by enesser, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright enesser ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Spooky Jack-o-Lantern (WIP)</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas class="world" height="100%" width="100%"></canvas>
  <script src='http://threejs.org/build/three.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/168282/OrbitControls.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/168282/gltfloader.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/enesser/spooky-jack-o-lantern-wip-VrLLdj */
body { 
  background: rgba(0, 0, 0, .94);
  overflow: hidden;
}


/*Downloaded from https://www.codeseek.co/enesser/spooky-jack-o-lantern-wip-VrLLdj */
(function () {

  // constants
  var stemColor = "#719D95",
      outerSkinColor = "#FFB75C",
      rotateVelocity = 0.0005;

  // scene globals 
  var group = new THREE.Object3D(),
      pointLight = void 0;

  // load stage
  function loadStage(canvasElement) {
    var camera = void 0,
        hemiLight = void 0,
        directLight = void 0,
        controls = void 0,
        scene = void 0,
        renderer = void 0;

    // init stage before animation
    (function init() {
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);

      // setup scene w/ fog
      scene = new THREE.Scene();
      scene.fog = new THREE.Fog(0xff0000, 0.015, 100);

      // load model 
      var loader = new THREE.GLTFLoader();
      loader.load("//s3-us-west-2.amazonaws.com/s.cdpn.io/168282/pumpkin-e2.gltf", function (data) {

        // place model in scene
        var object = data.scene.children[0];
        object.position.set(0, -0.3, 0);
        object.scale.set(0.1, 0.1, 0.1);

        // color model shaders
        object.traverse(function (node) {
          if (node.material) {
            switch (node.material.name) {
              case "OuterSkin":
                node.material.color.setStyle(outerSkinColor);
                break;

              case "Stem":
                node.material.color.setStyle(stemColor);
                break;
            }
          }
        });
        group.add(object);
      }, function (err) {
        console.log(err);
      });

      // init renderer
      renderer = new THREE.WebGLRenderer({
        canvas: canvasElement,
        antialias: true,
        alpha: true
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);

      // init orbit controls
      controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.target.set(0, 0, 0);
      controls.update();

      // scale scene to window size
      window.addEventListener("resize", function () {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      }, false);

      // lighting
      hemiLight = new THREE.HemisphereLight(0x873030, 0x161616, 1.0);
      hemiLight.position.set(0, 1, 0);
      scene.add(hemiLight);

      directLight = new THREE.DirectionalLight(0x313131, 4);
      directLight.position.set(0, 0, 10);
      scene.add(directLight);

      pointLight = new THREE.PointLight(0xbc7227, 2);
      pointLight.position.set(0, 0.2, 0);
      scene.add(pointLight);

      // setup camera
      camera.position.set(-2.017011636143573, 1.075175246819159, 1.5351056801587806);

      camera.rotation.set(-0.5098786436590462, -0.8637494004968557, -0.4019977474590366);

      scene.add(group);
      animate();
    })();

    // animation 
    function animate() {
      requestAnimationFrame(animate);

      if (group) {
        group.rotation.y -= rotateVelocity;
      }

      controls.update();

      // flicker inner light
      if (Math.random() * 9 > 4.5) {
        pointLight.intensity -= Math.random() * 0.04 + 0.04;
      } else {
        pointLight.intensity += Math.random() * 0.04 + 0.04;
      }

      if (pointLight.intensity < -2.0 || pointLight.intensity > 4.0) {
        pointLight.intensity = 2.0;
      }

      render();
    }

    function render() {
      renderer.render(scene, camera);
    }
  }

  loadStage(document.querySelector(".world"));
})();

Comments