Improved recommendation rendering

This commit is contained in:
Thomas FORGIONE 2015-04-23 10:37:36 +02:00
parent e9af4e27e7
commit 85c896d016
3 changed files with 30 additions and 5 deletions

View File

@ -48,8 +48,8 @@ var PointerCamera = function() {
document.addEventListener('keydown', onKeyDown, false); document.addEventListener('keydown', onKeyDown, false);
document.addEventListener('keyup', onKeyUp, false); document.addEventListener('keyup', onKeyUp, false);
listenerTarget.addEventListener('mousedown', onMouseDown, false); listenerTarget.addEventListener('mousedown', function(event) { if (event.which == 1) onMouseDown();}, false);
listenerTarget.addEventListener('mousemove', onMouseMove, false); listenerTarget.addEventListener('mousemove', function(event) { if (event.which == 1) onMouseMove();}, false);
listenerTarget.addEventListener('mouseup', onMouseUp, false); listenerTarget.addEventListener('mouseup', onMouseUp, false);
listenerTarget.addEventListener('mouseout', onMouseUp, false); listenerTarget.addEventListener('mouseout', onMouseUp, false);

View File

@ -22,6 +22,6 @@
<label for="collisions">Collisions</label> <label for="collisions">Collisions</label>
<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 style="border-width:1px; border-style: solid;" id="container"></div> <div id="container"></div>
# #
</section> </section>

29
prototype/js/main.js vendored
View File

@ -7,6 +7,7 @@ var cameras = new CameraContainer();
var spheres = new Array(mesh_number); var spheres = new Array(mesh_number);
var visible = 0; var visible = 0;
var stats; var stats;
var ctx2d;
var loader; var loader;
@ -50,7 +51,15 @@ function init() {
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 renderer.sortObjects = false;
var canvas = document.createElement('canvas');
canvas.style.position ="absolute";
canvas.style.cssFloat = 'top-left';
canvas.width = container_size.width;
canvas.height = container_size.height;
ctx2d = canvas.getContext('2d');
ctx2d.lineWidth = 2;
// on initialise la scène // on initialise la scène
scene = new THREE.Scene(); scene = new THREE.Scene();
@ -63,6 +72,7 @@ function init() {
stats.domElement.style.position = 'absolute'; stats.domElement.style.position = 'absolute';
stats.domElement.style.cssFloat = "top-left"; stats.domElement.style.cssFloat = "top-left";
container.appendChild( stats.domElement ); container.appendChild( stats.domElement );
container.appendChild(canvas);
container.appendChild(renderer.domElement); container.appendChild(renderer.domElement);
// init light // init light
@ -193,7 +203,7 @@ function init() {
window.addEventListener('resize', onWindowResize, false); window.addEventListener('resize', onWindowResize, false);
container.addEventListener('mousedown', click, false); container.addEventListener('mousedown', function(event) { if (event.which == 1) click(event); }, false);
container.addEventListener('mousemove', mouseMove, false); container.addEventListener('mousemove', mouseMove, false);
camera1.collidableObjects = collidableObjects; camera1.collidableObjects = collidableObjects;
@ -245,6 +255,9 @@ function render() {
renderer.setViewport(left, bottom, width, height); renderer.setViewport(left, bottom, width, height);
renderer.render(scene, cameras.mainCamera()); renderer.render(scene, cameras.mainCamera());
// Clear canvas
ctx2d.clearRect(0,0,container_size.width, container_size.height);
if (prev.go) { if (prev.go) {
// Hide arrows // Hide arrows
cameras.map(function(camera) { if (camera instanceof FixedCamera) hide(camera); }); cameras.map(function(camera) { if (camera instanceof FixedCamera) hide(camera); });
@ -254,6 +267,18 @@ function render() {
left = prev.x - width/2; left = prev.x - width/2;
bottom = prev.y + height/5; bottom = prev.y + height/5;
// Draw border
var can_bottom = container.offsetHeight - bottom - height - 1;
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();
// Do render in previsualization
prev.camera.look(); prev.camera.look();
renderer.setScissor(left, bottom, width, height); renderer.setScissor(left, bottom, width, height);
renderer.enableScissorTest (true); renderer.enableScissorTest (true);