threedeescene
Version:
A wrapper for Three.js assisting the creation of Three.js apps
159 lines (134 loc) • 5.56 kB
HTML
<html>
<head>
<title></title>
<!--<script src="js/vendor/three/loaders/ColladaLoader.js"></script>-->
<!--<script type="text/javascript" src="../node_modules/three/three.min.js"></script>-->
<script type="text/javascript" src="../dist/ThreeDeeScene.js"></script>
<!--<script type="text/javascript" src="../app/js/vendor/dat.gui.min.js"></script>-->
<!-- The Shaders go here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#controllers {
position: absolute;
top: 5px;
left: 5px;
z-index: 1000;
}
body {
background-color: #454545;
}
#holder {
position: relative;
top: 10px;
left: 20px;
padding: 30px;
margin: 80px;
background-color: #009926;
}
.offset{
height: 160px;
background-color: #66CC44;
}
</style>
</head>
<body onload="onLoaded()">
<div id="controllers">
</div>
<div class="offset"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8">
<h2 class="big-header">Hello, world! I an the home page.</h2>
</div>
</div>
<div id="terrain"></div>
<div class="row" >
<div class="col-xs-6 col-md-4">
<button id="stop">stop</button>
<button id="start">start</button>
</div>
<div class="col-xs-6 col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-xs-6 col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="holder">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var THREE = ThreeDeeScene.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("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() {
var _targ = document.getElementById("holder")
var three = new ThreeDeeScene.Scene(_targ, {width: 1200, height: 900, orbit: true});
var _model = "../app/models/LeePerrySmith.js";
var _monkeyModel = "../app/models/pointyMonkeyblend2.js";
var _planeMaterials = new THREE.MeshPhongMaterial({
color: 0xffffff,
specular: 0xffffff,
shininess: 3,
shading: THREE.SmoothShading,
transparent: true
});
var _planeMaterials2 = new THREE.MeshPhongMaterial({
color: 0xffffff,
specular: 0xffffff,
shininess: 60,
shading: THREE.SmoothShading,
transparent: true
});
var _basicMaterial = new THREE.MeshBasicMaterial({color: 0xff8800});
var scprite_monkey = new ThreeDeeSprite(_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}
});
function listenCallback(e){
console.log("LISTEN CALLBACK ", e.detail.target.getHit());
}
scprite_monkey.listen(scprite_monkey.SPRITE_HIT_CHANGED, listenCallback)
var scprite_man = new ThreeDeeSprite(_model, _planeMaterials, {
skin: '../app/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);
document.querySelector("#stop").addEventListener("click", function(){
three.setPlaying(false);
});
document.querySelector("#start").addEventListener("click", function(){
three.setPlaying(true);
});
// GUI
}
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>