threedeescene
Version:
A wrapper for Three.js assisting the creation of Three.js apps
88 lines (68 loc) • 2.39 kB
HTML
<html>
<head>
<title></title>
<script type="text/javascript" src="js/ThreeDeeScene.js"></script>
<script type="text/javascript" src="js/vendor/dat.gui.min.js"></script>
<style>
#controllers{
position: absolute;
top:5px;
left:5px;
z-index: 1000;
}
body{
background-color: #454545;
}
#holder{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body onload="onLoaded()">
<div id="controllers">
<button id="changeBump">change bump</button>
</div>
<div id ="holder">
</div>
</body>
</html>
<script type="text/javascript">
var THREE = ThreeDeeScene.THREE;
var fancyController = function(){
var turnMe = function(){
if( this.getMesh() ){
this.getMesh().rotation.y +=.05
}
}.bind(this);
var Int = setInterval(function(){
turnMe();
}, 10);
};
function onLoaded(){
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: 0xffffff, color: 0xffffff, specular: 0xffffff, shininess: 3, shading: THREE.SmoothShading, transparent: true } );
var spriteObject = {
position:{x:0,y:-2,z:-2},
data:{name:"This is the new name"},
skin: 'models/Map-COL.jpg',
//bumpMap:"models/Map-SPEC.png",
bumpMap:"models/snakeskin.jpg",
bumpScale: .05
}
var scprite = new ThreeDeeScene.Sprite(_model, _planeMaterials, spriteObject);
var scprite2 = new ThreeDeeScene.Sprite(null, _planeMaterials, {scale:{x:.5, y:.5, z:.5}, position:{x:.3,y:1,z:1}, rotation:{x:10,y:13,z:12}}, fancyController);
three.listen(ThreeDeeScene.CLICKED, function(e){
console.log(e);
});
three.addSprite(scprite);
three.addSprite(scprite2);
document.getElementById('changeBump').addEventListener('click', function(){
scprite.getBumpMap() == "models/map-SPEC.jpg" ? scprite.setBumpMap("models/snakeskin.jpg") : scprite.setBumpMap("models/map-SPEC.jpg")
});
}
</script>