Skip to content

Commit

Permalink
fixed bug side views
Browse files Browse the repository at this point in the history
  • Loading branch information
Walter Zimmer committed Jan 7, 2019
1 parent c4b79be commit 7c99190
Show file tree
Hide file tree
Showing 9 changed files with 1,872 additions and 848 deletions.
517 changes: 293 additions & 224 deletions .idea/workspace.xml

Large diffs are not rendered by default.

32 changes: 16 additions & 16 deletions camera_test.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
var clock = new THREE.Clock();

// custom global variables
var MovingCube;
var movingCube;
var chaseCamera, topCamera;
var chaseCameraActive = false;

Expand Down Expand Up @@ -134,9 +134,9 @@
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zneg.png' ) }));
var MovingCubeMat = new THREE.MeshFaceMaterial(materialArray);
var MovingCubeGeom = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materialArray );
MovingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
MovingCube.position.set(0, 25.1, 0);
scene.add( MovingCube );
movingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
movingCube.position.set(0, 25.1, 0);
scene.add( movingCube );

// a little bit of scenery...

Expand Down Expand Up @@ -190,39 +190,39 @@

// move forwards/backwards/left/right
if ( keyboard.pressed("W") )
MovingCube.translateZ( -moveDistance );
movingCube.translateZ( -moveDistance );
if ( keyboard.pressed("S") )
MovingCube.translateZ( moveDistance );
movingCube.translateZ( moveDistance );
if ( keyboard.pressed("Q") )
MovingCube.translateX( -moveDistance );
movingCube.translateX( -moveDistance );
if ( keyboard.pressed("E") )
MovingCube.translateX( moveDistance );
movingCube.translateX( moveDistance );

// rotate left/right/up/down
var rotation_matrix = new THREE.Matrix4().identity();
if ( keyboard.pressed("A") )
MovingCube.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
movingCube.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
if ( keyboard.pressed("D") )
MovingCube.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
movingCube.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
if ( keyboard.pressed("R") )
MovingCube.rotateOnAxis( new THREE.Vector3(1,0,0), rotateAngle);
movingCube.rotateOnAxis( new THREE.Vector3(1,0,0), rotateAngle);
if ( keyboard.pressed("F") )
MovingCube.rotateOnAxis( new THREE.Vector3(1,0,0), -rotateAngle);
movingCube.rotateOnAxis( new THREE.Vector3(1,0,0), -rotateAngle);

if ( keyboard.pressed("Z") )
{
MovingCube.position.set(0,25.1,0);
MovingCube.rotation.set(0,0,0);
movingCube.position.set(0,25.1,0);
movingCube.rotation.set(0,0,0);
}

var relativeCameraOffset = new THREE.Vector3(0,50,200);

var cameraOffset = relativeCameraOffset.applyMatrix4( MovingCube.matrixWorld );
var cameraOffset = relativeCameraOffset.applyMatrix4( movingCube.matrixWorld );

chaseCamera.position.x = cameraOffset.x;
chaseCamera.position.y = cameraOffset.y;
chaseCamera.position.z = cameraOffset.z;
chaseCamera.lookAt( MovingCube.position );
chaseCamera.lookAt( movingCube.position );

//camera.updateMatrix();
//camera.updateProjectionMatrix();
Expand Down
21 changes: 15 additions & 6 deletions css/label_tool.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
/*variables*/
body {
--header-height: 50px;
--image-panel-height: 240px;
}

.label-header-brand {
float: left;
height: 50px;
Expand Down Expand Up @@ -578,29 +584,32 @@ text {
background: seagreen;
}

#panelSideView {
#canvasSideView {
position: fixed;
width: 640px;
width: 33.33vw;
height: 311px;
z-index: 102;
left: 0px;
top: 290px;
border: 1px;
border-style: outset;
}

#panelFrontView {
#canvasFrontView {
position: fixed;
width: 640px;
width: 33.33vw;
height: 311px;
z-index: 102;
left: 0px;
top: 600px;
border: 1px;
border-style: outset;
}

#panelBev {
#canvasBev {
position: fixed;
width: 640px;
width: 33.33vw;
height: 311px;
z-index: 102;
left: 0px;
top: 910px;
Expand Down
9 changes: 1 addition & 8 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
<script src="js/lib/Toast.js"></script>
<script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/WebGL.js"></script>

<!--TODO: try converting BEV into image http://html2canvas.hertzen.com/-->
<!--<script src="node_modules/html2canvas/dist/html2canvas.js"></script>-->
Expand Down Expand Up @@ -100,13 +101,6 @@
</ul>
</div>
<div id="label-tool-wrapper">
<!--<div id="canvas3d" style="z-index: 0; background-color: #000000;"></div>-->
<!--<div id="jpeg-label-canvas-front-left"></div>-->
<!--<div id="jpeg-label-canvas-front"></div>-->
<!--<div id="jpeg-label-canvas-front-right"></div>-->
<!--<div id="jpeg-label-canvas-back-right"></div>-->
<!--<div id="jpeg-label-canvas-back"></div>-->
<!--<div id="jpeg-label-canvas-back-left"></div>-->
</div>

<!-- <div id="label-tool-status-overlay" class="label-tool-overlay">
Expand All @@ -125,7 +119,6 @@
</div>
</div>
</div> -->
<!--<script src="js/lib/three.min.js"></script>-->

