Created
February 9, 2014 17:46
-
-
Save tkojitu/8902883 to your computer and use it in GitHub Desktop.
This file contains hidden or 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>Rotate Cube</title> | |
| <style> | |
| </style> | |
| <script type="text/javascript" src="../libs/three.js"></script> | |
| <script type="text/javascript" src="rotate-cube.js"></script> | |
| <style> | |
| body{ | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| #slider{ | |
| -webkit-appearance: none; | |
| width: 100%; | |
| background-color: gray; | |
| } | |
| #slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 50px; | |
| border-radius: 10%; | |
| background: lightGray; | |
| } | |
| </style> | |
| </head> | |
| <body onload="onLoad()"> | |
| <div id="myOutput"></div> | |
| <form> | |
| <input type="range" id="slider" min="-100" max="100"> | |
| </form> | |
| </body> | |
| </html> |
This file contains hidden or 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
| function onLoad() { | |
| var camera; | |
| var cube; | |
| var renderer; | |
| var scene; | |
| function setupOutput() { | |
| renderer = newRenderer(); | |
| var output = document.getElementById("myOutput"); | |
| output.appendChild(renderer.domElement); | |
| scene = newScene(); | |
| camera = newCamera(scene.position); | |
| renderer.render(scene, camera); | |
| } | |
| function newRenderer() { | |
| var renderer = new THREE.WebGLRenderer(); | |
| renderer.setClearColorHex(0xEEEEEE, 1.0); | |
| var size = getRendererSize(); | |
| renderer.setSize(size.width, size.height); | |
| renderer.shadowMapEnabled = true; | |
| return renderer; | |
| } | |
| function getRendererSize() { | |
| var sliderSize = getSliderSize(); | |
| return { | |
| width: window.innerWidth | |
| ,height: window.innerHeight - sliderSize.height - 5 | |
| }; | |
| } | |
| function getSliderSize() { | |
| var slider = document.getElementById("slider"); | |
| return { | |
| width: slider.clientWidth | |
| ,height: slider.clientHeight | |
| }; | |
| } | |
| function newScene() { | |
| var scene = new THREE.Scene(); | |
| cube = newCube(); | |
| scene.add(cube); | |
| var light = newLight(); | |
| scene.add(light); | |
| return scene; | |
| } | |
| function newCube() { | |
| var cubeGeometry = new THREE.CubeGeometry(4, 4, 4); | |
| var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000}); | |
| var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); | |
| cube.castShadow = true; | |
| cube.position.x = -4; | |
| cube.position.y = 3; | |
| cube.position.z = 0; | |
| return cube; | |
| } | |
| function newLight() { | |
| var spotLight = new THREE.SpotLight(0xffffff); | |
| spotLight.position.set(-40, 60, -10); | |
| spotLight.castShadow = true; | |
| return spotLight; | |
| } | |
| function newCamera(position) { | |
| var ratio = getAspectRatio(); | |
| var camera = new THREE.PerspectiveCamera(45, ratio, 0.1, 1000); | |
| camera.position.x = -30; | |
| camera.position.y = 40; | |
| camera.position.z = 30; | |
| camera.lookAt(position); | |
| return camera; | |
| } | |
| function getAspectRatio() { | |
| var size = getRendererSize(); | |
| return size.width / size.height; | |
| } | |
| function addSliderListener() { | |
| var slider = document.getElementById("slider"); | |
| slider.addEventListener("input", function(e){rotateCube(e);}, false); | |
| } | |
| function rotateCube(event) { | |
| cube.rotation.x = event.target.value / 100.0; | |
| renderer.render(scene, camera); | |
| } | |
| setupOutput(); | |
| addSliderListener(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment