threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
161 lines (128 loc) • 5.5 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;
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var THREEx = THREEx || {}
THREEx.SceneCloner = function(label, srcScene){
label = 'sceneCloner-'+label
var dstScene = new THREE.Scene()
this.dstScene = dstScene
srcScene.userData[label] = dstScene
this.addedCallback = function(event){
var srcObject = event.target
var geometry = srcObject.geometry.clone()
var material = srcObject.material.clone()
var dstObject = new THREE.Mesh(geometry, material)
srcObject.clone(dstObject)
dstObject.position = srcObject.position
dstObject.quaternion = srcObject.quaternion
dstObject.scale = srcObject.scale
console.assert(srcObject.parent)
var dstParent = srcObject.parent.userData[label]
dstParent.add(dstObject)
console.assert(srcObject.userData[label] === undefined)
srcObject.userData[label] = dstObject
}
}
var backCloner = new THREEx.SceneCloner('back', frontScene)
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var backScene = new THREE.Scene()
// init the initial scene
frontScene.userData.backClone = backScene
// the callback for every THREE.Object3D added
function addedCb(event){
var srcObject = event.target
var geometry = srcObject.geometry.clone()
var material = srcObject.material.clone()
var dstObject = new THREE.Mesh(geometry, material)
srcObject.clone(dstObject)
dstObject.position = srcObject.position
dstObject.quaternion = srcObject.quaternion
dstObject.scale = srcObject.scale
console.assert(srcObject.parent)
var dstParent = srcObject.parent.userData.backClone
dstParent.add(dstObject)
console.assert(srcObject.userData.backClone === undefined)
srcObject.userData.backClone = dstObject
};
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', addedCb)
frontScene.add( frontMesh )
updateFcts.push(function(delta, now){
frontMesh.position.x = Math.cos(0.1 * now * Math.PI*2)*2
frontMesh.scale.set(1,1,1).multiplyScalar(1 + 0.2 * Math.sin(Math.PI + 0.2 * now * Math.PI*2)*3)
})
;(function(){
var geometry = new THREE.TorusGeometry( 1-0.25, 0.25, 32, 32)
var material = new THREE.MeshNormalMaterial()
var mesh = new THREE.Mesh( geometry, material )
mesh.scale.multiplyScalar(1/2)
mesh.addEventListener('added', addedCb)
frontMesh.add( mesh );
})()
//////////////////////////////////////////////////////////////////////////////////
// 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>