<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/SceneUtils.js"></script>
Expand Down
116 changes: 116 additions & 0 deletions js/lib/THREEx.KeyboardState.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
// THREEx.KeyboardState.js keep the current state of the keyboard.
// It is possible to query it at any time. No need of an event.
// This is particularly convenient in loop driven case, like in
// 3D demos or games.
//
// # Usage
//
// **Step 1**: Create the object
//
// ```var keyboard = new THREEx.KeyboardState();```
//
// **Step 2**: Query the keyboard state
//
// This will return true if shift and A are pressed, false otherwise
//
// ```keyboard.pressed("shift+A")```
//
// **Step 3**: Stop listening to the keyboard
//
// ```keyboard.destroy()```
//
// NOTE: this library may be nice as standaline. independant from three.js
// - rename it keyboardForGame
//
// # Code
//

/** @namespace */
var THREEx = THREEx || {};

/**
* - NOTE: it would be quite easy to push event-driven too
* - microevent.js for events handling
* - in this._onkeyChange, generate a string from the DOM event
* - use this as event name
*/
THREEx.KeyboardState = function()
{
// to store the current state
this.keyCodes = {};
this.modifiers = {};

// create callback to bind/unbind keyboard events
var self = this;
this._onKeyDown = function(event){ self._onKeyChange(event, true); };
this._onKeyUp = function(event){ self._onKeyChange(event, false);};

// bind keyEvents
document.addEventListener("keydown", this._onKeyDown, false);
document.addEventListener("keyup", this._onKeyUp, false);
}

/**
* To stop listening of the keyboard events
*/
THREEx.KeyboardState.prototype.destroy = function()
{
// unbind keyEvents
document.removeEventListener("keydown", this._onKeyDown, false);
document.removeEventListener("keyup", this._onKeyUp, false);
}

THREEx.KeyboardState.MODIFIERS = ['shift', 'ctrl', 'alt', 'meta'];
THREEx.KeyboardState.ALIAS = {
'left' : 37,
'up' : 38,
'right' : 39,
'down' : 40,
'space' : 32,
'pageup' : 33,
'pagedown' : 34,
'tab' : 9
};

/**
* to process the keyboard dom event
*/
THREEx.KeyboardState.prototype._onKeyChange = function(event, pressed)
{
// log to debug
//console.log("onKeyChange", event, pressed, event.keyCode, event.shiftKey, event.ctrlKey, event.altKey, event.metaKey)

// update this.keyCodes
var keyCode = event.keyCode;
this.keyCodes[keyCode] = pressed;

// update this.modifiers
this.modifiers['shift']= event.shiftKey;
this.modifiers['ctrl'] = event.ctrlKey;
this.modifiers['alt'] = event.altKey;
this.modifiers['meta'] = event.metaKey;
}

/**
* query keyboard state to know if a key is pressed of not
*
* @param {String} keyDesc the description of the key. format : modifiers+key e.g shift+A
* @returns {Boolean} true if the key is pressed, false otherwise
*/
THREEx.KeyboardState.prototype.pressed = function(keyDesc)
{
var keys = keyDesc.split("+");
for(var i = 0; i < keys.length; i++){
var key = keys[i];
var pressed;
if( THREEx.KeyboardState.MODIFIERS.indexOf( key ) !== -1 ){
pressed = this.modifiers[key];
}else if( Object.keys(THREEx.KeyboardState.ALIAS).indexOf( key ) != -1 ){
pressed = this.keyCodes[ THREEx.KeyboardState.ALIAS[key] ];
}else {
pressed = this.keyCodes[key.toUpperCase().charCodeAt(0)]
}
if( !pressed) return false;
};
return true;
}
94 changes: 94 additions & 0 deletions js/lib/WebGL.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/**
* @author alteredq / http://alteredqualia.com/
* @author mr.doob / http://mrdoob.com/
*/

var WEBGL = {

isWebGLAvailable: function () {

try {

var canvas = document.createElement( 'canvas' );
return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );

} catch ( e ) {

return false;

}

},

isWebGL2Available: function () {

try {

var canvas = document.createElement( 'canvas' );
return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );

} catch ( e ) {

return false;

}

},

getWebGLErrorMessage: function () {

return this.getErrorMessage( 1 );

},

getWebGL2ErrorMessage: function () {

return this.getErrorMessage( 2 );

},

getErrorMessage: function ( version ) {

var names = {
1: 'WebGL',
2: 'WebGL 2'
};

var contexts = {
1: window.WebGLRenderingContext,
2: window.WebGL2RenderingContext
};

var message = 'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';

var element = document.createElement( 'div' );
element.id = 'webglmessage';
element.style.fontFamily = 'monospace';
element.style.fontSize = '13px';
element.style.fontWeight = 'normal';
element.style.textAlign = 'center';
element.style.background = '#fff';
element.style.color = '#000';
element.style.padding = '1.5em';
element.style.width = '400px';
element.style.margin = '5em auto 0';

if ( contexts[ version ] ) {

message = message.replace( '$0', 'graphics card' );

} else {

message = message.replace( '$0', 'browser' );

}

message = message.replace( '$1', names[ version ] );

element.innerHTML = message;

return element;

}

};
Loading

0 comments on commit 7c99190

Please sign in to comment.