threedeescene
Version:
A wrapper for Three.js assisting the creation of Three.js apps
149 lines (123 loc) • 5 kB
HTML
<html>
<head>
<title>ThreeDeeScene</title>
<!--<script src="../node_modules/three/three.min.js"></script>-->
<script type="text/javascript" src="js/ThreeDeeScene.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<!-- The Shaders go here -->
<style>
#controllers {
position: absolute;
top: 5px;
left: 5px;
z-index: 1000;
}
body {
background-color: #454545;
padding: 0;
margin: 0;
}
#holder {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body onload="onLoaded()">
<div id="controllers">
</div>
<div id="holder">
</div>
</body>
</html>
<script type="text/javascript">
var THREE = ThreeDeeScene.THREE;
var fancyController = function () {
if (this.getMesh()) {
this.getMesh().rotation.y += .05;
this.getMesh().bumpScale += .5;
}
console.log("ThreeDeeSprite.SPRITE_HIT_CHANGED " + ThreeDeeSprite.SPRITE_HIT_CHANGED);
this.listen(ThreeDeeSprite.SPRITE_HIT_CHANGED, function (e) {
console.log("Fancy controller ", e);
console.log("Fancy controller target", e.detail.target.getHit());
})
};
function onLoaded() {
var _targ = document.getElementById("holder");
var three = new ThreeDeeScene.Scene(_targ, {fullscreen:true, orbit: true});
/// MONKEY
var _monkeyModel = "models/green_monkey.json";
var _defaultMaterial = new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture("models/Map-COL.jpg")});
var monkeyTexture = new THREE.TextureLoader();
monkeyTexture.load('models/green_monkey_layout.png', function(evt){
_defaultMaterial.map = evt;
// _defaultMaterial.wrapS = THREE.MirroredRepeatWrapping //THREE.ClampToEdgeWrapping THREE.RepeatWrapping and THREE.MirroredRepeatWrapping
});
var sprite_monkey = new ThreeDeeScene.Sprite(_monkeyModel, _defaultMaterial);
three.addSprite(sprite_monkey);
/// MAN
var _model = "models/LeePerrySmith.js";
var _manMaterial = new THREE.MeshPhongMaterial({
color: 0xffffff
,bumpScale : 0.0025
});
var leePerrySkin = new THREE.TextureLoader();
leePerrySkin.load('models/Map-COL.jpg', function(evt){
_manMaterial.map = evt;
});
var leePerryBump = new THREE.TextureLoader();
leePerryBump.load('models/Map-SPEC.jpg', function(evt){
_manMaterial.bumpMap = evt;
});
var sprite_man = new ThreeDeeSprite(_model, _manMaterial, {
data: {name: "man"},
scale: {x: .25, y: .25, z: .25},
position: {x: -.5, y: -1, z: -.2},
rotation: {x: 0, y: 0, z: 0}
}, fancyController);
three.addSprite(sprite_man);
//GUI
var _gui = new dat.GUI({autoPlace: false});
var customContainer = document.getElementById("controllers");
customContainer.appendChild(_gui.domElement);
var obj = {
name: "ThreeDee Example"
, setAmbientLightColour: [255, 0, 255]
, mainColor: [0, 128, 255]
, setLightColour: [200, 128, 255]
, setFov: 45
, showMaterial: false
};
// String field
_gui.add(obj, "name");
var setAmbientLightColour = _gui.addColor(obj, "setAmbientLightColour");
var setLightColour = _gui.addColor(obj, "setLightColour");
var showMaterial = _gui.add(obj, "showMaterial");
setAmbientLightColour.onChange(function (value) {
// Fires on every change, drag, keypress, etc.
three.setAmbientLightColour(rgbToRGB(Math.floor(value[0]), Math.floor(value[1]), Math.floor(value[2])));
});
setLightColour.onChange(function (value) {
// Fires on every change, drag, keypress, etc.
three.setLightColour(rgbToRGB(Math.floor(value[0]), Math.floor(value[1]), Math.floor(value[2])));
});
showMaterial.onChange(function(value){
console.log("CHANGED TO ", value);
value === true ? sprite_man.setTextureMap("models/greenstripe.png") : sprite_man.setTextureMap("models/Map-COL.jpg");
value === true ? sprite_monkey.setTextureMap("models/greenstripe.png") : sprite_monkey.setTextureMap("models/Map-COL.jpg");
});
}
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>