threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
258 lines (217 loc) • 8.29 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>
<body style='margin: 0px; background-color: #333333; overflow: hidden;'>
<style>
.bond {
width : 5px;
height : 10px;
background : #eee;
display : block;
}
</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
// onRenderFcts.push(function(delta, now){
// var angle = now * Math.PI*2*0.3
// nodeCurrent.position.y = Math.sin(angle)*50
// })
// 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)
return node
}
//////////////////////////////////////////////////////////////////////////////////
// to comment //
//////////////////////////////////////////////////////////////////////////////////
nodes.forEach(function(node){
var controls = new THREEx.BasicPhysicsControls(node.object3d)
controls.damping.multiplyScalar(0.8)
nodesControls.push(controls)
//////////////////////////////////////////////////////////////////////////////////
// focus node goto center //
//////////////////////////////////////////////////////////////////////////////////
controls.onComputeForces.push(function(others){
// return
var current = controls
var node = current.object3d.userData.node
// this force is applied generation === 1 aka focus node
if( node.generation !== 1 ) return;
// honor weight for this force
var force = new THREE.Vector3()
.copy( current.position )
.normalize()
.multiplyScalar( 0.05 )
// apply the force to acceleration
current.acceleration.sub(force)
})
//////////////////////////////////////////////////////////////////////////////////
// spring link //
//////////////////////////////////////////////////////////////////////////////////
controls.onComputeForces.push(function(others){
// return
var current = controls
var node = current.object3d.userData.node
// this force is applied only on the child
if( node.parent === null ) return;
var other = node.parent
// set some variables
var targetDist = 400/node.generation
var actualDist = other.position.distanceTo( current.position );
var targetPos = new THREE.Vector3()
targetPos.subVectors( other.position, current.position ).setLength(targetDist)
var distance = targetPos.distanceTo( current.position );
var deltaDist = actualDist - targetDist
// honor weight for this force
var force = new THREE.Vector3()
.subVectors( targetPos, current.position )
.normalize()
.multiplyScalar( deltaDist )
.multiplyScalar( 0.01 )
// apply the force to acceleration
current.acceleration.add(force)
})
//////////////////////////////////////////////////////////////////////////////////
// separation //
//////////////////////////////////////////////////////////////////////////////////
controls.onComputeForces.push(function(others){
// return
var current = controls
var node = current.object3d.userData.node
var vectorSum = new THREE.Vector3();
var vectorCount = 0
var vectorRepulse = new THREE.Vector3();
others.forEach(function(other){
// dont apply on yourself
if( other === current ) return
// set some variables
var distance = other.position.distanceTo( current.position );
var radius = 300/node.generation
if( distance > 0 && distance <= radius ){
vectorRepulse.subVectors( current.position, other.position );
vectorRepulse.normalize();
vectorRepulse.divideScalar( distance/node.generation );
vectorSum.add( vectorRepulse );
vectorCount++;
}
})
// do nothing if no neighbour
if( vectorCount === 0 ) return
// compute the average
vectorSum.divideScalar( vectorCount );
var force = vectorSum
// honor weight for this force
force.multiplyScalar(3)
// apply the force to acceleration
current.acceleration.add(force)
})
})
setInterval(function(){
nodesControls.forEach(function(controls){
controls.computeForces(nodesControls)
controls.computeForces(nodesControls)
controls.computeForces(nodesControls)
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){
camera.position.x += (mouse.x*512 - camera.position.x) * (delta*3)
camera.position.y += (mouse.y*512 - 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>