From c5d21eb483ea3985a8da3ffa33da5303a835f68d Mon Sep 17 00:00:00 2001 From: "Val Erastov (xibyte)" Date: Mon, 13 Jul 2020 16:57:46 -0700 Subject: [PATCH] three js update --- modules/scene/objects/scalableLine.js | 7 +- .../scene/{sceneSetup.js => sceneSetup.ts} | 69 +++++++++++++------ package-lock.json | 6 +- package.json | 2 +- web/app/cad/location/LocationControl.ts | 12 ++++ web/app/cad/location/LocationDialog.tsx | 23 +++++-- .../cad/scene/{cadScene.js => cadScene.ts} | 9 ++- .../scene/{scenePlugin.js => scenePlugin.ts} | 13 +++- web/app/cad/scene/{viewer.js => viewer.ts} | 13 +++- 9 files changed, 117 insertions(+), 37 deletions(-) rename modules/scene/{sceneSetup.js => sceneSetup.ts} (80%) create mode 100644 web/app/cad/location/LocationControl.ts rename web/app/cad/scene/{cadScene.js => cadScene.ts} (90%) rename web/app/cad/scene/{scenePlugin.js => scenePlugin.ts} (79%) rename web/app/cad/scene/{viewer.js => viewer.ts} (86%) diff --git a/modules/scene/objects/scalableLine.js b/modules/scene/objects/scalableLine.js index 5a5368f2..71212955 100644 --- a/modules/scene/objects/scalableLine.js +++ b/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; \ No newline at end of file diff --git a/modules/scene/sceneSetup.js b/modules/scene/sceneSetup.ts similarity index 80% rename from modules/scene/sceneSetup.js rename to modules/scene/sceneSetup.ts index ba7e156b..a926128d 100644 --- a/modules/scene/sceneSetup.js +++ b/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() { diff --git a/package-lock.json b/package-lock.json index 12a12ef1..d609feef 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e1a50221..25a0e835 100644 --- a/package.json +++ b/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" } } diff --git a/web/app/cad/location/LocationControl.ts b/web/app/cad/location/LocationControl.ts new file mode 100644 index 00000000..b5531e7c --- /dev/null +++ b/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); + } + +} diff --git a/web/app/cad/location/LocationDialog.tsx b/web/app/cad/location/LocationDialog.tsx index fc03fb83..04e7de3e 100644 --- a/web/app/cad/location/LocationDialog.tsx +++ b/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()); + const [location, setLocation] = useStreamWithUpdater(() => req ? req.shell.location$ : never()); + + 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; diff --git a/web/app/cad/scene/cadScene.js b/web/app/cad/scene/cadScene.ts similarity index 90% rename from web/app/cad/scene/cadScene.js rename to web/app/cad/scene/cadScene.ts index 41308eb0..20e7204a 100644 --- a/web/app/cad/scene/cadScene.js +++ b/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(); diff --git a/web/app/cad/scene/scenePlugin.js b/web/app/cad/scene/scenePlugin.ts similarity index 79% rename from web/app/cad/scene/scenePlugin.js rename to web/app/cad/scene/scenePlugin.ts index 1ac69a1b..94b6d721 100644 --- a/web/app/cad/scene/scenePlugin.js +++ b/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; + } +} diff --git a/web/app/cad/scene/viewer.js b/web/app/cad/scene/viewer.ts similarity index 86% rename from web/app/cad/scene/viewer.js rename to web/app/cad/scene/viewer.ts index 5560b5ff..c39c28da 100644 --- a/web/app/cad/scene/viewer.js +++ b/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 = stream(); + cameraMode$: StateStream; + 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; }