07-ground.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Five Planets</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
body {
width:100%;
height:100%;
padding:0;
margin:0;
overflow:hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="../css/screen.css"/>
<!-- LOAD JQUERY & REQUIERE -->
<script src="../frameworks/require.min.js"></script>
<script src="../frameworks/jquery-2.0.3.min.js"></script>
<!-- LOAD THREE.JS -->
<script src="../frameworks/three.min.js" defer></script>
<script src="../frameworks/renders/projector.js" defer></script>
<script src="../frameworks/loaders/DDSLoader.js" defer></script>
<script src="../frameworks/loaders/MTLLoader.js" defer></script>
<script src="../frameworks/loaders/OBJLoader.js" defer></script>
<script src="../frameworks/loaders/ColladaLoader.js" defer></script>
<script src="../frameworks/loaders/collada/Animation.js" defer></script>
<script src="../frameworks/loaders/collada/AnimationHandler.js" defer></script>
<script src="../frameworks/loaders/collada/KeyFrameAnimation.js" defer></script>
<!-- LOAD DAT.GUI & STATS-->
<script src="../frameworks/dat.gui.min.js" defer></script>
<script src="../frameworks/stats.js" defer></script>
<!-- GAME FILES-->
<script src="../core/controls/controls_path_v01.js" defer></script>
<script src="../core/world/world_v01.js" defer></script>
<script src="../core/world/ground_v01.js" defer></script>
<script>
$(document).ready(function () {
$WORLD.init3D({}, function () {
$WORLD.map = {
"x":256,
"z":256,
"ground": {
"type":"basic",
"texture":"../data/graphics/textures/terrain/grass1.jpg",
"resX":2,
"resY":2
}};
$WORLD.drawGround();
var path=new THREE.CatmullRomCurve3([
new THREE.Vector3(5, 2, 50),
new THREE.Vector3(9, 2, 40),
new THREE.Vector3(15, 2, 55),
new THREE.Vector3(50, 2, 5),
new THREE.Vector3(30, 2, 5),
new THREE.Vector3(35, 2, 50),
new THREE.Vector3(43, 2, 27),
new THREE.Vector3(50, 2, 33),
new THREE.Vector3(5, 2, 50)])
$WORLD.controls = new $CONTROLS.PathControls ($WORLD.camera, path, {"velocity":2});
$WORLD.controls.showPath();
$WORLD.addToListUpdate ($WORLD.controls)
$WORLD.showStats();
$WORLD.startAnimation();
});
})
</script>
<link rel="stylesheet" href="../samples/css/sample.css">
<script src="../samples/js/sample.js"></script>
</head>
<body>
<!-- butons -->
<div id="sample-info">
</div>
<div id="sample-buttons" class="sample-btn">
</div>
<!-- Adsense & google analytics-->
<div id="adsense" style="position:absolute;background:#ff5063;width:468px;height:60px;z-index:9999;left:50%;margin-left:-234px;top:0px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px" data-ad-client="ca-pub-7096241178360063" data-ad-slot="1466241659"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<div id="close-adsense" style="position:absolute;background:url('../data/graphics/close-ad.png');width:15px;height:60px;z-index:9999;left:50%;margin-left:234px;cursor:pointer;top:0px" onclick="document.getElementById('adsense').style.display='none';document.getElementById('close-adsense').style.display='none';">
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-85095147-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
core/world/ground_v01.js
//****************************
// CREA EL SUELO DEL MUNDO
//****************************
$WORLD.drawGround = function () {
var map = $WORLD.map;
var groundTexture = $WORLD.textureLoader.load(map.ground.texture);
var x = $WORLD.distance * 2.25 + map.x
var z = $WORLD.distance * 2.25 + map.z
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set(x / 2, z / 2);
groundTexture.anisotropy = 16;
var groundMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: groundTexture });
var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(x, z), groundMaterial);
mesh.position.y = 0;
mesh.position.x = map.x / 2;
mesh.position.z = map.z / 2;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
$WORLD.scene.add(mesh);
}
core/world/world_v01.js
//*******************************
//DEFINIR EL MUNDO
//*******************************
var $WORLD = $WORLD || {};
$WORLD.distance = 80;
$WORLD.renderer = null;
$WORLD.scene = null;
$WORLD.clock = null;
$WORLD.map=null;
$WORLD.controls=null;
$WORLD._objUpdate = [];
$WORLD.init3D=function(oPars, fSuc, fFail) {
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
$WORLD.renderer = renderer;
$WORLD.scene = new THREE.Scene();
$WORLD.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, $WORLD.distance);
$WORLD.camera.position.set(0, 2, 0);
$WORLD.camera.lookAt(new THREE.Vector3(0,2,0) );
$WORLD.clock = new THREE.Clock();
$WORLD.controls={
getPosition: function(){
return $WORLD.camera.position;
}
}
$WORLD.textureLoader = new THREE.TextureLoader();
$WORLD.ambientLight = new THREE.AmbientLight(0xffffff,1);
$WORLD.scene.add($WORLD.ambientLight);
$WORLD.scene.fog = new THREE.Fog(0xffffff, 5, ($WORLD.distance - $WORLD.distance / 4)); //niebla
$WORLD.renderer.setClearColor($WORLD.scene.fog.color, 1);
window.addEventListener('resize', onWindowResize, false);
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
fSuc();
}
$WORLD.showStats=function() {
if (!($WORLD.stats)) {
$WORLD.stats = new Stats();
$WORLD.stats.setMode(0);
document.body.appendChild($WORLD.stats.domElement);
$WORLD.addToListUpdate($WORLD.stats);
};
}
$WORLD.startAnimation = function () {
$WORLD.animate();
}
$WORLD.pauseAnimation = function () {
window.cancelAnimationFrame( $WORLD.idAnim );
}
$WORLD.addToListUpdate = function (obj) {
$WORLD._objUpdate.push(obj);
}
$WORLD.animate = function () {
$WORLD.idAnim = requestAnimationFrame($WORLD.animate);
var delta = $WORLD.clock.getDelta();
for (var i = 0; i < $WORLD._objUpdate.length; i++) {
$WORLD._objUpdate[i].update(delta);
};
THREE.AnimationHandler.update(delta);
$WORLD.renderer.render($WORLD.scene, $WORLD.camera);
};
function onWindowResize() {
$WORLD.camera.aspect = window.innerWidth / window.innerHeight;
$WORLD.camera.updateProjectionMatrix();
$WORLD.renderer.setSize(window.innerWidth, window.innerHeight);
}
core/controls/controls_path_v01.js
var $CONTROLS = $CONTROLS || {};
$CONTROLS.PathControls = function (object, path, prop) {
this.path=path;
this._object=object;
this._pos=0;
this.velocity=1; //unidades por segundo
if (prop && prop.velocity){
this.velocity=prop.velocity;
}
this._factor=this.velocity/this.path.getLength();
};
$CONTROLS.PathControls.prototype.update = function ( delta ) {
this._object.position.copy(this.path.getPointAt(this._pos));
this._pos += (this._factor * delta);
if (this._pos > 1) {this._pos = 0;};
this._object.lookAt(this.path.getPointAt(this._pos));
}
$CONTROLS.PathControls.prototype.showPath = function ( ) {
var geometry = new THREE.Geometry();
var points = this.path.getPoints(50);
var material = new THREE.LineBasicMaterial({
color: 0xff00f0
});
geometry.vertices = points;
var line = new THREE.Line(geometry, material);
line.position.set(0,0.25,0)
$WORLD.scene.add(line);
}
$CONTROLS.PathControls.prototype.getPosition = function ( ) {
return this._object.position;
}