tforgione
/
3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjustable size of canvas... fullscreen mode doesn't work

This commit is contained in:
Thomas FORGIONE 2015-04-27 14:54:40 +02:00
parent 33c136a1bc
commit a48635a642
5 changed files with 134 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_layouts/main.html
View File

@ -7,10 +7,11 @@
<link rel="stylesheet" href="/static/css/style.css" /> <link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/css/syntax.css" /> <link rel="stylesheet" href="/static/css/syntax.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic" /> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic" />
{{ page.extrahead }}
<title>3DUI - {{ page.title }}</title> <title>3DUI - {{ page.title }}</title>
</head> </head>
<body> <body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <nav id="nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

11
prototype/index.md
View File

@ -2,20 +2,27 @@
title: Prototype title: Prototype
layout: withjs layout: withjs
extrajs: <script src="/static/js/prototype/main.js"></script> extrajs: <script src="/static/js/prototype/main.js"></script>
extrahead: <link rel="stylesheet" href="/static/css/prototype.css" />
--- ---
## 3D Interface <div id="main-div">
<h2>3D Interface</h2>
<p>
This is the prototype of a 3D interface. You can move the camera with the arrow This is the prototype of a 3D interface. You can move the camera with the arrow
keys of your keyboard, and change the angle of the camera by dragging and keys of your keyboard, and change the angle of the camera by dragging and
dropping the scene around it (you can also use your numpad, 2 to look lower, 8 dropping the scene around it (you can also use your numpad, 2 to look lower, 8
to look higher, 4 to look on the left and 6 to look on the right, but if you're to look higher, 4 to look on the left and 6 to look on the right, but if you're
more comfortable with non-numpad keys, you can also use i for up, j for left, k more comfortable with non-numpad keys, you can also use i for up, j for left, k
for down, and l for right). for down, and l for right).
</p>
<p>
Recommended views are displayed with a transparent red arrow. They disappear Recommended views are displayed with a transparent red arrow. They disappear
when you come closer to them, and you can automatically move to them by when you come closer to them, and you can automatically move to them by
clicking on them. You can reset the camera at anytime by clicking on the reset clicking on them. You can reset the camera at anytime by clicking on the reset
button. button.
</p>
<button class="btn btn-primary" id="full" style="margin-bottom: 10px;">Fullscreen</button> <button class="btn btn-primary" id="full" style="margin-bottom: 10px;">Fullscreen</button>
<button class="btn btn-primary" id="reset" style="margin-bottom:10px">Reset camera</button> <button class="btn btn-primary" id="reset" style="margin-bottom:10px">Reset camera</button>
@ -26,4 +33,6 @@ button.
<input type="checkbox" id="showarrows" style="margin-bottom:10px" checked> <input type="checkbox" id="showarrows" style="margin-bottom:10px" checked>
<label for="showarrows">Show arrows</label> <label for="showarrows">Show arrows</label>
</div>
<div id="container" style="padding: 0px; margin: 0px;"></div> <div id="container" style="padding: 0px; margin: 0px;"></div>

14
static/css/style.css
View File

@ -2,3 +2,17 @@ body {
padding-top: 50px; padding-top: 50px;
text-align: justify; text-align: justify;
} }
html, body {
height: 100%;
}
#main-section {
min-height: 100%;
}
#container {
position: absolute;
margin: 0 auto;
min-height: 100%;
}

1
static/js/CameraContainer.js
View File

@ -15,6 +15,7 @@ CameraContainer.prototype.mainCamera = function(id) {
} }
CameraContainer.prototype.forEach = function(callback) { CameraContainer.prototype.forEach = function(callback) {
callback(this.pointerCamera);
this.cameras.forEach(callback); this.cameras.forEach(callback);
} }

152
static/js/prototype/main.js vendored
View File

