62

No notes defined.

<div class="basic-canvas-centering">
    <canvas id="canvas" width="711" height="400"></canvas>
</div>
<script src="../../js/libs/three.r88.js"></script>
<script src="../../js/libs/utils.js"></script>
<script src="../../js/components/62.js"></script>
/* No context defined. */
  • Content:
    (function() {
      document.addEventListener('DOMContentLoaded', function() {
        console.log("hello let us begin using threejs as well");
    
        var renderer = null;
        var scene = null;
        var camera = null;
        var cube = null;
        var lightCube = null;
        var lightCubeAlt = null;
        var lightCubeSwoop = null;
    
        var duration = 10000; // ms
        var currentTime = Date.now();
    
        var lightAngleX = 0;
        var lightAngleY = 0;
    
        var otherLightAngleX = Math.PI;
        var otherLightAngleY = Math.PI;
    
        function animate() {
          // Animate the cube
          var now = Date.now();
          var deltat = now - currentTime;
          currentTime = now;
          var fract = deltat / duration;
          var angle = Math.PI * 2 * fract;
          cube.rotation.x += angle;
          // cube.rotation.y += angle;
          cube.rotation.z += angle;
    
          // Animate the light
          var lightX = Math.sin(lightAngleX) * 2;
          var lightY = Math.sin(lightAngleY);
    
          var otherLightX = Math.sin(otherLightAngleX) * 2;
          var otherLightY = Math.sin(otherLightAngleY);
    
          light.position.set(lightX, lightY, -2);
          otherLight.position.set(otherLightX, otherLightY, -2);
    
          // lightCube.position.set(lightX, 1, -3);
          // lightCubeAlt.position.set(lightX, -1, -3);
          // lightCubeSwoop.position.set(lightX, lightY, -3);
    
          lightAngleX += 0.01;
          lightAngleY += 0.03;
          otherLightAngleX += 0.01;
          otherLightAngleY += 0.06;
        }
    
        function run() {
          requestAnimationFrame(run);
    
          // Render the scene
          renderer.render( scene, camera );
    
          // Spin the cube for next frame
          animate();
        }
    
    
        var canvas = document.getElementById('canvas');
    
        // Create the Three.js renderer and attach it to our canvas
        renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
    
        // Set the viewport size
        renderer.setSize(canvas.width, canvas.height);
    
        // Create a new Three.js scene
        scene = new THREE.Scene();
    
        // Add  a camera so we can view the scene
        camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 );
        scene.add(camera);
    
        // Add a directional light to show off the object
        var light = new THREE.PointLight(0x00ff00, 1, 100);
    
        // Position the light out from the scene, pointing at the origin
        light.position.set(0, 0, 0);
        scene.add( light );
    
        // Add a directional light to show off the object
        var otherLight = new THREE.PointLight(0x0000ff, 1, 100);
    
        // Position the light out from the scene, pointing at the origin
        otherLight.position.set(0, 0, 0);
        scene.add( otherLight );
    
        // Now, create a Phong material to show shading
        var material = new THREE.MeshPhongMaterial({ 
          color: 0xffffff
        });
    
        var materialAlt = new THREE.MeshPhongMaterial({ 
          color: 0x00ff00
        });
    
        var materialSwoop = new THREE.MeshPhongMaterial({ 
          color: 0xffffff
        });
    
        // Create the cube geometry
        var geometry = new THREE.CubeGeometry(4, 4, 4);
    
        // And put the geometry and material together into a mesh
        cube = new THREE.Mesh(geometry, material);
    
        // Move the mesh back from the camera and tilt it toward the viewer
        cube.position.z = -8;
        cube.rotation.x = Math.PI / 5;
        cube.rotation.y = Math.PI / 5;
    
        // Finally, add the mesh to our scene
        scene.add( cube );
    
        // Light point mesh
        // var lightGeometry = new THREE.CubeGeometry(0.1, 0.1, 0.1);
        // lightCube = new THREE.Mesh(lightGeometry, materialAlt);
        // lightCube.position.z = -4;
    
        // lightCubeAlt = new THREE.Mesh(lightGeometry, materialAlt);
        // lightCubeAlt.position.z = -4;
    
        // var lightSwoopGeometry = new THREE.CubeGeometry(0.05, 0.05, 0.05);
        // lightCubeSwoop = new THREE.Mesh(lightSwoopGeometry, materialSwoop);
        // lightCubeSwoop.position.z = -4;
    
        // scene.add(lightCube);
        // scene.add(lightCubeAlt);
        // scene.add(lightCubeSwoop);
    
        // Run the run loop
        run();
    
    
    
    
        // // Common
        // var canvas = document.getElementById('canvas');
        // var ctx = canvas.getContext('2d');
    
        // var mouse = utils.captureMouse(canvas);
    
        // // Other code
    
        // // Draw loop
        // function drawFrame() {
        //   requestAnimationFrame(drawFrame, ctx);
        //   ctx.clearRect(0, 0, canvas.width, canvas.height);
    
        //   // code
        // }
    
        // drawFrame();
    
      });
    }());
    
  • URL: /components/raw/62/62.js
  • Filesystem Path: components/01-setup/01-warmups/62/62.js
  • Size: 4.4 KB