|
|
@@ -0,0 +1,61 @@
|
|
|
+<!-- Licensed under a BSD license. See license.html for license -->
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
|
|
+ <title>Three.js - Fundamentals with animation</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <canvas id="c"></canvas>
|
|
|
+ </body>
|
|
|
+<script src="resources/threejs/r93/three.min.js"></script>
|
|
|
+<script src="resources/threejs-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
|
|
|
+<script>
|
|
|
+'use strict';
|
|
|
+
|
|
|
+function main() {
|
|
|
+ const canvas = document.querySelector('#c');
|
|
|
+ const renderer = new THREE.WebGLRenderer({canvas: canvas});
|
|
|
+
|
|
|
+ const fov = 75;
|
|
|
+ const aspect = 2; // the canvas default
|
|
|
+ const zNear = 0.1;
|
|
|
+ const zFar = 5;
|
|
|
+ const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
|
|
|
+ camera.position.z = 2;
|
|
|
+
|
|
|
+ const scene = new THREE.Scene();
|
|
|
+
|
|
|
+ const light = new THREE.DirectionalLight(0xffffff, 1);
|
|
|
+ light.position.set(-1, 2, 4);
|
|
|
+ scene.add(light);
|
|
|
+
|
|
|
+ const boxWidth = 1;
|
|
|
+ const boxHeight = 1;
|
|
|
+ const boxDepth = 1;
|
|
|
+ const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
|
|
|
+
|
|
|
+ const material = new THREE.MeshPhongMaterial({color: 0x44aa88}); // greenish blue
|
|
|
+
|
|
|
+ const cube = new THREE.Mesh(geometry, material);
|
|
|
+ scene.add(cube);
|
|
|
+
|
|
|
+ function render(time) {
|
|
|
+ time *= 0.001; // convert time to seconds
|
|
|
+
|
|
|
+ cube.rotation.x = time;
|
|
|
+ cube.rotation.y = time;
|
|
|
+
|
|
|
+ renderer.render(scene, camera);
|
|
|
+
|
|
|
+ requestAnimationFrame(render);
|
|
|
+ }
|
|
|
+ requestAnimationFrame(render);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+main();
|
|
|
+</script>
|
|
|
+</html>
|
|
|
+
|
Gregg Tavares