threedeescene
Version:
A wrapper for Three.js assisting the creation of Three.js apps
153 lines (130 loc) • 4.8 kB
HTML
<html>
<head>
<title>ThreeDeeScene</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: #454545;
}
#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;
console.log("THREE ", THREE)
var fancyController = function () {
if (this.getMesh()) {
// console.log("THE CONTROLLER SPRITE IS ",this.getMesh())
this.getMesh().rotation.y += .05
this.getMesh().bumpScale += .5
}
console.log("ThreeDSprite.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() {
var _targ = document.getElementById("holder")
var three = new ThreeDeeScene.Scene(_targ, {width: 1200, height: 900, orbit: true});
var _model = "models/LeePerrySmith.js";
var _monkeyModel = "models/pointyMonkeyblend2.js";
var _planeMaterials = new THREE.MeshPhongMaterial({
ambient: 0xffff66,
color: 0xffffff,
specular: 0xffffff,
shininess: 3,
shading: THREE.SmoothShading,
transparent: true
});
var _planeMaterials2 = new THREE.MeshPhongMaterial({
ambient: 0xffffff,
color: 0xffffff,
specular: 0xffffff,
shininess: 60,
shading: THREE.SmoothShading,
transparent: true
});
var _basicMaterial = new THREE.MeshBasicMaterial({color: 0xff8800});
var scprite_monkey = new ThreeDeeScene.Sprite(_monkeyModel, _planeMaterials2, {
data: {name: "Monkey"},
scale: {x: 1, y: 1, z: 1},
position: {x: 0, y: -1.5, z: 0},
rotation: {x: 0, y: 0, z: 0}
});
var scprite_man = new ThreeDeeScene.Sprite(_model, _planeMaterials, {
skin: 'models/Map-COL.jpg',
data: {name: "man"},
scale: {x: .25, y: .25, z: .25},
position: {x: 3, y: -1, z: -.2},
rotation: {x: 0, y: 0, z: 0}
}, fancyController);
three.addSprite(scprite_monkey)
three.addSprite(scprite_man)
// GUI
var _gui = new dat.GUI({autoPlace: false});
var customContainer = document.getElementById("controllers")
customContainer.appendChild(_gui.domElement);
var obj = {
name: "Three Example"
, num: 23
, winner: true
, radius1: 300
, radius2: 100
, radius3: 40
, setAmbientLightColour: [255, 0, 255]
, mainColor: [0, 128, 255]
, setLightColour: [200, 128, 255]
, setFov: 45
};
// String field
_gui.add(obj, "name");
// Number field with slider
// var setFov = _gui.add(obj, "setFov").min(3).max(50).step(1);
var setAmbientLightColour = _gui.addColor(obj, "setAmbientLightColour");
var setLightColour = _gui.addColor(obj, "setLightColour");
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) {
console.log("GUI ", value)
// Fires on every change, drag, keypress, etc.
three.setLightColour(rgbToRGB(Math.floor(value[0]), Math.floor(value[1]), Math.floor(value[2])));
});
// setFov.onChange(function(value) {
// three.setFov(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>