added view modules

2026-05-11 10:37:34 +00:00 · 2012-07-12 23:52:10 +02:00 · 2012-07-12 23:52:10 +02:00 · d31304acd2
commit d31304acd2
parent 0210d482ab
7 changed files with 149 additions and 1 deletions
--- a/lib/Chuck/Settings.js
+++ b/lib/Chuck/Settings.js
@ -43,7 +43,7 @@ define(function() {
 	    ITEM_RESTITUTION: 0.02,

 	    // 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()
 	};

--- a/lib/Chuck/View/CameraController.js
+++ b/lib/Chuck/View/CameraController.js
@ -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;
+	
+});
--- a/lib/Chuck/View/View.js
+++ b/lib/Chuck/View/View.js
@ -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;
+});
--- a/static/img/100.gif
+++ b/static/img/100.gif
--- a/static/img/100.png
+++ b/static/img/100.png
--- a/view.html
+++ b/view.html
@ -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>
--- a/view.js
+++ b/view.js
@ -0,0 +1,9 @@
+requirejs.config({
+	baseUrl: 'lib'
+});
+
+var inspector = {};
+
+requirejs(["Chuck/View/View"], function(View) {
+	var view = new View();
+});