From introtowebgl on nodeschool excercise 2 it wants you to create a little animation moving the camera closer to the cube so I made one which goes in and out, in and out for as long as your looking at that tab.
Created
August 12, 2014 01:36
-
-
Save mpmckenna8/2be77a4a0385694f7cda to your computer and use it in GitHub Desktop.
Zooming w/ camera three.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // doing the example from the Docs to learn | |
| var scene = new THREE.Scene(); | |
| var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000); | |
| var renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| // tried this a little different from the example in docs | |
| document.getElementById("webgl-container").appendChild(renderer.domElement); | |
| var geometry = new THREE.BoxGeometry(1,1,1); | |
| var material = new THREE.MeshBasicMaterial({color:0x00ff20}); | |
| var cube = new THREE.Mesh(geometry,material); | |
| console.log(cube.rotation); | |
| scene.add(cube); | |
| camera.position.z = 5; | |
| var degrees = 45; | |
| cube.rotation.y = degrees * (Math.PI/180); | |
| cube.rotation.z = degrees * (Math.PI/180); | |
| function render (){ | |
| requestAnimationFrame(render); | |
| camin(); | |
| renderer.render(scene,camera); | |
| } | |
| render(); | |
| var campo= true; | |
| function camin(){ | |
| if(campo==true){ | |
| if(camera.position.z>2){ | |
| camera.position.z-=.01; | |
| } | |
| else { | |
| campo = false; | |
| camout() | |
| } | |
| } | |
| else if(campo==false){ | |
| camout(); | |
| console.log(camera.position.z); | |
| } | |
| } | |
| function camout(){ | |
| if(camera.position.z<6){ | |
| camera.position.z+=.1; | |
| console.log('going out') | |
| } | |
| else{ | |
| campo=true; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Intro to WebGL with three.js</title> | |
| </head> | |
| <body> | |
| <div id="webgl-container"></div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"></script> | |
| <script src="camzoom.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment