threedeescene
Version:
A wrapper for Three.js assisting the creation of Three.js apps
242 lines (172 loc) • 8.12 kB
HTML
<html>
<head>
<title></title>
<!--<script src="js/vendor/three/loaders/ColladaLoader.js"></script>-->
<script type="text/javascript" src="js/ThreeDeeScene.js"></script>
<script type="text/javascript" src="js/vendor/dat.gui.min.js"></script>
<!-- The Shaders go here -->
<style>
#controllers{
position: absolute;
top:5px;
left:5px;
z-index: 1000;
}
body{
background-color: #222222;
}
#holder{
position: absolute;
top: 0;
left: 0;
width: 400px
}
</style>
</head>
<body onload="onLoaded()">
<div id="controllers">
</div>
<div id ="holder">
</div>
</body>
</html>
<script type="text/javascript">
var fancyController = function(){
if( this.getMesh() ){
this.getMesh().rotation.y +=.05;
this.getMesh().bumpScale +=.5;
}
console.log("ThreeDeeSprite.SPRITE_HIT_CHANGED "+ this.SPRITE_HIT_CHANGED)
this.listen(this.SPRITE_HIT_CHANGED, function(e){
//console.log("Fancy controller ",e);
console.log("Fancy controller target", e.detail.target.getHit());
})
};
function onLoaded(){
console.log(ThreeDeeScene)
var THREE = ThreeDeeScene.THREE;
var _model = "models/LeePerrySmith.js";
// var _monkeyModel = "models/monkey1.js";
// var _planeMaterials = new THREE.MeshPhongMaterial( {color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading } );
// var _planeMaterials2 = new THREE.MeshPhongMaterial( {color: 0xffff44, specular: 0x003300, shininess: 30, shading: THREE.SmoothShading } );
// var _basicMaterial = new THREE.MeshBasicMaterial( { color:0xff8800 } );
var texture1 = "models/map-SPEC.jpg";
// var texture2 = "models/texture1.png";
// GUI
var _gui = new dat.GUI({ autoPlace: true });
var customContainer = document.getElementById("controllers")
customContainer.appendChild(_gui.domElement);
var obj = {
name: "Three Example"
, num: 23
, bump: true
, bumpScale: .2
, x: 0
, y: 0
, z: 0
, xRot: 0
, yRot: 0
, zRot: 0
, setAmbientLightColour: [ 255, 0, 255 ]
, mainColor: [ 0, 128, 255 ]
, setLightColour : [ 200, 128, 255 ]
, setFov : 30
, setNear : 0.1
, setFar : 2000
, setCameraX : 5
, setCameraY : 5
, setCameraZ : 5
};
// converts degrees to radians helper
var de2ra = function(degree) { return degree*(Math.PI/180); }
// Add the sprites...
//var scprite_monkey = new ThreeDeeSprite(_monkeyModel, _planeMaterials2, {data:{name:"Monkey"}, scale:{x:.5, y:.5, z:.5}, position:{x:3,y:-1,z:0}, rotation:{x:0,y:0,z:0}});
// var scprite_man = new ThreeDeeSprite(_model, _planeMaterials, {data:{name: "man"}}, fancyController);
//var scprite_man = new ThreeDeeSprite(_model, _planeMaterials, {data:{name: "man"}, position:{x:obj.x,y:obj.y,z:obj.z}, bumpMap:texture1, bumpScale: .01}, fancyController);
var scprite_man = new ThreeDeeSprite(_model);
var _targ = document.getElementById("holder")
var three = new ThreeDeeScene.Scene(_targ, {width:1200, height:900, orbit:false, fov:obj.setFov});
//three.addSprite(scprite_monkey)
three.addSprite(scprite_man)
// String field
_gui.add(obj, "name");
// Number field with slider
var _x = _gui.add(obj, "x").min(-20).max(20).step(.2);
var _y = _gui.add(obj, "y").min(-20).max(20).step(.2);
var _z = _gui.add(obj, "z").min(-20).max(20).step(.2);
var _xRot = _gui.add(obj, "xRot").min(0).max(180).step(.02);
var _yRot = _gui.add(obj, "yRot").min(0).max(180).step(.02);
var _zRot = _gui.add(obj, "zRot").min(1).max(180).step(.02);
var _bump = _gui.add(obj, "bump")
var _bumpScale = _gui.add(obj, "bumpScale").min(0).max(1).step(.02);
var setFov = _gui.add(obj, "setFov").min(3).max(150).step(1);
var setNear = _gui.add(obj, "setNear").min(0.1).max(30).step(1);
var setFar = _gui.add(obj, "setFar").min(300).max(2000).step(20);
var setCameraX = _gui.add(obj, "setCameraX").min(-20).max(20).step(1);
var setCameraY = _gui.add(obj, "setCameraY").min(-20).max(20).step(1);
var setCameraZ = _gui.add(obj, "setCameraZ").min(-20).max(20).step(1);
var setLightColour = _gui.addColor(obj, "setLightColour");
var setAmbientLightColour = _gui.addColor(obj, "setAmbientLightColour");
setAmbientLightColour.onChange(function(value) {
// Fires on every change, drag, keypress, etc.
three.setAmbientLightColour(rgbToRGB( Math.round(value[0]), Math.round(value[1]), Math.round(value[2]) ));
});
setLightColour.onChange(function(value) {
console.log("GUI Lightcol",value)
three.setLightColour(rgbToRGB( Math.round(value[0]), Math.round(value[1]), Math.round(value[2]) ));
});
setFov.onChange(function(value) {
three.setFov(value);
});
setNear.onChange(function(value) {
three.setNear(value);
});
setFar.onChange(function(value) {
three.setFar(value);
});
setCameraX.onChange(function(value) {
three.setCameraX(value);
});
setCameraY.onChange(function(value) {
three.setCameraY(value);
});
setCameraZ.onChange(function(value) {
three.setCameraZ(value);
});
_x.onChange(function(value) {
scprite_man.setX(value);
});
_y.onChange(function(value) {
scprite_man.setY(value);
});
_z.onChange(function(value) {
scprite_man.setZ(value);
});
_bump.onChange(function(value) {
value ? scprite_man.setBumpMap("models/snakeskin.jpg") : scprite_man.setBumpMap("models/map-SPEC.jpg")
});
_bumpScale.onChange(function(value) {
scprite_man.setBumpScale(value);
});
_xRot.onChange(function(value) {
scprite_man.setXrotation( de2ra(value) );
});
_yRot.onChange(function(value) {
scprite_man.setYrotation( de2ra(value) );
});
_zRot.onChange(function(value) {
scprite_man.setZrotation( de2ra(value) );
});
}
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToZeroX(r, g, b) {
return "0x" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function rgbToRGB(r, g, b) {
return "rgb(" + String(r) +","+ String(g)+"," + String(b)+")";
}
</script>