threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
106 lines (88 loc) • 3.72 kB
HTML
<!DOCTYPE html>
<script src='../../../vendor/three.js/build/three.min.js'></script>
<script src='../threex.scenemirror.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 updateFcts = []
var backSceneMirror = new THREEx.SceneMirror(frontScene, {
onAdded : function(dstObject, srcObject){
srcObject.material = new THREE.MeshBasicMaterial({
wireframe : true,
});
},
})
//////////////////////////////////////////////////////////////////////////////////
// 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
backSceneMirror.add(frontMesh)
frontScene.add( frontMesh )
updateFcts.push(function(delta, now){
frontMesh.position.x = Math.cos(0.1 * now * Math.PI*2)*2
frontMesh.position.z = Math.cos(0.1 * now * Math.PI*2)*0.5
})
;(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 )
backSceneMirror.add(mesh)
mesh.scale.multiplyScalar(1/2)
frontMesh.add( mesh );
})()
//////////////////////////////////////////////////////////////////////////////////
// render the scene //
//////////////////////////////////////////////////////////////////////////////////
updateFcts.push(function(){
frontRenderer.render( frontScene, frontCamera )
})
updateFcts.push(function(){
backRenderer.render( backSceneMirror.dstScene, 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>