threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
178 lines (149 loc) • 5.78 kB
HTML
<!DOCTYPE html>
<script src='../../../vendor/three.js/build/three.js'></script>
<script src='../../../vendor/three.js/examples/js/renderers/CSS3DRenderer.js'></script>
<script src='../threex.peppernode.js'></script>
<script src='../threex.css3djoint.js'></script>
<script src='../threex.basicphysicscontrols.js'></script>
<script src='../threex.peppernodedynamiccontrols.js'></script>
<body style='margin: 0px; background-color: #333333; overflow: hidden;'>
<style>
.bond {
width : 5px;
height : 10px;
background : #eee;
}
</style><script>
// setup webgl renderer full page
var renderer = new THREE.CSS3DRenderer();
// var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight )
// document.body.appendChild( renderer.domElement )
document.body.appendChild( renderer.domElement )
// setup a scene and camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 250*3;
// declare the rendering loop
var onRenderFcts= [];
var nodes = []
var nodesControls = []
;(function(){
// return
// build the tree
var nodeParent = createNode('nodeParent', 2, null)
nodeParent.position.x = -80
var nodeCurrent = createNode('nodeCurrent', 1, nodeParent)
nodeCurrent.position.x = +80
var nodeChild1 = createNode('child1', 2, nodeCurrent)
nodeChild1.position.x = +150
nodeChild1.position.y = +80
var nodeChild2 = createNode('child2', 2, nodeCurrent)
nodeChild2.position.x = +150
nodeChild2.position.y = -80
})()
;(function(){
return;
// build the tree
var nodeFocus = createNode('nodeFocus', 1, null)
var nChildren = 1
var nGrandChildren = 3
for(var i = 0; i < nChildren; i++){
var nodeChild = createNode('child'+i, 2, nodeFocus)
nodeChild.position.copy(nodeFocus.position)
nodeChild.position.x += (Math.random()-0.5)*400
nodeChild.position.y += (Math.random()-0.5)*400
for(var j = 0; j < nGrandChildren; j++){
var nodeGrandChild = createNode('grandChild'+i+'_'+j, 3, nodeChild)
nodeGrandChild.position.copy(nodeChild.position)
nodeGrandChild.position.x += (Math.random()-0.5)*200
nodeGrandChild.position.y += (Math.random()-0.5)*200
}
}
})()
//////////////////////////////////////////////////////////////////////////////////
// to comment //
//////////////////////////////////////////////////////////////////////////////////
// update the nodes itself
onRenderFcts.push(function(delta, now){
nodes.forEach(function(node){
node.update(delta, now)
})
})
//////////////////////////////////////////////////////////////////////////////////
// to comment //
//////////////////////////////////////////////////////////////////////////////////
function createNode(name, generation, parentNode){
var node = new THREEx.PepperNode(name, generation, scene)
node.object3d.userData.node = node
node.setParent( parentNode )
nodes.push(node)
//////////////////////////////////////////////////////////////////////////////////
// bind dom events //
//////////////////////////////////////////////////////////////////////////////////
var domElement = node.object3d.element
// if it is clicked on, changet the focus by spreading the generation
domElement.addEventListener('click', function(){
node.setGeneration(1, null)
})
// change the mouse cursor to show it is clickable
domElement.addEventListener('mouseover', function(){
document.body.style.cursor = 'pointer'
})
domElement.addEventListener('mouseout', function(){
document.body.style.cursor = 'default'
})
// init the controls
var controls = new THREEx.PepperNodeDynamicControls(node.object3d)
controls.damping.multiplyScalar(0.95)
nodesControls.push(controls)
node.object3d.userData.controls = controls
return node
}
//////////////////////////////////////////////////////////////////////////////////
// to comment //
//////////////////////////////////////////////////////////////////////////////////
setInterval(function(){
nodesControls.forEach(function(controls){
controls.computeForces(nodesControls)
})
nodesControls.forEach(function(controls){
controls.applyForces()
})
}, 1000/60)
//////////////////////////////////////////////////////////////////////////////////
// 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){
return
camera.position.x += (mouse.x*512*2 - camera.position.x) * (delta*3)
camera.position.y += (mouse.y*512*5 - camera.position.y) * (delta*3)
camera.lookAt( scene.position )
})
//////////////////////////////////////////////////////////////////////////////////
// render the scene //
//////////////////////////////////////////////////////////////////////////////////
onRenderFcts.push(function(){
renderer.render( scene, camera );
})
//////////////////////////////////////////////////////////////////////////////////
// Rendering 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>