Skip to content

Commit

Permalink
Transform Controls draft
Browse files Browse the repository at this point in the history
  • Loading branch information
@martinRenou
martinRenou committed May 26, 2023
1 parent e0fbd09 commit 3de7ffd
Showing 1 changed file with 73 additions and 39 deletions.
112 changes: 73 additions & 39 deletions packages/jupytercad-extension/src/mainview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
disposeBoundsTree
} from 'three-mesh-bvh';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
import { v4 as uuid } from 'uuid';

import {
Expand Down Expand Up @@ -230,7 +231,7 @@ export class MainView extends React.Component<IProps, IStates> {
DEFAULT_EDGE_COLOR.set(getCSSVariableColor(DEFAULT_EDGE_COLOR_CSS));
SELECTED_MESH_COLOR.set(getCSSVariableColor(SELECTED_MESH_COLOR_CSS));

this._camera = new THREE.PerspectiveCamera(90, 2, 0.1, 1000);
this._camera = new THREE.PerspectiveCamera(45, 2, 0.1, 1000);
this._camera.position.set(8, 8, 8);
this._camera.up.set(0, 0, 1);

Expand Down Expand Up @@ -321,6 +322,15 @@ export class MainView extends React.Component<IProps, IStates> {
);
}, 100)
);

this._transformControls = new TransformControls(this._camera, this._renderer.domElement);
this._transformControls.addEventListener('dragging-changed', function (event) {
controls.enabled = !event.value;
});
this._scene.add(this._transformControls);
this._transformControls.addEventListener( 'objectChange', function () {
console.log('object changed!');
} );
}
};

Expand Down Expand Up @@ -619,10 +629,16 @@ export class MainView extends React.Component<IProps, IStates> {
geometry.computeBoundsTree();
}

// Get the old center of the object and center its vertices to the scene
const center = new THREE.Vector3();
geometry.boundingBox?.getCenter(center);
geometry.center();

const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.name = objName;
mesh.visible = visible;
mesh.position.copy(center);

if (visible) {
this._boundingGroup.expandByObject(mesh);
Expand All @@ -644,8 +660,19 @@ export class MainView extends React.Component<IProps, IStates> {
);
const edgeGeometry = new THREE.BufferGeometry();
edgeGeometry.setAttribute('position', edgeVertices);
const edgeCenter = new THREE.Vector3();
edgeGeometry.computeBoundingBox();
edgeGeometry.boundingBox?.getCenter(edgeCenter);
edgeGeometry.center();

const edgePosition = new THREE.Vector3();
edgePosition.copy(center)
edgePosition.multiplyScalar(-1);
edgePosition.add(edgeCenter);

const edgesMesh = new THREE.Line(edgeGeometry, edgeMaterial);
edgesMesh.name = 'edge';
edgesMesh.position.copy(edgePosition);

mesh.add(edgesMesh);
});
Expand Down Expand Up @@ -736,6 +763,8 @@ export class MainView extends React.Component<IProps, IStates> {
}

private _updateSelected(names: string[]) {
this._transformControls.detach();

// Reset original color for old selection
for (const selectedMesh of this._selectedMeshes) {
let originalColor = DEFAULT_MESH_COLOR;
Expand Down Expand Up @@ -765,6 +794,10 @@ export class MainView extends React.Component<IProps, IStates> {
this._selectedMeshes.push(selected);
selected.material.color = SELECTED_MESH_COLOR;
}

if (this._selectedMeshes.length === 1) {
this._transformControls.attach(this._selectedMeshes[0]);
}
}

private _onSharedMetadataChanged = (
Expand Down Expand Up @@ -974,43 +1007,43 @@ export class MainView extends React.Component<IProps, IStates> {
}

private _setupExplodedView() {
if (this._explodedView.enabled) {
const center = new THREE.Vector3();
this._boundingGroup.getCenter(center);

this._explodedViewLinesHelperGroup?.removeFromParent();
this._explodedViewLinesHelperGroup = new THREE.Group();

for (const mesh of this._meshGroup?.children as BasicMesh[]) {
const explodedState = this._computeExplodedState(mesh);

mesh.position.set(0, 0, 0);
mesh.translateOnAxis(explodedState.vector, explodedState.distance);

// Draw lines
const material = new THREE.LineBasicMaterial({
color: DEFAULT_EDGE_COLOR,
linewidth: 2
});
const geometry = new THREE.BufferGeometry().setFromPoints([
explodedState.oldGeometryCenter,
explodedState.newGeometryCenter
]);
const line = new THREE.Line(geometry, material);
line.name = mesh.name;
line.visible = mesh.visible;

this._explodedViewLinesHelperGroup.add(line);
}

this._scene.add(this._explodedViewLinesHelperGroup);
} else {
// Exploded view is disabled, we reset the initial positions
for (const mesh of this._meshGroup?.children as BasicMesh[]) {
mesh.position.set(0, 0, 0);
}
this._explodedViewLinesHelperGroup?.removeFromParent();
}
// if (this._explodedView.enabled) {
// const center = new THREE.Vector3();
// this._boundingGroup.getCenter(center);

// this._explodedViewLinesHelperGroup?.removeFromParent();
// this._explodedViewLinesHelperGroup = new THREE.Group();

// for (const mesh of this._meshGroup?.children as BasicMesh[]) {
// const explodedState = this._computeExplodedState(mesh);

// mesh.position.set(0, 0, 0);
// mesh.translateOnAxis(explodedState.vector, explodedState.distance);

// // Draw lines
// const material = new THREE.LineBasicMaterial({
// color: DEFAULT_EDGE_COLOR,
// linewidth: 2
// });
// const geometry = new THREE.BufferGeometry().setFromPoints([
// explodedState.oldGeometryCenter,
// explodedState.newGeometryCenter
// ]);
// const line = new THREE.Line(geometry, material);
// line.name = mesh.name;
// line.visible = mesh.visible;

// this._explodedViewLinesHelperGroup.add(line);
// }

// this._scene.add(this._explodedViewLinesHelperGroup);
// } else {
// // Exploded view is disabled, we reset the initial positions
// for (const mesh of this._meshGroup?.children as BasicMesh[]) {
// mesh.position.set(0, 0, 0);
// }
// this._explodedViewLinesHelperGroup?.removeFromParent();
// }
}

private _computeExplodedState(mesh: BasicMesh) {
Expand Down Expand Up @@ -1173,7 +1206,8 @@ export class MainView extends React.Component<IProps, IStates> {
private _geometry: THREE.BufferGeometry; // Threejs BufferGeometry
private _refLength: number | null = null; // Length of bounding box of current object
private _sceneAxe: THREE.Object3D | null; // Array of X, Y and Z axe
private _controls: OrbitControls; // Threejs control
private _controls: OrbitControls; // Threejs orbit control
private _transformControls: TransformControls; // Threejs transform control
private _pointer3D: IPointer | null = null;
private _collaboratorPointers: IDict<IPointer>;
private _pointerGeometry: THREE.SphereGeometry;
Expand Down

0 comments on commit 3de7ffd

Please sign in to comment.