threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
104 lines (86 loc) • 3.85 kB
HTML
<!DOCTYPE html>
<script src='../../../vendor/three.js/build/three.min.js'></script>
<body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'>
<h1 style='font-size: 600%; text-align: center;'><br/><br/>
<a href='http://mrdoob.github.io/three.js'>three.js</a> is beautiful.
</h1>
<script>
var domZElement = 3
var frontRenderer = new THREE.WebGLRenderer();
frontRenderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( frontRenderer.domElement );
frontRenderer.domElement.style.position = 'absolute'
frontRenderer.domElement.style.top = '0px'
frontRenderer.domElement.style.left = '0px'
frontRenderer.domElement.style.pointerEvents = 'none'
frontRenderer.domElement.style.zIndex = 1
var frontCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, domZElement );
frontCamera.position.z = 3
var frontScene = new THREE.Scene();
var backRenderer = new THREE.WebGLRenderer();
backRenderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( backRenderer.domElement );
backRenderer.domElement.style.position = 'absolute'
backRenderer.domElement.style.top = '0px'
backRenderer.domElement.style.left = '0px'
backRenderer.domElement.style.pointerEvents = 'none'
backRenderer.domElement.style.zIndex = -1
var backCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, domZElement, 1000 );
backCamera.position = frontCamera.position;
backCamera.rotation = frontCamera.rotation;
backCamera.scale = frontCamera.scale;
var backScene = new THREE.Scene();
var updateFcts = [];
//////////////////////////////////////////////////////////////////////////////////
// add an object and make it move //
//////////////////////////////////////////////////////////////////////////////////
var geometry = new THREE.TorusGeometry( 1-0.25, 0.25, 32, 32)
var material = new THREE.MeshNormalMaterial()
var frontMesh = new THREE.Mesh( geometry, material )
frontMesh.rotation.y = Math.PI/2
frontMesh.addEventListener('added', function(event){
var srcObject3d = event.target
var geometry = srcObject3d.geometry.clone()
var material = srcObject3d.material.clone()
var dstObject3d = new THREE.Mesh(geometry, material)
srcObject3d.clone(dstObject3d)
backScene.add( dstObject3d );
dstObject3d.position = srcObject3d.position
dstObject3d.quaternion = srcObject3d.quaternion
dstObject3d.scale = srcObject3d.scale
console.assert(frontMesh.userData.backClone === undefined)
frontMesh.userData.backClone = dstObject3d
})
frontScene.add( frontMesh );
updateFcts.push(function(delta, now){
frontMesh.position.x = Math.cos(0.5 * now * Math.PI*2)*2
// frontMesh.position.z = Math.cos(0.5 * now * Math.PI*2)*3
frontMesh.scale.set(1,1,1).multiplyScalar(1 + 0.2 * Math.sin(Math.PI + 1 * now * Math.PI*2)*3)
})
//////////////////////////////////////////////////////////////////////////////////
// render the scene //
//////////////////////////////////////////////////////////////////////////////////
updateFcts.push(function(){
frontRenderer.render( frontScene, frontCamera )
})
updateFcts.push(function(){
backRenderer.render( backScene, backCamera )
})
//////////////////////////////////////////////////////////////////////////////////
// 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
updateFcts.forEach(function(updateFn){
updateFn(deltaMsec/1000, nowMsec/1000)
})
})
</script>
</body>