threedeescene
Version:
A wrapper for Three.js assisting the creation of Three.js apps
94 lines (79 loc) • 2.92 kB
HTML
<html>
<head>
<title></title>
<script type="text/javascript" src="../dist/ThreeDeeScene.js"></script>
<style>
.controllers{
position: absolute;
top:5px;
left:5px;
}
body{
background-color: #454545;
}
#holder{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body onload="onLoaded()">
<div id="controllers">
<label>Far</label><input id="far" type="text" value="5"/>
<label>Camera x</label> <input id="cameraX" type="text" value="15"/>
<button id="submitValues">update</button>
</div>
<div id ="holder">
</div>
</body>
</html>
<script type="text/javascript">
var fancyController = function(){
if( this.getMesh() ){
// console.log("THE CONTROLLER SPRITE IS ",this.getMesh())
this.getMesh().rotation.y +=.05
}
};
function onLoaded(){
var THREE = ThreeDeeScene.THREE;
var _targ = document.getElementById("holder")
var three = new ThreeDeeScene.Scene(_targ, {width:1200, height:900});
var _model = "models/LeePerrySmith.js";
var _planeMaterials = new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading, transparent: true } );
var _planeMaterials2 = new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xffff44, specular: 0x003300, shininess: 30, shading: THREE.SmoothShading, transparent: true } );
var _basicMaterial = new THREE.MeshBasicMaterial( { color:0xff8800 } );
var spriteObject = {
position:{x:0,y:5,z:2},
data:{name:"This is the new name"},
skin: 'models/Map-COL.jpg',
bumpMap:"models/camo.png",
bumpScale: .1
};
var scprite = new ThreeDeeScene.Sprite(_model, _planeMaterials, spriteObject);
var inty = setInterval(function(){addSprite()}, 1)
var i =0;
function addSprite(){
if(i<50000){
for(var j = 0; j<10; j++){
var sp = new ThreeDeeScene.Sprite(null, _basicMaterial, {scale:{x:.25, y:.25, z:.25}, position:{x:-200+(Math.random()*200),y:-200+(Math.random()*200),z:-200+(Math.random()*200)}});
three.addSprite(sp)
i ++
}
}else{
alert("done")
clearInterval(inty);
}
}
document.getElementById('submitValues').addEventListener('click', function(){
updateScene()
});
updateScene = function(){
var _far = document.getElementById('far').value
var _cameraX = document.getElementById('cameraX').value
three.setFar(_far)
three.setCameraX(_cameraX)
}
}
</script>