<!DOCTYPE html> <script src='../../../../vendor/three.js/build/three.min.js'></script> <script src='../threex.tweencontrols.js'></script> <body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'><script> var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var onRenderFcts= []; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000); camera.position.z = 3; ////////////////////////////////////////////////////////////////////////////////// // add an object and make it move // ////////////////////////////////////////////////////////////////////////////////// var geometry = new THREE.CubeGeometry( 1, 1, 1); var material = new THREE.MeshNormalMaterial(); var object3d = new THREE.Mesh( geometry, material ); scene.add( object3d ); onRenderFcts.push(function(delta, now){ // object3d.rotation.x += 1 * delta; // object3d.rotation.y += 2 * delta; }) ////////////////////////////////////////////////////////////////////////////////// // TweenControls ////////////////////////////////////////////////////////////////////////////////// var tweenControls = new THREEx.TweenControls(object3d) onRenderFcts.push(function(){ tweenControls.update() }) window.addEventListener('keydown', function(event){ if( event.key !== '2' ) return var position = new THREE.Vector3(0,0,0) var quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0).normalize(), 0) var scale = new THREE.Vector3(1,1,1) tweenControls.setTarget(position, quaternion, scale) }) window.addEventListener('keydown', function(event){ if( event.key !== '3' ) return var position = new THREE.Vector3(+1,0,0) var quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0).normalize(), 2*Math.PI/4) var scale = new THREE.Vector3(1,1,1) tweenControls.setTarget(position, quaternion, scale) }) window.addEventListener('keydown', function(event){ if( event.key !== '1' ) return var position = new THREE.Vector3(-1,0,0) var quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0).normalize(), 0) var scale = new THREE.Vector3(1,1,1) tweenControls.setTarget(position, quaternion, scale) }) ////////////////////////////////////////////////////////////////////////////////// // Customisation ////////////////////////////////////////////////////////////////////////////////// // customize the delay to tween tweenControls.tweenDelay = 1 // customize the function to tween tweenControls.tweenFunction = THREEx.TweenControls.Easing.Quintic.Out ////////////////////////////////////////////////////////////////////////////////// // Camera Controls // ////////////////////////////////////////////////////////////////////////////////// // var mouse = {x : 0, y : 0} // document.addEventListener('mousemove', function(event){ // mouse.x = (event.clientX / window.innerWidth ) - 0.5 // mouse.y = (event.clientY / window.innerHeight) - 0.5 // }, false) // onRenderFcts.push(function(delta, now){ // camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3) // camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3) // camera.lookAt( scene.position ) // }) ////////////////////////////////////////////////////////////////////////////////// // render the scene // ////////////////////////////////////////////////////////////////////////////////// onRenderFcts.push(function(){ renderer.render( scene, camera ); }) ////////////////////////////////////////////////////////////////////////////////// // loop runner // ////////////////////////////////////////////////////////////////////////////////// var lastTimeMsec= null requestAnimationFrame(function animate(nowMsec){ // keep looping requestAnimationFrame( animate ); // measure time lastTimeMsec = lastTimeMsec || nowMsec-1000/60 var deltaMsec = Math.min(200, nowMsec - lastTimeMsec) lastTimeMsec = nowMsec // call each update function onRenderFcts.forEach(function(onRenderFct){ onRenderFct(deltaMsec/1000, nowMsec/1000) }) }) </script></body>