Backup_Repos/jsketcher
1
0
Fork 0
mirror of https://github.com/xibyte/jsketcher synced 2025-12-07 00:45:08 +01:00
Code Issues Projects Releases Wiki Activity

Partially functional view cube.

Browse source
This commit is contained in:
Mike Molinari 2022-11-09 03:41:45 +00:00
parent ff6f564958
commit 9f287e77fb
2 changed files with 141 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
modules/scene/sceneSetup.ts
View file

@ -34,6 +34,7 @@ export default class SceneSetUp {
trackballControls: CADTrackballControls; trackballControls: CADTrackballControls;
viewportSizeUpdate$ = stream(); viewportSizeUpdate$ = stream();
sceneRendered$: Emitter<any> = stream(); sceneRendered$: Emitter<any> = stream();
viewCube:{};
renderRequested: boolean; renderRequested: boolean;
@ -45,6 +46,7 @@ export default class SceneSetUp {
this.rootGroup = this.scene; this.rootGroup = this.scene;
this.scene.userData.sceneSetUp = this; this.scene.userData.sceneSetUp = this;
this.renderRequested = false; this.renderRequested = false;
this.viewCube = document.querySelector('.cube');
this.setUpCamerasAndLights(); this.setUpCamerasAndLights();
this.setUpControls(); this.setUpControls();
@ -268,13 +270,18 @@ export default class SceneSetUp {
camera.up = new Vector3(0, 1, 0); camera.up = new Vector3(0, 1, 0);
} }
_zoomMeasure() { _zoomMeasure() {
return this.trackballControls.object.position.length() / 1e3; return this.trackballControls.object.position.length() / 1e3;
} }
animate() { animate() {
let mat = new Matrix4();
mat.extractRotation( this.camera.matrixWorldInverse );
requestAnimationFrame( () => this.animate() ); requestAnimationFrame( () => this.animate() );
const controlsChangedViewpoint = this.trackballControls.evaluate(); const controlsChangedViewpoint = this.trackballControls.evaluate();
this.viewCube.style.transform = `translateZ(-300px) ${getCameraCSSMatrix( mat )}`;
if (controlsChangedViewpoint || this.renderRequested) { if (controlsChangedViewpoint || this.renderRequested) {
this.__render_NeverCallMeFromOutside(); this.__render_NeverCallMeFromOutside();
} }
@ -303,4 +310,38 @@ export function getSceneSetup(object3D) {
return null; return null;
} }
const ORTHOGRAPHIC_CAMERA_FACTOR = 1; const ORTHOGRAPHIC_CAMERA_FACTOR = 1;
function getCameraCSSMatrix(matrix) {
var elements = matrix.elements;
return 'matrix3d(' +
epsilon(elements[0]) + ',' +
epsilon(-elements[1]) + ',' +
epsilon(elements[2]) + ',' +
epsilon(elements[3]) + ',' +
epsilon(elements[4]) + ',' +
epsilon(-elements[5]) + ',' +
epsilon(elements[6]) + ',' +
epsilon(elements[7]) + ',' +
epsilon(elements[8]) + ',' +
epsilon(-elements[9]) + ',' +
epsilon(elements[10]) + ',' +
epsilon(elements[11]) + ',' +
epsilon(elements[12]) + ',' +
epsilon(-elements[13]) + ',' +
epsilon(elements[14]) + ',' +
epsilon(elements[15]) +
')';
}
function epsilon( value ) {
return Math.abs( value ) < 1e-10 ? 0 : value;
}

98
web/index.html
View file

@ -9,9 +9,107 @@
<script src="./lib/verb.js"></script> <script src="./lib/verb.js"></script>
</head> </head>
<body> <body>
<style>
.cubeHolder {
width: 100px;
height: 100px;
position: absolute;
right:50px;
bottom:100px;
z-index: 100000;
width: fit-content;
transform: scale(0.5);
/* transition: transform 1s; */
}
.cube {
width: 50px;
height: 50px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-300px);
/* transition: transform 1s; */
}
.cube__face {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid black;
line-height: 100px;
font-size: 20px;
font-weight: bold;
color: white;
text-align: center;
}
.cube__face--front {
background: rgba(0, 0, 255, 0.7);
}
.cube__face--right {
background: rgba(255, 0, 0, 0.7);
}
.cube__face--back {
background: rgba(0, 255, 255, 0.7);
}
.cube__face--left {
background: rgba(255, 0, 255, 0.7);
}
.cube__face--top {
background: rgba(0, 255, 0, 0.7);
}
.cube__face--bottom {
background: rgba(255, 255, 0, 0.7);
}
.cube__face--front {
transform: rotateY(0deg) rotateX(180deg) translateZ(-50px);
}
.cube__face--right {
transform: rotateY(90deg) rotateX(180deg) translateZ(-50px);
}
.cube__face--back {
transform: rotateY(180deg) rotateX(180deg) translateZ(-50px);
}
.cube__face--left {
transform: rotateY(-90deg) rotateX(180deg) translateZ(-50px);
}
.cube__face--top {
transform: rotateX(-90deg) rotateX(180deg) translateZ(-50px);
}
.cube__face--bottom {
transform: rotateX(90deg) rotateX(180deg) translateZ(-50px);
}
</style>
<div class="cubeHolder">
<div class="cube">
<div class="cube__face cube__face--front">front</div>
<div class="cube__face cube__face--back">back</div>
<div class="cube__face cube__face--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
<a id="downloader" style="display: none;" ></a> <a id="downloader" style="display: none;" ></a>
<input id="uploader" style="display: none;" type="file"> <input id="uploader" style="display: none;" type="file">
<div id="app" style="height: 100%;"></div> <div id="app" style="height: 100%;"></div>
<script src="./static/index.bundle.js"></script> <script src="./static/index.bundle.js"></script>
</body> </body>
</html> </html>