threedeescene
Version:
A wrapper for Three.js assisting the creation of Three.js apps
254 lines (180 loc) • 7.63 kB
HTML
<html>
<head>
<title></title>
<!--<script src="js/vendor/three/loaders/ColladaLoader.js"></script>-->
<script type="text/javascript" src="js/ThreeDeeScene.js"></script>
<!-- The Shaders go here -->
<script type="x-shader/x-vertex" id="vertexShader">
// create a shared variable for the
// VS and FS containing the normal
varying vec3 vNormal;
void main() {
// set the vNormal value with
// the attribute value passed
// in by Three.js
vNormal = normal;
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
// same name and type as VS
varying vec3 vNormal;
void main() {
// calc the dot product and clamp
// 0 -> 1 rather than -1 -> 1
vec3 light = vec3(0.5, 0.2, 1.0);
// ensure it's normalized
light = normalize(light);
// calculate the dot product of
// the light to the vertex normal
float dProd = max(0.0,
dot(vNormal, light));
// feed into our frag colour
gl_FragColor = vec4(dProd, // R
dProd, // G
dProd, // B
1.0); // A
}
</script>
<script type="x-shader/x-vertex" id="vertexShader2">
/**
* Multiply each vertex by the
* model-view matrix and the
* projection matrix (both provided
* by Three.js) to get a final
* vertex position
*/
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position,0.20);
}
</script>
<script type="x-shader/x-vertex" id="fragmentShader2">
/**
* Set the colour to a lovely pink.
* Note that the color is a 4D Float
* Vector, R,G,B and A and each part
* runs from 0.0 to 1.0
*/
varying vec2 vUv;
void main() {
// colour is RGBA: u, v, 0, 1
gl_FragColor = vec4( vec3( vUv, 0. ), 1. );
}
</script>
<script type="text/javascript" id="mainCode">
// Put the main code here
</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="bumpChange">bumpChange</button>
<button id="bumpChangeMinus">bumpChangeMinus</button>
</div>
<div id ="holder">
</div>
</body>
</html>
<script type="text/javascript">
var fancyController = function(){
if( this.getMesh() ){
// console.log("THE CONTROLLER SPRITE IS ",this.getMesh())
this.getMesh().rotation.y +=.05
this.getMesh().bumpScale +=.5
}
}
function onLoaded(){
var THREE = ThreeDeeScene.THREE;
var _targ = document.getElementById("holder");
var three = new ThreeDeeScene.Scene(_targ, {width:1200, height:900, fov:25});
var _model = "models/LeePerrySmith.js";
var _planeMaterials = new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading, transparent: true } );
var _planeMaterials2 = new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xffff44, specular: 0x003300, shininess: 30, shading: THREE.SmoothShading, transparent: true } );
var _basicMaterial = new THREE.MeshBasicMaterial( { color:0xff8800 } );
var _ShaderMaterial = new THREE.ShaderMaterial( {
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
var spriteObject = {
scale: {x: .25, y: .25, z: .25},
position: {x: -.5, y: 3, z: -.2},
rotation: {x: 0, y: 0, z: 0},
data:{name:"This is the new name"},
skin: 'models/Map-COL.jpg',
bumpMap:"models/camo.png",
bumpScale: .1
};
var spritController1 = function(evt){
var _this = this;
var turn = function(){
_this.setZrotation(_this.getZrotation() + .02)
};
this.timer = null;
this.listen(this.SPRITE_HIT_CHANGED, function (e) {
console.log("Fancy controller _this ", _this.setZrotation(_this.getZrotation() + .02));
console.log("Fancy controller target", e.detail.target.getHit());
e.detail.target.getHit() ? this.timer = setInterval(turn, 10) : clearInterval(this.timer)
})
};
var scprite_head1 = new ThreeDeeSprite(_model, _planeMaterials, spriteObject, spritController1);
var scprite2_shader = new ThreeDeeScene.Sprite(null, _ShaderMaterial, {scale:{x:1.5, y:1.5, z:.5}, position:{x:7,y:3,z:-18}, rotation:{x:10,y:13,z:12}});
var scprite3 = new ThreeDeeScene.Sprite(null, _planeMaterials2, {scale:{x:.5, y:.5, z:.5}, position:{x:2,y:-6,z:-18}, rotation:{x:10,y:13,z:12}});
var scprite4 = new ThreeDeeScene.Sprite(_model, _planeMaterials2, {scale:{x:.5, y:.25, z:.5}, position:{x:-4,y:2,z:-18}, rotation:{x:10,y:13,z:12}});
var scprite5 = new ThreeDeeScene.Sprite(null, null, {scale:{x:.5, y:.5, z:.5}, position:{x:0,y:9,z:-2}, rotation:{x:10,y:-3,z:-18}}, fancyController);
three.listen(ThreeDeeScene.CLICKED, function(e){
console.log(e);
})
three.addSprite(scprite_head1);
// three.addSprite(scprite2_shader);
//// three.addSprite(scprite3)
// three.addSprite(scprite4);
// three.addSprite(scprite5);
// document.getElementById('submitValues').addEventListener('click', function(){
// updateScene()
// })
//
// updateScene = function(){
// var _far = document.getElementById('far').value
// var _cameraX = document.getElementById('cameraX').value
// three.setFar(_far)
// three.setCameraX(_cameraX)
// }
document.getElementById('bumpChange').addEventListener('click', function(){
bumpMapChangePlus()
})
document.getElementById('bumpChangeMinus').addEventListener('click', function(){
bumpMapChangeMinus()
})
bumpMapChangePlus = function(){
scprite_head1.setBumpScale(scprite_head1.getBumpScale()+0.05)
}
bumpMapChangeMinus = function(){
scprite_head1.setBumpScale(scprite_head1.getBumpScale()-0.05)
}
function addASprite(spriteName){
three.addSprite(spriteName)
}
}
</script>