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

Removed border of canvas for perf

Browse Source
This commit is contained in:
Thomas FORGIONE 2015-04-24 17:00:37 +02:00
parent 6a1f47bcf9
commit 74e16eb14d
3 changed files with 81 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
prototype/index.md
View File

@ -17,6 +17,7 @@ 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.
<button id="full" style="margin-bottom: 10px;">Fullscreen</button>
<button id="reset" style="margin-bottom:10px">Reset camera</button>
<input type="checkbox" id="fullarrow" style="margin-bottom:10px">
<label for="fullarrow">Full arrow</label>
@ -25,4 +26,4 @@ button.
<input type="checkbox" id="showarrows" style="margin-bottom:10px" checked>
<label for="showarrows">Show arrows</label>
<div id="container"> </div>
<div id="container" style="padding: 0px; margin: 0px;"></div>

4
static/js/FixedCamera.js
View File

@ -162,7 +162,7 @@ FixedCamera.prototype.regenerateArrow = function(mainCamera) {
var limit = this.fullArrow ? 0.1 : 0.3;
// for (var i = this.fullArrow ? 0 : 0.5; i <= 1.001; i += 0.05) {
for (var i = 1; i > limit; i -= 0.01) {
for (var i = 1; i > limit; i -= 0.05) {
point = hermite.eval(i);
deriv = hermite.prime(i);
up.cross(deriv);
@ -211,7 +211,7 @@ FixedCamera.prototype.regenerateArrow = function(mainCamera) {
this.arrow.geometry.elementsNeedUpdate = true;
this.arrow.geometry.groupsNeedUpdate = true;
this.arrow.geometry.normalsNeedUpdate = true;
this.arrow.geometry.facesNeedUpdate = true;
// this.arrow.geometry.facesNeedUpdate = true;
}

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

@ -7,6 +7,7 @@ var cameras = new CameraContainer();
var spheres = new Array(mesh_number);
var visible = 0;
var stats;
var canvas;
var ctx2d;
var loader;
@ -22,6 +23,8 @@ function init() {
// Collidable objects to prevent camera from traversing objects
var collidableObjects = new Array();
document.getElementById('full').onclick = fullscreen;
// Add the listener on the button
document.getElementById('reset').onclick = function() { cameras.mainCamera().reset(); };
var fullarrow = document.getElementById('fullarrow');
@ -53,7 +56,7 @@ function init() {
renderer.setClearColor(0x87ceeb);
renderer.sortObjects = false;
var canvas = document.createElement('canvas');
canvas = document.createElement('canvas');
canvas.style.position ="absolute";
canvas.style.cssFloat = 'top-left';
canvas.width = container_size.width;
@ -78,7 +81,7 @@ function init() {
// init light
var directional_light = new THREE.DirectionalLight(0xdddddd);
directional_light.position.set(1, 0.5, 1).normalize();
directional_light.castShadow = true;
directional_light.castShadow = false;
scene.add(directional_light);
var ambient_light = new THREE.AmbientLight(0x444444);
@ -140,8 +143,8 @@ function init() {
object.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.material.side = THREE.DoubleSide;
object.geometry.mergeVertices();
object.geometry.computeVertexNormals();
// object.geometry.mergeVertices();
// object.geometry.computeVertexNormals();
object.raycastable = true;
if (object.material.name === 'Material.054_777F0E0B_c.bmp' ||
object.material.name === 'Material.061_5C3492AB_c.bmp' ) {
@ -207,7 +210,7 @@ function init() {
container.addEventListener('mousedown', function(event) { if (event.which == 1) click(event); }, false);
container.addEventListener('mousemove', updateMouse, false);
// container.addEventListener('keydown', updateMouse, false);
document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
camera1.collidableObjects = collidableObjects;
@ -217,6 +220,50 @@ function init() {
}
function fullscreen() {
container.style.position = "absolute";
container.style.cssFloat = "top-left";
container.style.top = "0px";
container.style.bottom = "0px";
container.style.left = "0px";
container.style.right = "0px";
container.style.width="";
container.style.height="";
container.style.overflow = "hidden";
// canvas.style.position = "absolute";
// canvas.style.cssFloat = "top-left";
// canvas.style.top = "0px";
// canvas.style.bottom = "0px";
// canvas.style.left = "0px";
// canvas.style.right = "0px";
// canvas.width=window.innerWidth;
// canvas.height=window.innerHeight;
// canvas.style.overflow = "hidden";
onWindowResize();
}
function stopFullscreen() {
container.style.position = "";
container.style.cssFloat = "";
container.style.width = container_size.width + "px";
container.style.height = container_size.height + "px";
container.style.overflow = "";
// canvas.style.position = "";
// canvas.style.cssFloat = "";
// canvas.style.width = container_size.width + "px";
// canvas.style.height = container_size.height + "px";
// canvas.style.overflow = "";
onWindowResize();
}
function log() {
console.log(container.style.width);
}
function createCamera(position, target) {
var camera = new FixedCamera(
50,
@ -261,7 +308,14 @@ function render() {
renderer.render(scene, cameras.mainCamera());
// Clear canvas
ctx2d.clearRect(0,0,container_size.width, container_size.height);
// canvas.width = canvas.width;
width = container.offsetWidth / 5;
height = container.offsetHeight / 5;
left = prev.x - width/2;
bottom = renderer.domElement.height - prev.y + height/5;
// ctx2d.clearRect(left-1,bottom+1,width+1,height+1);
if (prev.go) {
// Hide arrows
@ -274,24 +328,24 @@ function render() {
// Draw border
var can_bottom = container.offsetHeight - bottom - height - 1;
ctx2d.strokeStyle = "#ffffff";
ctx2d.beginPath();
ctx2d.moveTo(left-1, can_bottom);
ctx2d.lineTo(left-1, can_bottom + height);
ctx2d.lineTo(left + width-1, can_bottom + height);
ctx2d.lineTo(left + width-1, can_bottom);
ctx2d.closePath();
ctx2d.stroke();
// var can_bottom = container.offsetHeight - bottom - height ;
// ctx2d.strokeStyle = "#ffffff";
// ctx2d.beginPath();
// ctx2d.moveTo(left-1, can_bottom);
// ctx2d.lineTo(left-1, can_bottom + height);
// ctx2d.lineTo(left + width-1, can_bottom + height);
// ctx2d.lineTo(left + width-1, can_bottom);
// ctx2d.closePath();
// ctx2d.stroke();
ctx2d.strokeStyle = "#000000";
ctx2d.beginPath();
ctx2d.moveTo(left, can_bottom + 1);
ctx2d.lineTo(left, can_bottom + height - 1);
ctx2d.lineTo(left + width - 2 , can_bottom + height-1);
ctx2d.lineTo(left + width - 2, can_bottom+1);
ctx2d.closePath();
ctx2d.stroke();
// ctx2d.strokeStyle = "#000000";
// ctx2d.beginPath();
// ctx2d.moveTo(left, can_bottom + 1);
// ctx2d.lineTo(left, can_bottom + height - 1);
// ctx2d.lineTo(left + width - 2 , can_bottom + height-1);
// ctx2d.lineTo(left + width - 2, can_bottom+1);
// ctx2d.closePath();
// ctx2d.stroke();
// Do render in previsualization
prev.camera.look();