three js update

modules/scene/objects/scalableLine.js

@@ -6,13 +6,14 @@ import {arrToThree} from 'math/vectorAdapters';
 import {ORIGIN} from '../../math/l3space';
 import {getSceneSetup} from '../sceneSetup';
 import calcFaceNormal from '../utils/calcFaceNormal';
+import {BufferGeometry} from "three/src/core/BufferGeometry";
 
 export default class ScalableLine extends Mesh {
 
   constructor(tesselation, width, color, opacity, smooth, ambient) {
     super(createGeometry(tesselation, smooth), createMaterial(color, opacity, ambient));
     this.width = width;
-    this.morphTargetInfluences[0] = 0;
+    this.morphTargetInfluences = [0];
   }
 
   updateMatrix() {
@@ -123,8 +124,10 @@ function createGeometry(tessellation, smooth) {
   geometry.faces.push(new Face3(n - 2, n - 1, n, endNormal));
   geometry.faces.push(new Face3(n, n - 3, n - 2, endNormal));
 
+
   geometry.morphTargets.push({name: 'scaleTargets', vertices: scaleTargets});
-  return geometry;
+
+  return new BufferGeometry().fromGeometry(geometry);
 }
 
 const morphBase = 10;

modules/scene/sceneSetup.ts

@@ -2,14 +2,41 @@ import DPR from 'dpr';
 import './utils/threeLoader';
 import './utils/vectorThreeEnhancement';
 import {CADTrackballControls} from './controls/CADTrackballControls';
+import {
+  Object3D,
+  Scene,
+  OrthographicCamera,
+  PerspectiveCamera,
+  PointLight,
+  WebGLRenderer,
+  Vector3,
+  Euler,
+  Matrix4, Raycaster, Box3
+} from "three";
+import {TransformControls} from "three/examples/jsm/controls/TransformControls";
 
 export default class SceneSetUp {
+  workingSphere: number;
+  container: HTMLElement;
+  scene: Scene;
+  rootGroup: Object3D;
+  onRendered: any;
+  oCamera: OrthographicCamera;
+  pCamera: PerspectiveCamera;
+  camera: PerspectiveCamera;
+  light: PointLight;
+  renderer: WebGLRenderer;
+  private _prevContainerWidth: number;
+  private _prevContainerHeight: number;
+  trackballControls: CADTrackballControls;
+  transformControls: TransformControls;
+  updateControlsAndHelpers: () => void;
   
   constructor(container, onRendered) {
     
     this.workingSphere = 10000;
     this.container = container;
-    this.scene = new THREE.Scene();
+    this.scene = new Scene();
     this.rootGroup = this.scene;
     this.onRendered = onRendered;
     this.scene.userData.sceneSetUp = this;
@@ -28,7 +55,7 @@ export default class SceneSetUp {
     let width = this.container.clientWidth;
     let height = this.container.clientHeight;
     let factor = ORTHOGRAPHIC_CAMERA_FACTOR;
-    this.oCamera = new THREE.OrthographicCamera(-width / factor,
+    this.oCamera = new OrthographicCamera(-width / factor,
       width / factor,
       height / factor,
       -height / factor, 0.1, 10000);
@@ -38,7 +65,7 @@ export default class SceneSetUp {
   }
 
   createPerspectiveCamera() {
-    this.pCamera = new THREE.PerspectiveCamera( 60, this.aspect(), 0.1, 10000 );
+    this.pCamera = new PerspectiveCamera( 60, this.aspect(), 0.1, 10000 );
     this.pCamera.position.z = 1000;
     this.pCamera.position.x = -1000;
     this.pCamera.position.y = 300;
@@ -50,11 +77,11 @@ export default class SceneSetUp {
 
     this.camera = this.pCamera;
     
-    this.light = new THREE.PointLight( 0xffffff);
+    this.light = new PointLight( 0xffffff);
     this.light.position.set( 10, 10, 10 );
     this.scene.add(this.light);
 
-    this.renderer = new THREE.WebGLRenderer();
+    this.renderer = new WebGLRenderer();
     this.renderer.setPixelRatio(DPR);
     this.renderer.setClearColor(0x808080, 1);
     this.renderer.setSize( this.container.clientWidth,  this.container.clientHeight );
@@ -96,9 +123,9 @@ export default class SceneSetUp {
   }
   
   setCamera(camera) {
-    let camPosition = new THREE.Vector3();
-    let camRotation = new THREE.Euler();
-    let tempMatrix = new THREE.Matrix4();
+    let camPosition = new Vector3();
+    let camRotation = new Euler();
+    let tempMatrix = new Matrix4();
 
     camPosition.setFromMatrixPosition( this.camera.matrixWorld );
     camRotation.setFromRotationMatrix( tempMatrix.extractRotation( this.camera.matrixWorld ) );
@@ -119,7 +146,7 @@ export default class SceneSetUp {
 
   setUpControls() {
     //  controls = new THREE.OrbitControls( camera , renderer.domElement);
-    let trackballControls = new CADTrackballControls(this.camera , this.renderer.domElement);
+    let trackballControls: any = new CADTrackballControls(this.camera , this.renderer.domElement);
 
     // document.addEventListener( 'mousemove', function(){
 
@@ -139,7 +166,7 @@ export default class SceneSetUp {
     trackballControls.keys = [ 65, 83, 68 ];
     trackballControls.addEventListener( 'change', () => this.render());
 
-    let transformControls = new THREE.TransformControls( this.camera, this.renderer.domElement );
+    let transformControls: any = new TransformControls( this.camera, this.renderer.domElement );
     transformControls.addEventListener( 'change', () => this.render() );
     this.scene.add( transformControls );
     
@@ -163,12 +190,12 @@ export default class SceneSetUp {
   }
 
   createRaycaster(viewX, viewY) {
-    let raycaster = new THREE.Raycaster();
-    raycaster.linePrecision = 12 * (this._zoomMeasure() * 0.8);
+    let raycaster = new Raycaster();
+    raycaster.params.Line.threshold = 12 * (this._zoomMeasure() * 0.8);
     let x = ( viewX / this.container.clientWidth ) * 2 - 1;
     let y = - ( viewY / this.container.clientHeight ) * 2 + 1;
 
-    let mouse = new THREE.Vector3( x, y, 1 );
+    let mouse = new Vector3( x, y, 1 );
     raycaster.setFromCamera( mouse, this.camera );
     return raycaster;
   }
@@ -182,9 +209,9 @@ export default class SceneSetUp {
   }
 
   customRaycast(from3, to3, objects) {
-    let raycaster = new THREE.Raycaster();
-    let from = new THREE.Vector3().fromArray(from3);
-    let to = new THREE.Vector3().fromArray(to3);
+    let raycaster = new Raycaster();
+    let from = new Vector3().fromArray(from3);
+    let to = new Vector3().fromArray(to3);
     let dir = to.sub(from);
     let dist = dir.length();
     raycaster.set(from, dir.normalize());
@@ -195,7 +222,7 @@ export default class SceneSetUp {
     let width = this.container.clientWidth, height = this.container.clientHeight;
     let widthHalf = width / 2, heightHalf = height / 2;
 
-    let vector = new THREE.Vector3();
+    let vector = new Vector3();
     vector.copy(pos);
     vector.project(this.camera);
 
@@ -205,16 +232,16 @@ export default class SceneSetUp {
   }
   
   lookAtObject(obj) {
-    let box = new THREE.Box3();
+    let box = new Box3();
     box.setFromObject(obj);
-    let size = box.size();
+    let size = box.getSize(new Vector3());
     //this.camera.position.set(0,0,0);
-    box.center(this.camera.position);
+    box.getCenter(this.camera.position);
     const maxSize = Math.max(size.x, size.z);
     const dist = maxSize / 2 / Math.tan(Math.PI * this.camera.fov / 360);
     this.camera.position.addScaledVector(this.camera.position.normalize(), 5000);
     //this.camera.position.sub(new THREE.Vector3(0, 0, dist));
-    this.camera.up = new THREE.Vector3(0, 1, 0);
+    this.camera.up = new Vector3(0, 1, 0);
   }
 
   _zoomMeasure() {

package-lock.json

@@ -11128,9 +11128,9 @@
       "dev": true
     },
     "three": {
-      "version": "0.89.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.89.0.tgz",
-      "integrity": "sha1-RELYGaYWiHG40ss3rRKiQxDBcPU="
+      "version": "0.118.3",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.118.3.tgz",
+      "integrity": "sha512-ijECXrNzDkHieoeh2H69kgawTGH8DiamhR4uBN8jEM7VHSKvfTdEvOoHsA8Aq7dh7PHAxhlqBsN5arBI3KixSw=="
     },
     "throttleit": {
       "version": "1.0.0",

package.json

@@ -78,6 +78,6 @@
     "react-icons": "^3.10.0",
     "react-toastify": "^5.5.0",
     "sprintf": "0.1.5",
-    "three": "0.89.0"
+    "three": "^0.118.3"
   }
 }

web/app/cad/location/LocationControl.ts

@@ -0,0 +1,12 @@
+import CSysObject3D from "../craft/datum/csysObject";
+import CSys from "math/csys";
+import SceneSetUp from "scene/sceneSetup";
+
+
+export class LocationControl extends CSysObject3D {
+
+  constructor(csys: CSys, sceneSetup: SceneSetUp, arrowParams: any) {
+    super(csys, sceneSetup, arrowParams);
+  }
+
+}

web/app/cad/location/LocationDialog.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useContext} from 'react';
+import React, {useCallback, useContext, useEffect} from 'react';
 import {useStreamWithUpdater} from "ui/effects";
 import {AppContext} from "../dom/components/AppContext";
 import {GenericWizard} from "ui/components/GenericWizard";
@@ -8,16 +8,28 @@ import Label from "ui/components/controls/Label";
 import Folder from "ui/components/Folder";
 import {never} from "lstream";
 import NumberControl from "ui/components/controls/NumberControl";
-import {Location} from "../model/location";
-import {DEG_RAD} from "../../math/math";
-import CSys from "math/csys";
+import {Matrix3} from "math/l3space";
+
+import {LocationControl} from "./LocationControl";
 
 export function LocationDialog() {
 
+  const ctx = useContext(AppContext);
+
   const [req, setReq] = useStreamWithUpdater(ctx => ctx.locationService.editLocationRequest$);
 
 
-  const [location, setLocation] = useStreamWithUpdater(() => req ? req.shell.location$ : never<CSys>());
+  const [location, setLocation] = useStreamWithUpdater(() => req ? req.shell.location$ : never<Matrix3>());
+
+  useEffect(() => {
+    if (!req) {
+      return;
+    }
+
+    // const locationControl = new LocationControl();
+    // ctx.cadScene.workGroup.add(locationControl);
+    // return () => ctx.cadScene.workGroup.add(locationControl);
+  });
 
   const setX = useCallback(x => {
     location.tx = parseFloat(x);
@@ -49,7 +61,6 @@ export function LocationDialog() {
   //   setLocation(location);
   // }, [setLocation]);
 
-  const ctx = useContext(AppContext);
 
   if (!req) {
     return null;

web/app/cad/scene/cadScene.ts

@@ -2,13 +2,18 @@ import {AXIS} from '../../../../modules/math/l3space'
 import {createArrow} from 'scene/objects/auxiliary';
 import Vector from 'math/vector';
 import {OnTopOfAll} from 'scene/materialMixins';
-import {moveObject3D, setBasisToObject3D} from 'scene/objects/transform';
+import {moveObject3D} from 'scene/objects/transform';
 
 import * as SceneGraph from 'scene/sceneGraph';
-import {setCsysToViewMatrix} from '../../../../modules/scene/objects/transform';
+import {setCsysToViewMatrix} from 'scene/objects/transform';
+import {Object3D} from "three";
 
 export default class CadScene {
 
+  workGroup: Object3D;
+  auxGroup: Object3D;
+  basisGroup: Object3D;
+
   constructor(rootGroup) {
     this.workGroup = SceneGraph.createGroup();
     this.auxGroup = SceneGraph.createGroup();

web/app/cad/scene/scenePlugin.ts

@@ -1,11 +1,12 @@
 import Viewer from './viewer';
 import CadScene from './cadScene';
 import {externalState, stream} from 'lstream';
+import {AppTabsService} from "../dom/appTabsPlugin";
 
 export function defineStreams({streams, services}) {
   streams.cadScene = {
     sceneRendered: stream(),
-    cameraMode: externalState(() => services.viewer.getCameraMode(), mode => viewer.setCameraMode(mode))
+    cameraMode: externalState(() => services.viewer.getCameraMode(), mode => services.viewer.setCameraMode(mode))
   };
 }
 
@@ -24,6 +25,7 @@ export function activate({streams, services}) {
   // services.viewer.setCameraMode(CAMERA_MODE.ORTHOGRAPHIC);
 
   document.addEventListener('contextmenu', e => {
+    // @ts-ignore
     if (e.target.closest('#viewer-container')) {
       e.preventDefault();
     }
@@ -34,3 +36,12 @@ export function activate({streams, services}) {
 export function dispose(ctx) {
   ctx.services.viewer.dispose();
 }
+
+
+declare module 'context' {
+  interface ApplicationContext {
+
+    cadScene: CadScene;
+    viewer: Viewer;
+  }
+}

web/app/cad/scene/viewer.ts

@@ -1,8 +1,19 @@
 import SceneSetup from 'scene/sceneSetup';
+import {Emitter, externalState, StateStream, stream} from "lstream";
+import SceneSetUp from "scene/sceneSetup";
 
 export default class Viewer {
-  
+
+  sceneRendered$: Emitter<any> = stream();
+  cameraMode$: StateStream<any>;
+  sceneSetup: SceneSetUp;
+  renderRequested: boolean;
+
+
   constructor(container, onRendered) {
+
+    this.cameraMode$ = externalState(() => this.getCameraMode(), mode => this.setCameraMode(mode))
+
     this.sceneSetup = new SceneSetup(container, onRendered);
     this.renderRequested = false;
   }