jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added view modules

Browse source
This commit is contained in:
logsol 2012-07-12 23:52:10 +02:00
parent 0210d482ab
commit d31304acd2
7 changed files with 149 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/Chuck/Settings.js Normal file → Executable file
View file

@ -43,7 +43,7 @@ define(function() {
ITEM_RESTITUTION: 0.02, ITEM_RESTITUTION: 0.02,
// debug draw // debug draw
DEBUG_DRAW_CANVAS_SPRITE: isBrowserEnvironment() ? document.getElementById("canvas").getContext("2d") : undefined, DEBUG_DRAW_CANVAS_SPRITE: null,//isBrowserEnvironment() ? document.getElementById("canvas").getContext("2d") : undefined,
IS_BROWSER_ENVIRONMENT: isBrowserEnvironment() IS_BROWSER_ENVIRONMENT: isBrowserEnvironment()
}; };

30
lib/Chuck/View/CameraController.js Executable file
View file

@ -0,0 +1,30 @@
define(['Vendor/Wrapper/Three', 'Chuck/Settings'], function(Three, Settings) {
function CameraController() {
this.camera = new Three.OrthographicCamera(
-Settings.STAGE_WIDTH/2,
Settings.STAGE_WIDTH/2,
Settings.STAGE_HEIGHT/2,
-Settings.STAGE_HEIGHT/2,
-2000,
1000
);
//this.camera = new Three.PerspectiveCamera(45, 600 / 400, 1, 1000);
this.camera.position.z = 481;
}
CameraController.prototype.getCamera = function(){
return this.camera;
}
CameraController.prototype.setPosition = function(x, y, z){
this.camera.position.x = x;
this.camera.position.y = y;
this.camera.position.z = z;
}
return CameraController;
});

81
lib/Chuck/View/View.js Executable file
View file

@ -0,0 +1,81 @@
define(["Vendor/Wrapper/Three", "Chuck/Settings", "Chuck/View/CameraController"], function(Three, Settings, CameraController){
function View(){
this.scene = null;
this.renderer = null;
this.cameraController = new CameraController();
this.init();
}
View.prototype.init = function(){
var self = this;
this.renderer = new Three.WebGLRenderer();
this.renderer.setSize(600, 400);
document.body.appendChild(this.renderer.domElement);
this.scene = new Three.Scene();
this.scene.add(this.cameraController.getCamera());
/*
var ambientLight = new Three.AmbientLight(0xffffff);
this.scene.add(ambientLight);
var directionalLight = new Three.DirectionalLight(0xffffff);
directionalLight.position.set(1, 0, 10).normalize();
this.scene.add(directionalLight);
this.createMesh(100, 100, 100, 100, 'static/img/100.png', function(mesh){
console.log(mesh);
self.scene.add(mesh);
});
this.createMesh(100, 100, 210, 100, 'static/img/100.png', function(mesh){
self.scene.add(mesh);
});
*/
this.animate(this);
}
View.prototype.animate = function(scope) {
requestAnimationFrame(function(){
scope.animate(scope);
});
//plane.rotation.z += .01;
//plane.position.z += 1;
//plane.position.x += .4;
//plane.position.y += .4;
scope.render();
//stats.update();
}
View.prototype.render = function() {
console.log('render', this);
this.renderer.render(this.scene, this.cameraController.getCamera());
}
View.prototype.createMesh = function(width, height, x, y, img, callback) {
var textureImg = new Image();
textureImg.onload = function(){
var material = new Three.MeshLambertMaterial({
map: Three.ImageUtils.loadTexture(img)
});
var plane = new Three.Mesh(new Three.PlaneGeometry(width, height), material);
plane.overdraw = true;
plane.position.z = 0;
plane.position.x = x;
plane.position.y = y;
callback(plane);
};
textureImg.src = img;
}
return View;
});

BIN
static/img/100.gif Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 618 B

BIN
static/img/100.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

28
view.html Executable file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Chuck</title>
<script data-main="view" src="node_modules/requirejs/require.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
display: table;
width: 100%;
height: 100%;
background: #000;
}
#container {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 100%;
}
canvas {
background: #333;
}
</style>
</head>
<body>
</body>
</html>

9
view.js Executable file
View file

@ -0,0 +1,9 @@
requirejs.config({
baseUrl: 'lib'
});
var inspector = {};
requirejs(["Chuck/View/View"], function(View) {
var view = new View();
});