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/syntax.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic" />
{{ page.extrahead }}
<title>3DUI - {{ page.title }}</title>
</head>
<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="navbar-header">
<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
layout: withjs
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
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
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
for down, and l for right).
</p>
<p>
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
clicking on them. You can reset the camera at anytime by clicking on the reset
button.
</p>
<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>
@ -26,4 +33,6 @@ button.
<input type="checkbox" id="showarrows" style="margin-bottom:10px" checked>
<label for="showarrows">Show arrows</label>
</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;
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) {
callback(this.pointerCamera);
this.cameras.forEach(callback);
}

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

@ -12,7 +12,25 @@ var ctx2d;
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 showArrows = true;
var beenFullscreen = false;
@ -49,19 +67,19 @@ function init() {
// on initialise le moteur de rendu
container = document.getElementById('container');
container.style.height = container_size.height + 'px';
container.style.width = container_size.width + 'px';
container.style.height = container_size.height() + 'px';
container.style.width = container_size.width() + 'px';
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.setClearColor(0x87ceeb);
renderer.sortObjects = false;
canvas = document.createElement('canvas');
canvas.style.position ="absolute";
canvas.style.cssFloat = 'top-left';
canvas.width = container_size.width;
canvas.height = container_size.height;
canvas.width = container_size.width();
canvas.height = container_size.height();
ctx2d = canvas.getContext('2d');
ctx2d.lineWidth = 1;
@ -81,7 +99,7 @@ function init() {
// init light
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;
scene.add(directional_light);
@ -89,7 +107,7 @@ function init() {
scene.add(ambient_light);
// 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.reset();
scene.add(camera1);
@ -109,6 +127,8 @@ function init() {
// THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var loader = new THREE.OBJMTLLoader();
loader.load( static_path + 'data/castle/princess peaches castle (outside).obj',
static_path + 'data/castle/princess peaches castle (outside).mtl',
function ( object ) {
@ -155,28 +175,64 @@ function init() {
});
}, onProgress, onError );
// loader.load( static_path + 'data/bobomb/bobomb battlefeild.obj',
// static_path + 'data/bobomb/bobomb battlefeild.mtl',
// function ( object ) {
// // object.position.z -= 10.9;
// // object.position.y += 0.555;
// // object.position.x += 3.23;
loader.load( static_path + 'data/bobomb/bobomb battlefeild.obj',
static_path + 'data/bobomb/bobomb battlefeild.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;
var theta = 0.27;
object.rotation.y = Math.PI - theta;
// object.up = new THREE.Vector3(0,0,1);
// collidableObjects.push(object);
// scene.add(object);
// object.traverse(function (object) {
// if (object instanceof THREE.Mesh) {
// object.material.side = THREE.DoubleSide;
// console.log(object.geometry.vertices.length);
// object.geometry.mergeVertices();
// object.geometry.computeVertexNormals();
// }
// });
// }, onProgress, onError );
object.up = new THREE.Vector3(0,0,1);
collidableObjects.push(object);
scene.add(object);
object.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.material.side = THREE.DoubleSide;
console.log(object.geometry.vertices.length);
object.geometry.mergeVertices();
object.geometry.computeVertexNormals();
if (object.material.name === 'Material.071_574B138E_c.bmp' ||
object.material.name === 'Material.070_41A41EE3_c.bmp') {
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(
new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533),
@ -255,8 +311,8 @@ function fullscreen() {
function stopFullscreen() {
container.style.position = "";
container.style.cssFloat = "";
container.style.width = container_size.width + "px";
container.style.height = container_size.height + "px";
container.style.width = container_size.width() + "px";
container.style.height = container_size.height() + "px";
container.style.overflow = "";
// canvas.style.position = "";
@ -265,8 +321,8 @@ function stopFullscreen() {
canvas.style.bottom = "";
canvas.style.left = "";
canvas.style.right = "";
canvas.width = container_size.width;
canvas.height = container_size.height;
canvas.width = container_size.width();
canvas.height = container_size.height();
// canvas.style.overflow = "";
onWindowResize();
@ -279,7 +335,7 @@ function log() {
function createCamera(position, target) {
var camera = new FixedCamera(
50,
container_size.width / container_size.height,
container_size.width() / container_size.height(),
1,
100000,
position,
@ -313,7 +369,7 @@ function render() {
cameras.update(cameras.mainCamera());
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.enableScissorTest(true);
renderer.setViewport(left, bottom, width, height);
@ -322,8 +378,8 @@ function render() {
// Clear canvas
canvas.width = canvas.width;
width = container.offsetWidth / 5;
height = container.offsetHeight / 5;
width = container_size.width() / 5;
height = container_size.height() / 5;
left = prev.x - width/2;
bottom = renderer.domElement.height - prev.y + height/5;
@ -331,14 +387,14 @@ function render() {
// Hide arrows
cameras.map(function(camera) { if (camera instanceof FixedCamera) hide(camera); });
width = container.offsetWidth / 5;
height = container.offsetHeight / 5;
left = prev.x - width/2;
bottom = renderer.domElement.height - prev.y + height/5;
width = Math.floor(container_size.width() / 5);
height = Math.floor(container_size.height() / 5);
left = Math.floor(prev.x - width/2);
bottom = Math.floor(renderer.domElement.height - prev.y + height/5);
// Draw border
var can_bottom = container.offsetHeight - bottom - height ;
var can_bottom = container_size.height() - bottom - height ;
ctx2d.strokeStyle = "#ffffff";
ctx2d.beginPath();
ctx2d.moveTo(left-1, can_bottom);
@ -376,10 +432,16 @@ function animate() {
}
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();
}