threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
177 lines (153 loc) • 5.74 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.peppernode2.js'></script>
<script src='../threex.css3djoint.js'></script>
<script src='../threex.peppernodestaticcontrols.js'></script>
<script src="vendor/mustache/mustache.js"></script>
<script src="vendor/jquery/jquery.js"></script>
<body style='margin: 0px; background-color: #333333; overflow: hidden;'>
<style>
.bond {
width : 5px;
height : 10px;
background : #eee;
}
</style>
<style>
.pepperNode {
text-align : center;
}
.pepperNode label {
color : grey;
font-size : 80%;
}
</style>
<template id='pepperNodeTemplate'>
<div class='pepperNode'>
<img src='css3d_molecules/images/ball.png' width='100%'/>
<label>{{name}}</label>
</div>
</template>
<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)
var nodeCurrent = createNode('nodeCurrent', 1, nodeParent)
var nodeChild1 = createNode('child1', 2, nodeCurrent)
var nodeChild2 = createNode('child2', 2, nodeCurrent)
var topFocusedNode = nodeParent
topFocusedNode.setGeneration(1, null)
THREEx.PepperNodeStaticControls.computePosition(topFocusedNode)
})()
;(function(){
return;
// build the tree
var nodeFocus = createNode('nodeFocus', 1, null)
var nChildren = 5
var nGrandChildren = 2
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
}
}
var topFocusedNode = nodeFocus
topFocusedNode.setGeneration(1, null)
THREEx.PepperNodeStaticControls.computePosition(topFocusedNode)
})()
//////////////////////////////////////////////////////////////////////////////////
// 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.PepperNode2(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(){
console.log('click on node', node.name)
var topFocusedNode = node
topFocusedNode.setGeneration(1, null)
THREEx.PepperNodeStaticControls.computePosition(topFocusedNode)
})
// 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'
})
return node
}
//////////////////////////////////////////////////////////////////////////////////
// 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>