@ -12,7 +12,25 @@ var ctx2d;
var loader; var loader;
var container_size = {width: 1024, height: 576}; var main_section = document.getElementById('main-section');
var offset = function() {
return
document.getElementById('nav').offsetHeight
+ document.getElementById('main-div').offsetHeight;
}
console.log(document.getElementById('main-div').offsetHeight);
var container_size = {
width: function() { return main_section.clientWidth; },
height: function() {
return main_section.clientHeight
- document.getElementById('nav').offsetHeight
- document.getElementById('main-div').offsetHeight;
}
};
console.log(container_size.width(), container_size.height());
var prev = {x:0, y:0, go:false}; var prev = {x:0, y:0, go:false};
var showArrows = true; var showArrows = true;
var beenFullscreen = false; var beenFullscreen = false;
@ -49,19 +67,19 @@ function init() {
// on initialise le moteur de rendu // on initialise le moteur de rendu
container = document.getElementById('container'); container = document.getElementById('container');
container.style.height = container_size.height + 'px'; container.style.height = container_size.height() + 'px';
container.style.width = container_size.width + 'px'; container.style.width = container_size.width() + 'px';
renderer = new THREE.WebGLRenderer({alpha:true}); renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setSize(container_size.width, container_size.height); renderer.setSize(container_size.width(), container_size.height());
// renderer.setSize(container_size.width(), container_size.height());
renderer.shadowMapEnabled = true; renderer.shadowMapEnabled = true;
renderer.setClearColor(0x87ceeb); renderer.setClearColor(0x87ceeb);
renderer.sortObjects = false;
canvas = document.createElement('canvas'); canvas = document.createElement('canvas');
canvas.style.position ="absolute"; canvas.style.position ="absolute";
canvas.style.cssFloat = 'top-left'; canvas.style.cssFloat = 'top-left';
canvas.width = container_size.width; canvas.width = container_size.width();
canvas.height = container_size.height; canvas.height = container_size.height();
ctx2d = canvas.getContext('2d'); ctx2d = canvas.getContext('2d');
ctx2d.lineWidth = 1; ctx2d.lineWidth = 1;
@ -81,7 +99,7 @@ function init() {
// init light // init light
var directional_light = new THREE.DirectionalLight(0xdddddd); var directional_light = new THREE.DirectionalLight(0xdddddd);
directional_light.position.set(1, 0.5, 1).normalize(); directional_light.position.set(1, 2.5, 1).normalize();
directional_light.castShadow = false; directional_light.castShadow = false;
scene.add(directional_light); scene.add(directional_light);
@ -89,7 +107,7 @@ function init() {
scene.add(ambient_light); scene.add(ambient_light);
// on initialise la camera que l’on place ensuite sur la scène // on initialise la camera que l’on place ensuite sur la scène
var camera1 = new PointerCamera(50, container_size.width / container_size.height, 0.01, 100000, container); var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container);
camera1.speed = 0.001; camera1.speed = 0.001;
camera1.reset(); camera1.reset();
scene.add(camera1); scene.add(camera1);
@ -109,6 +127,8 @@ function init() {
// THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); // THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var loader = new THREE.OBJMTLLoader(); var loader = new THREE.OBJMTLLoader();
loader.load( static_path + 'data/castle/princess peaches castle (outside).obj', loader.load( static_path + 'data/castle/princess peaches castle (outside).obj',
static_path + 'data/castle/princess peaches castle (outside).mtl', static_path + 'data/castle/princess peaches castle (outside).mtl',
function ( object ) { function ( object ) {
@ -155,28 +175,64 @@ function init() {
}); });
}, onProgress, onError ); }, onProgress, onError );
// loader.load( static_path + 'data/bobomb/bobomb battlefeild.obj', loader.load( static_path + 'data/bobomb/bobomb battlefeild.obj',
// static_path + 'data/bobomb/bobomb battlefeild.mtl', static_path + 'data/bobomb/bobomb battlefeild.mtl',
// function ( object ) { function ( object ) {
// // object.position.z -= 10.9; // object.position.z -= 10.9;
// // object.position.y += 0.555; // object.position.y += 0.555;
// // object.position.x += 3.23; // object.position.x += 3.23;
// var theta = 0.27; var theta = 0.27;
// object.rotation.y = Math.PI - theta; object.rotation.y = Math.PI - theta;
// object.up = new THREE.Vector3(0,0,1); object.up = new THREE.Vector3(0,0,1);
// collidableObjects.push(object); collidableObjects.push(object);
// scene.add(object); scene.add(object);
// object.traverse(function (object) { object.traverse(function (object) {
// if (object instanceof THREE.Mesh) { if (object instanceof THREE.Mesh) {
// object.material.side = THREE.DoubleSide; object.material.side = THREE.DoubleSide;
// console.log(object.geometry.vertices.length); console.log(object.geometry.vertices.length);
// object.geometry.mergeVertices(); object.geometry.mergeVertices();
// object.geometry.computeVertexNormals(); object.geometry.computeVertexNormals();
// } if (object.material.name === 'Material.071_574B138E_c.bmp' ||
// }); object.material.name === 'Material.070_41A41EE3_c.bmp') {
// }, onProgress, onError ); object.material.transparent = true;
}
}
});
}, onProgress, onError );
loader.load( static_path + 'data/star/GrandStar.obj',
static_path + 'data/star/GrandStar.mtl',
function ( object ) {
object.position.z -= 10.9;
object.position.y += 0.555;
object.position.x += 3.23;
var theta = 0.27;
object.rotation.y = Math.PI - theta;
object.up = new THREE.Vector3(0,0,1);
scene.add(object);
collidableObjects.push(object);
object.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.scale.set(0.005,0.005,0.005);
object.position.x = 13;
object.position.z = -35;
object.position.y = 30;
object.rotation.z = Math.PI/2;
object.rotation.x = Math.PI/2;
object.rotation.y = Math.PI;
object.material.side = THREE.DoubleSide;
object.geometry.mergeVertices();
object.geometry.computeVertexNormals();
object.raycastable = true;
}
});
}, onProgress, onError );
createCamera( createCamera(
new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533), new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533),
@ -255,8 +311,8 @@ function fullscreen() {
function stopFullscreen() { function stopFullscreen() {
container.style.position = ""; container.style.position = "";
container.style.cssFloat = ""; container.style.cssFloat = "";
container.style.width = container_size.width + "px"; container.style.width = container_size.width() + "px";
container.style.height = container_size.height + "px"; container.style.height = container_size.height() + "px";
container.style.overflow = ""; container.style.overflow = "";
// canvas.style.position = ""; // canvas.style.position = "";
@ -265,8 +321,8 @@ function stopFullscreen() {
canvas.style.bottom = ""; canvas.style.bottom = "";
canvas.style.left = ""; canvas.style.left = "";
canvas.style.right = ""; canvas.style.right = "";
canvas.width = container_size.width; canvas.width = container_size.width();
canvas.height = container_size.height; canvas.height = container_size.height();
// canvas.style.overflow = ""; // canvas.style.overflow = "";
onWindowResize(); onWindowResize();
@ -279,7 +335,7 @@ function log() {
function createCamera(position, target) { function createCamera(position, target) {
var camera = new FixedCamera( var camera = new FixedCamera(
50, 50,
container_size.width / container_size.height, container_size.width() / container_size.height(),
1, 1,
100000, 100000,
position, position,
@ -313,7 +369,7 @@ function render() {
cameras.update(cameras.mainCamera()); cameras.update(cameras.mainCamera());
cameras.look(); cameras.look();
var left = 0, bottom = 0, width = container.offsetWidth, height = container.offsetHeight; var left = 0, bottom = 0, width = container_size.width(), height = container_size.height();
renderer.setScissor(left, bottom, width, height); renderer.setScissor(left, bottom, width, height);
renderer.enableScissorTest(true); renderer.enableScissorTest(true);
renderer.setViewport(left, bottom, width, height); renderer.setViewport(left, bottom, width, height);
@ -322,8 +378,8 @@ function render() {
// Clear canvas // Clear canvas
canvas.width = canvas.width; canvas.width = canvas.width;
width = container.offsetWidth / 5; width = container_size.width() / 5;
height = container.offsetHeight / 5; height = container_size.height() / 5;
left = prev.x - width/2; left = prev.x - width/2;
bottom = renderer.domElement.height - prev.y + height/5; bottom = renderer.domElement.height - prev.y + height/5;
@ -331,14 +387,14 @@ function render() {
// Hide arrows // Hide arrows
cameras.map(function(camera) { if (camera instanceof FixedCamera) hide(camera); }); cameras.map(function(camera) { if (camera instanceof FixedCamera) hide(camera); });
width = container.offsetWidth / 5; width = Math.floor(container_size.width() / 5);
height = container.offsetHeight / 5; height = Math.floor(container_size.height() / 5);
left = prev.x - width/2; left = Math.floor(prev.x - width/2);
bottom = renderer.domElement.height - prev.y + height/5; bottom = Math.floor(renderer.domElement.height - prev.y + height/5);
// Draw border // Draw border
var can_bottom = container.offsetHeight - bottom - height ; var can_bottom = container_size.height() - bottom - height ;
ctx2d.strokeStyle = "#ffffff"; ctx2d.strokeStyle = "#ffffff";
ctx2d.beginPath(); ctx2d.beginPath();
ctx2d.moveTo(left-1, can_bottom); ctx2d.moveTo(left-1, can_bottom);
@ -376,10 +432,16 @@ function animate() {
} }
function onWindowResize() { function onWindowResize() {
cameras.forEach(function(camera) {camera.aspect = container.offsetWidth / container.offsetHeight;});
cameras.forEach(function(camera) {camera.updateProjectionMatrix();});
renderer.setSize(container.offsetWidth, container.offsetHeight); container.style.width = container_size.width() + "px";
container.style.height = container_size.height() + "px";
canvas.width = container_size.width();
canvas.height = container_size.height();
renderer.setSize(container_size.width(), container_size.height());
cameras.forEach(function(camera) {camera.aspect = container_size.width() / container_size.height();});
cameras.forEach(function(camera) {camera.updateProjectionMatrix();});
render(); render();
} }