mirror of
https://github.com/xibyte/jsketcher
synced 2025-12-10 02:13:58 +01:00
convert ViewCube to react
This commit is contained in:
Val Erastov
parent
793fcee1d5
commit
c70ef0372b
6 changed files with 131 additions and 136 deletions
|
|
@ -277,11 +277,8 @@ export default class SceneSetUp {
|
|||
|
||||
|
||||
animate() {
|
||||
let mat = new Matrix4();
|
||||
mat.extractRotation( this.camera.matrixWorldInverse );
|
||||
requestAnimationFrame( () => this.animate() );
|
||||
const controlsChangedViewpoint = this.trackballControls.evaluate();
|
||||
this.viewCube.style.transform = `translateZ(-300px) ${getCameraCSSMatrix( mat )}`;
|
||||
if (controlsChangedViewpoint || this.renderRequested) {
|
||||
this.__render_NeverCallMeFromOutside();
|
||||
}
|
||||
|
|
@ -311,37 +308,3 @@ export function getSceneSetup(object3D) {
|
|||
}
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
|
@ -145,7 +145,7 @@ export interface ActionDefinition<T = void> {
|
|||
|
||||
export interface ActionService {
|
||||
|
||||
run(id: string, data: any): void;
|
||||
run(id: string, data?: any): void;
|
||||
registerAction(action: ActionDefinition): void;
|
||||
registerActions(actions: ActionDefinition[]): void;
|
||||
showHintFor(request: HintRequest): void;
|
||||
|
|
|
|||
64
web/app/cad/scene/controls/ViewCube.less
Normal file
64
web/app/cad/scene/controls/ViewCube.less
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
.cubeHolder {
|
||||
pointer-events: auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
right:50px;
|
||||
bottom:100px;
|
||||
z-index: 100000;
|
||||
transform: scale(0.5);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
/* transition: transform 1s; */
|
||||
}
|
||||
|
||||
.cube {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(-300px);
|
||||
/* transition: transform 1s; */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.front {
|
||||
background: rgba(0, 0, 255, 0.7);
|
||||
transform: rotateY(0deg) rotateX(180deg) translateZ(-50px);
|
||||
}
|
||||
|
||||
.right {
|
||||
background: rgba(255, 0, 0, 0.7);
|
||||
transform: rotateY(90deg) rotateX(180deg) translateZ(-50px);
|
||||
}
|
||||
|
||||
.back {
|
||||
background: rgba(0, 255, 255, 0.7);
|
||||
transform: rotateY(180deg) rotateX(180deg) translateZ(-50px);
|
||||
}
|
||||
|
||||
.left {
|
||||
background: rgba(255, 0, 255, 0.7);
|
||||
transform: rotateY(-90deg) rotateX(180deg) translateZ(-50px);
|
||||
}
|
||||
|
||||
.top {
|
||||
background: rgba(0, 255, 0, 0.7);
|
||||
transform: rotateX(-90deg) rotateX(180deg) translateZ(-50px);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background: rgba(255, 255, 0, 0.7);
|
||||
transform: rotateX(90deg) rotateX(180deg) translateZ(-50px);
|
||||
}
|
||||
64
web/app/cad/scene/controls/ViewCube.tsx
Normal file
64
web/app/cad/scene/controls/ViewCube.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import React, {useContext} from "react";
|
||||
import {ApplicationContext} from "cad/context";
|
||||
import {ReactApplicationContext} from "cad/dom/ReactApplicationContext";
|
||||
import {useStream} from "ui/effects";
|
||||
import {Matrix4} from "three";
|
||||
import ls from './ViewCube.less';
|
||||
import cx from "classnames";
|
||||
|
||||
export function ViewCube() {
|
||||
|
||||
const context: ApplicationContext = useContext(ReactApplicationContext);
|
||||
|
||||
const cssMatrix = useStream(ctx => ctx.viewer.sceneSetup.sceneRendered$.map(() => {
|
||||
const mat = new Matrix4();
|
||||
mat.extractRotation( ctx.viewer.sceneSetup.camera.matrixWorldInverse );
|
||||
return getCameraCSSMatrix( mat );
|
||||
}));
|
||||
|
||||
return <div className={ls.cubeHolder}>
|
||||
<div className={ls.cube} style={{
|
||||
transform: `translateZ(-300px) ${cssMatrix}`
|
||||
}}>
|
||||
<div className={cx(ls.face, ls.front)} onClick={() => context.actionService.run('StandardViewFront')}> front</div>
|
||||
<div className={cx(ls.face, ls.back)} onClick={() => context.actionService.run('StandardViewBack')}>back</div>
|
||||
<div className={cx(ls.face, ls.right)} onClick={() => context.actionService.run('StandardViewRight')}>right</div>
|
||||
<div className={cx(ls.face, ls.left)} onClick={() => context.actionService.run('StandardViewLeft')}>left</div>
|
||||
<div className={cx(ls.face, ls.top)} onClick={() => context.actionService.run('StandardViewTop')}>top</div>
|
||||
<div className={cx(ls.face, ls.bottom)} onClick={() => context.actionService.run('StandardViewBottom')}>bottom</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import Viewer from './viewer';
|
||||
import CadScene from './cadScene';
|
||||
import {ApplicationContext} from "cad/context";
|
||||
import {ViewCube} from "cad/scene/controls/ViewCube";
|
||||
|
||||
export function activate(ctx: ApplicationContext) {
|
||||
const {services} = ctx;
|
||||
|
|
@ -44,6 +45,7 @@ export function activate(ctx: ApplicationContext) {
|
|||
}
|
||||
});
|
||||
|
||||
ctx.domService.contributeComponent(ViewCube);
|
||||
}
|
||||
|
||||
export function dispose(ctx) {
|
||||
|
|
|
|||
|
|
@ -9,109 +9,11 @@
|
|||
<script src="./lib/verb.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
.cubeHolder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
right:50px;
|
||||
bottom:100px;
|
||||
z-index: 100000;
|
||||
width: fit-content;
|
||||
transform: scale(0.5);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
/* 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" onclick="__CAD_APP.actionService.run('StandardViewFront')"> front</div>
|
||||
<div class="cube__face cube__face--back" onclick="__CAD_APP.actionService.run('StandardViewBack')">back</div>
|
||||
<div class="cube__face cube__face--right" onclick="__CAD_APP.actionService.run('StandardViewRight')">right</div>
|
||||
<div class="cube__face cube__face--left" onclick="__CAD_APP.actionService.run('StandardViewLeft')">left</div>
|
||||
<div class="cube__face cube__face--top" onclick="__CAD_APP.actionService.run('StandardViewTop')">top</div>
|
||||
<div class="cube__face cube__face--bottom" onclick="__CAD_APP.actionService.run('StandardViewBottom')">bottom</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a id="downloader" style="display: none;" ></a>
|
||||
<input id="uploader" style="display: none;" type="file">
|
||||
<div id="app" style="height: 100%;"></div>
|
||||
|
||||
|
||||
|
||||
<script src="./static/index.bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue