| - [AssetImporter](#assetimporter) | - [AssetImporter](#assetimporter) | ||||
| - [AssetExporter](#assetexporter) | - [AssetExporter](#assetexporter) | ||||
| - [MaterialManager](#materialmanager) | - [MaterialManager](#materialmanager) | ||||
| - [Other classes and interfaces](#other-classes-and-interfaces) | |||||
| - [Plugins](#threepipe-plugins) | - [Plugins](#threepipe-plugins) | ||||
| - [TonemapPlugin](#tonemapplugin) - Add tonemap to the final screen pass | - [TonemapPlugin](#tonemapplugin) - Add tonemap to the final screen pass | ||||
| - [DropzonePlugin](#dropzoneplugin) - Drag and drop local files to import and load | - [DropzonePlugin](#dropzoneplugin) - Drag and drop local files to import and load | ||||
| - [HDRiGroundPlugin](#hdrigroundplugin) - Add support for ground projected hdri/skybox to the webgl background shader. | - [HDRiGroundPlugin](#hdrigroundplugin) - Add support for ground projected hdri/skybox to the webgl background shader. | ||||
| - [VirtualCamerasPlugin](#virtualcamerasplugin) - Add support for rendering virtual cameras before the main one every frame. | - [VirtualCamerasPlugin](#virtualcamerasplugin) - Add support for rendering virtual cameras before the main one every frame. | ||||
| - [EditorViewWidgetPlugin](#editorviewwidgetplugin) - Adds an interactive ViewHelper/AxisHelper that syncs with the main camera. | - [EditorViewWidgetPlugin](#editorviewwidgetplugin) - Adds an interactive ViewHelper/AxisHelper that syncs with the main camera. | ||||
| - [Object3DWidgetsPlugin](#object3dwidgetsplugin) - Automatically create light and camera helpers/gizmos when they are added to the scene. | |||||
| - [Object3DGeneratorPlugin](#object3dwidgetsplugin) - Provides UI and API to create scene objecs like lights, cameras, meshes, etc. | |||||
| - [Rhino3dmLoadPlugin](#rhino3dmloadplugin) - Add support for loading .3dm files | - [Rhino3dmLoadPlugin](#rhino3dmloadplugin) - Add support for loading .3dm files | ||||
| - [PLYLoadPlugin](#plyloadplugin) - Add support for loading .ply files | - [PLYLoadPlugin](#plyloadplugin) - Add support for loading .ply files | ||||
| - [STLLoadPlugin](#stlloadplugin) - Add support for loading .stl files | - [STLLoadPlugin](#stlloadplugin) - Add support for loading .stl files | ||||
| See also [CameraViewPlugin](#cameraviewplugin) for camera focus animation. | See also [CameraViewPlugin](#cameraviewplugin) for camera focus animation. | ||||
| Note: The constructor signature of `PerspectiveCamera2` is different `PerspectiveCamera`(from three.js), since it requires the canvas and the controlsMode during creation. | |||||
| Because of this `PerspectiveCamera0` is provided with the same signature as `PerspectiveCamera` for compatibility, in case the controls functionality is not required. | |||||
| ## AssetManager | ## AssetManager | ||||
| Source Code: [src/assetmanager/AssetManager.ts](./src/assetmanager/AssetManager.ts) | Source Code: [src/assetmanager/AssetManager.ts](./src/assetmanager/AssetManager.ts) | ||||
| [`materialManager.dispose`](https://threepipe.org/docs/classes/MaterialManager.html#dispose) - Dispose manager and all materials. | [`materialManager.dispose`](https://threepipe.org/docs/classes/MaterialManager.html#dispose) - Dispose manager and all materials. | ||||
| ## Other classes and interfaces | |||||
| Threepipe provides various interfaces and classes for for three.js objects with upgraded features like UI events, serialization, etc. | |||||
| These can be used while developing new apps to get better developer experience and features. | |||||
| When standard three.js instances are added to the scene, they are automatically upgraded automatically at runtime to make them work with the rest of the framework. | |||||
| Some important interfaces: | |||||
| * [IObject3D](https://threepipe.org/docs/interfaces/IObject3D.html) - Interface for an extended version of three.js [Object3D](https://threejs.org/docs/#api/en/core/Object3D). | |||||
| * [ILight](https://threepipe.org/docs/interfaces/ILight.html) - Interface for an extended version of three.js [Light](https://threejs.org/docs/#api/en/lights/Light). | |||||
| * [ICamera](https://threepipe.org/docs/interfaces/ICamera.html) - Interface for an extended version of three.js [Camera](https://threejs.org/docs/#api/en/cameras/Camera). | |||||
| * [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html) - Interface for an extended version of three.js [Material](https://threejs.org/docs/#api/en/materials/Material). | |||||
| * [ITexture](https://threepipe.org/docs/interfaces/ITexture.html) - Interface for an extended version of three.js [Texture](https://threejs.org/docs/#api/en/textures/Texture). | |||||
| * [IRenderTarget](https://threepipe.org/docs/interfaces/IRenderTarget.html) - Interface for an extended version of three.js [WebGLRenderTarget](https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget). | |||||
| * [IGeometry](https://threepipe.org/docs/interfaces/IGeometry.html) - Interface for an extended version of three.js [BufferGeometry](https://threejs.org/docs/#api/en/core/BufferGeometry). | |||||
| * [IScene](https://threepipe.org/docs/interfaces/IScene.html) - Interface for an extended version of three.js [Scene](https://threejs.org/docs/#api/en/scenes/Scene). | |||||
| * [IRenderManager](https://threepipe.org/docs/interfaces/IRenderManager.html) - Interface for rendering and render target manager. | |||||
| Some important classes | |||||
| * [Mesh2](https://threepipe.org/docs/classes/Mesh2.html) - Extends three.js [Mesh](https://threejs.org/docs/#api/en/objects/Mesh) and implements [IObject3D](https://threepipe.org/docs/interfaces/IObject3D.html). | |||||
| * [PerspectiveCamera2](https://threepipe.org/docs/classes/PerspectiveCamera2.html) - Extends three.js [PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) and implements [ICamera](https://threepipe.org/docs/interfaces/ICamera.html). (different constructor than PerspectiveCamera) | |||||
| * [PerspectiveCamera0](https://threepipe.org/docs/classes/PerspectiveCamera0.html) - Extends three.js [PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) and implements [ICamera](https://threepipe.org/docs/interfaces/ICamera.html). (same constructor than PerspectiveCamera) | |||||
| * [BufferGeometry2](https://threepipe.org/docs/classes/BufferGeometry2.html) - Extends three.js [BufferGeometry](https://threejs.org/docs/#api/en/core/BufferGeometry) and implements [IGeometry](https://threepipe.org/docs/interfaces/IGeometry.html). | |||||
| * [RootScene](https://threepipe.org/docs/classes/RootScene.html) - Extends three.js [Scene](https://threejs.org/docs/#api/en/scenes/Scene) and implements [IScene](https://threepipe.org/docs/interfaces/IScene.html). | |||||
| * [RenderManager](https://threepipe.org/docs/classes/RenderManager.html) - Implements [IRenderManager](https://threepipe.org/docs/interfaces/IRenderManager.html). | |||||
| * [PhysicalMaterial](https://threepipe.org/docs/classes/PhysicalMaterial.html) - Extends three.js [MeshPhysicalMaterial](https://threejs.org/docs/#api/en/materials/MeshPhysicalMaterial) and implements [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html). | |||||
| * [UnlitMaterial](https://threepipe.org/docs/classes/UnlitMaterial.html) - Extends three.js [MeshBasicMaterial](https://threejs.org/docs/#api/en/materials/MeshBasicMaterial) and implements [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html). | |||||
| * [LineMaterial2](https://threepipe.org/docs/classes/LineMaterial2.html) - Extends three.js [LineMaterial](https://threejs.org/docs/#api/en/materials/LineMaterial) and implements [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html). | |||||
| * [UnlitLineMaterial](https://threepipe.org/docs/classes/UnlitLineMaterial.html) - Extends three.js [LineBasicMaterial](https://threejs.org/docs/#api/en/materials/LineBasicMaterial) and implements [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html). | |||||
| * [DirectionalLight2](https://threepipe.org/docs/classes/DirectionalLight2.html) - Extends three.js [DirectionalLight](https://threejs.org/docs/#api/en/lights/DirectionalLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html). | |||||
| * [SpotLight2](https://threepipe.org/docs/classes/SpotLight2.html) - Extends three.js [SpotLight](https://threejs.org/docs/#api/en/lights/SpotLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html). | |||||
| * [PointLight2](https://threepipe.org/docs/classes/PointLight2.html) - Extends three.js [PointLight](https://threejs.org/docs/#api/en/lights/PointLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html). | |||||
| * [HemisphereLight2](https://threepipe.org/docs/classes/HemisphereLight2.html) - Extends three.js [HemisphereLight](https://threejs.org/docs/#api/en/lights/HemisphereLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html). | |||||
| * [AmbientLight2](https://threepipe.org/docs/classes/AmbientLight2.html) - Extends three.js [AmbientLight](https://threejs.org/docs/#api/en/lights/AmbientLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html). | |||||
| * [RectAreaLight2](https://threepipe.org/docs/classes/RectAreaLight2.html) - Extends three.js [RectAreaLight](https://threejs.org/docs/#api/en/lights/RectAreaLight) and implements [ILight](https://threepipe.org/docs/interfaces/ILight.html). | |||||
| # Threepipe Plugins | # Threepipe Plugins | ||||
| ThreePipe has a simple plugin system that allows you to easily add new features to the viewer. Plugins can be added to the viewer using the `addPlugin` and `addPluginSync` methods. The plugin system is designed to be modular and extensible. Plugins can be added to the viewer at any time and can be removed using the `removePlugin` and `removePluginSync` methods. | ThreePipe has a simple plugin system that allows you to easily add new features to the viewer. Plugins can be added to the viewer using the `addPlugin` and `addPluginSync` methods. The plugin system is designed to be modular and extensible. Plugins can be added to the viewer at any time and can be removed using the `removePlugin` and `removePluginSync` methods. | ||||
| plugin.enabled = false | plugin.enabled = false | ||||
| ``` | ``` | ||||
| ## Object3DGeneratorPlugin | |||||
| [//]: # (todo: image) | |||||
| [Example](https://threepipe.org/examples/#object3d-generator-plugin/) — | |||||
| [Source Code](./src/plugins/extras/Object3DGeneratorPlugin.ts) — | |||||
| [API Reference](https://threepipe.org/docs/classes/Object3DGeneratorPlugin.html) | |||||
| Object3DGeneratorPlugin adds support for creating different types of lights and camera objects in the viewer. | |||||
| Call the `generate` method with any type to generate a type of object(like lights, cameras, mesh etc). | |||||
| Support for the following types of generators is included in the plugin: | |||||
| * camera-perspective - Creates instance of `PerspectiveCamera2` | |||||
| * light-directional - Creates instance of `DirectionalLight2` | |||||
| * light-ambient - Creates instance of `AmbientLight2` | |||||
| * light-point - Creates instance of `PointLight2` | |||||
| * light-spot - Creates instance of `SpotLight2` | |||||
| * light-hemisphere - Creates instance of `HemisphereLight2` | |||||
| * light-rect-area - Creates instance of `RectAreaLight2` | |||||
| Additional types of generators can be added dynamically or by other plugins by adding a custom generator function to the `Object3DGeneratorPlugin.generators` object. This is done by [GeometryGeneratorPlugin](#threepipeplugin-geometry-generator) to add various type of primitive objects like plane, sphere, etc | |||||
| A custom generator can take in any kind object as parameters and should return an `IObject3D`. | |||||
| Sample Usage | |||||
| ```typescript | |||||
| import {ThreeViewer, Object3DWidgetsPlugin, Object3DGeneratorPlugin, Mesh2} from 'threepipe' | |||||
| const viewer = new ThreeViewer({...}) | |||||
| const generator = viewer.addPluginSync(Object3DGeneratorPlugin) | |||||
| generator.generate('camera-perspective', { | |||||
| position: new Vector3(5, 5, 0), | |||||
| name: 'My Camera' | |||||
| }) | |||||
| const light = generator.generate('light-spot', { | |||||
| position: new Vector3(5, 0, 0), | |||||
| }) | |||||
| // to add support for a custom helper | |||||
| plugin.generators['custom-object'] = (params)=>{ | |||||
| const object = new Mesh2(new PlaneGeometry(1,1), new PhysicalMaterial()) | |||||
| object.name = params.name ?? 'Custom Mesh' | |||||
| if(params.position) object.position.copy(params.position) | |||||
| return object | |||||
| } | |||||
| const obj = generator.generate('custom-object', { | |||||
| position: new Vector3(5, 0, 0), | |||||
| }) | |||||
| // Add Object3DWidgetsPlugin to see the added lights and cameras. | |||||
| viewer.addPluginSync(new Object3DWidgetsPlugin()) | |||||
| ``` | |||||
| Check the [example](https://threepipe.org/examples/#object3d-generator-plugin/) for the UI. | |||||
| ## Object3DWidgetsPlugin | |||||
| [//]: # (todo: image) | |||||
| [Example](https://threepipe.org/examples/#object3d-widgets-plugin/) — | |||||
| [Source Code](./src/plugins/extras/Object3DWidgetsPlugin.ts) — | |||||
| [API Reference](https://threepipe.org/docs/classes/Object3DWidgetsPlugin.html) | |||||
| Object3DWidgetsPlugin adds support for light and camera helpers/gizmos in the viewer. | |||||
| A helper is automatically created when any supported light or camera is added to the scene. | |||||
| Simply add the plugin to the viewer to see the widget. | |||||
| Support for additional types of helpers can be added dynamically or by other plugins by pushing a helper constructor to the `Object3DWidgetsPlugin.helpers` array, and calling `Object3DWidgetsPlugin.refresh()`. | |||||
| The helper class prototype should implement the `IObject3DHelper` interface. Check `DirectionalLightHelper2` for an example. | |||||
| ```typescript | |||||
| import {ThreeViewer, Object3DWidgetsPlugin, Object3DGeneratorPlugin} from 'threepipe' | |||||
| const viewer = new ThreeViewer({...}) | |||||
| // Add the plugin to add support | |||||
| const plugin = viewer.addPluginSync(new Object3DWidgetsPlugin()) | |||||
| // Add some lights or cameras to the scene. (This can be done before adding the plugin as well) | |||||
| // Using Object3DGeneratorPlugin to create a camera and add it to the scene. | |||||
| const generator = viewer.getOrAddPluginSync(Object3DGeneratorPlugin) | |||||
| generator.generate('camera-perspective', { | |||||
| position: new Vector3(5, 5, 0), | |||||
| name: 'My Camera' | |||||
| }) | |||||
| // to hide the widgets | |||||
| plugin.enabled = false | |||||
| // to add support for a custom helper | |||||
| plugin.helpers.push(MyCustomHelper) | |||||
| plugin.refresh() | |||||
| ``` | |||||
| ## Rhino3dmLoadPlugin | ## Rhino3dmLoadPlugin | ||||
| "rollup-plugin-postcss": "^4.0.2", | "rollup-plugin-postcss": "^4.0.2", | ||||
| "three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2018/package.tgz", | "three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2018/package.tgz", | ||||
| "tslib": "^2.5.0", | "tslib": "^2.5.0", | ||||
| "typedoc": "^0.24.7", | |||||
| "typescript": "^5.0.4", | |||||
| "typedoc": "^0.25.6", | |||||
| "typescript": "^5.3.3", | |||||
| "typescript-plugin-css-modules": "^5.0.1", | "typescript-plugin-css-modules": "^5.0.1", | ||||
| "@rollup/plugin-replace": "^5.0.2", | "@rollup/plugin-replace": "^5.0.2", | ||||
| "popmotion": "^11.0.5" | "popmotion": "^11.0.5" | ||||
| }, | }, | ||||
| "dependencies": { | "dependencies": { | ||||
| "stats.js": "^0.17.0", | |||||
| "uiconfig.js": "^0.0.9", | |||||
| "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1018/package.tgz", | |||||
| "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1019/package.tgz", | |||||
| "@types/webxr": "^0.5.1", | "@types/webxr": "^0.5.1", | ||||
| "@types/wicg-file-system-access": "^2020.9.5", | "@types/wicg-file-system-access": "^2020.9.5", | ||||
| "ts-browser-helpers": "^0.9.0" | |||||
| "stats.js": "^0.17.0", | |||||
| "ts-browser-helpers": "^0.9.0", | |||||
| "uiconfig.js": "^0.0.9" | |||||
| }, | }, | ||||
| "//": { | "//": { | ||||
| "dependencies": { | "dependencies": { | ||||
| "uiconfig.js": "^0.0.9", | "uiconfig.js": "^0.0.9", | ||||
| "ts-browser-helpers": "^0.8.0", | "ts-browser-helpers": "^0.8.0", | ||||
| "three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2018/package.tgz", | |||||
| "three-f": "https://github.com/repalash/three.js-modded/archive/refs/tags/v0.152.2018.tar.gz", | |||||
| "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1018/package.tgz", | |||||
| "@types/three-f": "https://github.com/repalash/three-ts-types/archive/refs/tags/v0.152.1018.tar.gz", | |||||
| "three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2019/package.tgz", | |||||
| "three-f": "https://github.com/repalash/three.js-modded/archive/refs/tags/v0.152.2019.tar.gz", | |||||
| "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1019/package.tgz", | |||||
| "@types/three-f": "https://github.com/repalash/three-ts-types/archive/refs/tags/v0.152.1019.tar.gz", | |||||
| "@types/three-pkg": "https://gitpkg.now.sh/repalash/three-ts-types/types/three?modded_three" | "@types/three-pkg": "https://gitpkg.now.sh/repalash/three-ts-types/types/three?modded_three" | ||||
| }, | }, | ||||
| "local_dependencies": { | "local_dependencies": { |
| } | } | ||||
| } | } | ||||
| for (const light of lights) { | for (const light of lights) { | ||||
| // @ts-expect-error update three-ts-types | |||||
| if ((light as ILight).assetType === 'light') continue | if ((light as ILight).assetType === 'light') continue | ||||
| if (!light.parent || options.replaceLights === false) { | if (!light.parent || options.replaceLights === false) { | ||||
| iLightCommons.upgradeLight.call(light) | iLightCommons.upgradeLight.call(light) | ||||
| (light as any).isHemisphereLight ? new HemisphereLight2() : | (light as any).isHemisphereLight ? new HemisphereLight2() : | ||||
| (light as any).isRectAreaLight ? new RectAreaLight2() : | (light as any).isRectAreaLight ? new RectAreaLight2() : | ||||
| undefined | undefined | ||||
| // @ts-expect-error update three-ts-types | |||||
| if (light === newLight || !newLight) continue | if (light === newLight || !newLight) continue | ||||
| light.parent.children.splice(light.parent.children.indexOf(light), 1, newLight) | light.parent.children.splice(light.parent.children.indexOf(light), 1, newLight) | ||||
| newLight.parent = light.parent as any | newLight.parent = light.parent as any |
| import {GLTF, GLTFLoader, GLTFLoaderPlugin, GLTFParser} from 'three/examples/jsm/loaders/GLTFLoader.js' | |||||
| import {LoadingManager, Object3D} from 'three' | |||||
| import type {GLTF, GLTFLoaderPlugin, GLTFParser} from 'three/examples/jsm/loaders/GLTFLoader.js' | |||||
| import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js' | |||||
| import {LoadingManager, Object3D, OrthographicCamera} from 'three' | |||||
| import {AnyOptions, safeSetProperty} from 'ts-browser-helpers' | import {AnyOptions, safeSetProperty} from 'ts-browser-helpers' | ||||
| import {ThreeViewer} from '../../viewer' | import {ThreeViewer} from '../../viewer' | ||||
| import {generateUUID} from '../../three' | import {generateUUID} from '../../three' | ||||
| import {RootSceneImportResult} from '../IAssetImporter' | import {RootSceneImportResult} from '../IAssetImporter' | ||||
| import {ILoader} from '../IImporter' | import {ILoader} from '../IImporter' | ||||
| import {ThreeSerialization} from '../../utils' | import {ThreeSerialization} from '../../utils' | ||||
| import { | |||||
| DirectionalLight2, | |||||
| PerspectiveCamera0, | |||||
| PhysicalMaterial, | |||||
| PointLight2, | |||||
| SpotLight2, | |||||
| UnlitLineMaterial, | |||||
| UnlitMaterial, | |||||
| } from '../../core' | |||||
| export class GLTFLoader2 extends GLTFLoader implements ILoader<GLTF, Object3D|undefined> { | export class GLTFLoader2 extends GLTFLoader implements ILoader<GLTF, Object3D|undefined> { | ||||
| isGLTFLoader2 = true | isGLTFLoader2 = true | ||||
| constructor(manager: LoadingManager) { | constructor(manager: LoadingManager) { | ||||
| super(manager) | super(manager) | ||||
| this.preparsers.push(glbEncryptionPreparser) | this.preparsers.push(glbEncryptionPreparser) | ||||
| GLTFLoader.ObjectConstructors.DirectionalLight = DirectionalLight2 as any | |||||
| GLTFLoader.ObjectConstructors.PointLight = PointLight2 as any | |||||
| GLTFLoader.ObjectConstructors.SpotLight = SpotLight2 as any | |||||
| GLTFLoader.ObjectConstructors.MeshStandardMaterial = PhysicalMaterial as any | |||||
| GLTFLoader.ObjectConstructors.MeshBasicMaterial = UnlitMaterial as any | |||||
| GLTFLoader.ObjectConstructors.MeshPhysicalMaterial = PhysicalMaterial as any | |||||
| GLTFLoader.ObjectConstructors.LineBasicMaterial = UnlitLineMaterial as any | |||||
| // GLTFLoader.ObjectConstructors.PointsMaterial = PointsMaterial2 | |||||
| GLTFLoader.ObjectConstructors.PerspectiveCamera = PerspectiveCamera0 // todo set domElement in the AssetManager during process | |||||
| GLTFLoader.ObjectConstructors.OrthographicCamera = OrthographicCamera // todo | |||||
| } | } | ||||
| static ImportExtensions: ((parser: GLTFParser) => GLTFLoaderPlugin)[] = [ | static ImportExtensions: ((parser: GLTFParser) => GLTFLoaderPlugin)[] = [ | ||||
| delete node.userData.gltfUUID // have issue with cloning if we don't dispose. | delete node.userData.gltfUUID // have issue with cloning if we don't dispose. | ||||
| } | } | ||||
| }) | }) | ||||
| // todo: replacing lights and camera, todo: remove and change constructors in GLTFLoader.js | |||||
| if (!scene.userData) scene.userData = {} | if (!scene.userData) scene.userData = {} | ||||
| if (res.userData) scene.userData.gltfExtras = res.userData // todo: put back in gltf in GLTFExporter2 | if (res.userData) scene.userData.gltfExtras = res.userData // todo: put back in gltf in GLTFExporter2 | ||||
| if (res.cameras) res.cameras.forEach(c => !c.parent && scene.add(c)) | if (res.cameras) res.cameras.forEach(c => !c.parent && scene.add(c)) |
| import {Color, ColorRepresentation, DirectionalLight, DirectionalLightShadow, Euler, Vector3} from 'three' | import {Color, ColorRepresentation, DirectionalLight, DirectionalLightShadow, Euler, Vector3} from 'three' | ||||
| import {ILight, ILightEvent} from './ILight' | |||||
| import {ILight, ILightEvent, ILightEventTypes} from './ILight' | |||||
| import {iLightCommons} from '../object/iLightCommons' | import {iLightCommons} from '../object/iLightCommons' | ||||
| import {IObject3D} from '../IObject' | import {IObject3D} from '../IObject' | ||||
| import {uiColor, uiPanelContainer, uiSlider, uiToggle, uiVector} from 'uiconfig.js' | import {uiColor, uiPanelContainer, uiSlider, uiToggle, uiVector} from 'uiconfig.js' | ||||
| // todo: add LightShadow uiconfig | // todo: add LightShadow uiconfig | ||||
| // todo: add Light section in the readme detailing these ...2 lights | // todo: add Light section in the readme detailing these ...2 lights | ||||
| @uiPanelContainer('Directional Light') | @uiPanelContainer('Directional Light') | ||||
| export class DirectionalLight2 extends DirectionalLight implements ILight<DirectionalLightShadow> { | |||||
| export class DirectionalLight2< | |||||
| E extends ILightEvent = ILightEvent, | |||||
| ET extends ILightEventTypes = ILightEventTypes | |||||
| > extends DirectionalLight<E, ET> implements ILight<DirectionalLightShadow> { | |||||
| assetType = 'light' as const | assetType = 'light' as const | ||||
| setDirty = iLightCommons.setDirty | setDirty = iLightCommons.setDirty | ||||
| refreshUi = iLightCommons.refreshUi | refreshUi = iLightCommons.refreshUi |
| TShadowSupport extends LightShadow | undefined = LightShadow | undefined, | TShadowSupport extends LightShadow | undefined = LightShadow | undefined, | ||||
| E extends ILightEvent = ILightEvent, | E extends ILightEvent = ILightEvent, | ||||
| ET extends ILightEventTypes = ILightEventTypes | ET extends ILightEventTypes = ILightEventTypes | ||||
| // @ts-expect-error update three-ts-types | |||||
| > extends Light<TShadowSupport, E, ET>, IObject3D<E, ET> { | > extends Light<TShadowSupport, E, ET>, IObject3D<E, ET> { | ||||
| assetType: 'light' | assetType: 'light' | ||||
| readonly isLight: true | readonly isLight: true |
| envMap: ITexture | null = null | envMap: ITexture | null = null | ||||
| constructor({customMaterialExtensions, ...parameters}: MeshPhongMaterialParameters & IMaterialParameters = {}) { | constructor({customMaterialExtensions, ...parameters}: MeshPhongMaterialParameters & IMaterialParameters = {}) { | ||||
| super(parameters) | |||||
| super() | |||||
| !this.defines && (this.defines = {}) | !this.defines && (this.defines = {}) | ||||
| this.fog = false | this.fog = false | ||||
| this.setDirty = this.setDirty.bind(this) | this.setDirty = this.setDirty.bind(this) | ||||
| if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | ||||
| iMaterialCommons.upgradeMaterial.call(this) | iMaterialCommons.upgradeMaterial.call(this) | ||||
| this.setValues(parameters) | |||||
| } | } | ||||
| // region Material Extension | // region Material Extension |
| generator?: IMaterialGenerator | generator?: IMaterialGenerator | ||||
| constructor({customMaterialExtensions, ...parameters}: LineMaterialParameters & IMaterialParameters = {}) { | constructor({customMaterialExtensions, ...parameters}: LineMaterialParameters & IMaterialParameters = {}) { | ||||
| super(parameters) | |||||
| super() | |||||
| this.fog = false | this.fog = false | ||||
| this.setDirty = this.setDirty.bind(this) | this.setDirty = this.setDirty.bind(this) | ||||
| if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | ||||
| iMaterialCommons.upgradeMaterial.call(this) | iMaterialCommons.upgradeMaterial.call(this) | ||||
| this.setValues(parameters) | |||||
| } | } | ||||
| // region Material Extension | // region Material Extension |
| constructor({customMaterialExtensions, ...parameters}: MeshPhysicalMaterialParameters & IMaterialParameters = {}) { | constructor({customMaterialExtensions, ...parameters}: MeshPhysicalMaterialParameters & IMaterialParameters = {}) { | ||||
| super(parameters) | |||||
| super() | |||||
| this.fog = false | this.fog = false | ||||
| this.attenuationDistance = 0 // infinite distance (for Ui) | this.attenuationDistance = 0 // infinite distance (for Ui) | ||||
| this.setDirty = this.setDirty.bind(this) | this.setDirty = this.setDirty.bind(this) | ||||
| if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | ||||
| iMaterialCommons.upgradeMaterial.call(this) | iMaterialCommons.upgradeMaterial.call(this) | ||||
| this.setValues(parameters) | |||||
| } | } | ||||
| // region Material Extension | // region Material Extension |
| type: 'ShaderMaterial' | 'RawShaderMaterial' = 'ShaderMaterial' | type: 'ShaderMaterial' | 'RawShaderMaterial' = 'ShaderMaterial' | ||||
| constructor({customMaterialExtensions, ...parameters}: ShaderMaterialParameters & IMaterialParameters = {}, isRawShaderMaterial = false) { | constructor({customMaterialExtensions, ...parameters}: ShaderMaterialParameters & IMaterialParameters = {}, isRawShaderMaterial = false) { | ||||
| super(parameters) | |||||
| super() | |||||
| this.isRawShaderMaterial = isRawShaderMaterial | this.isRawShaderMaterial = isRawShaderMaterial | ||||
| if (isRawShaderMaterial) { | if (isRawShaderMaterial) { | ||||
| this.type = 'RawShaderMaterial' | this.type = 'RawShaderMaterial' | ||||
| } | } | ||||
| if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | ||||
| iMaterialCommons.upgradeMaterial.call(this) | iMaterialCommons.upgradeMaterial.call(this) | ||||
| this.setValues(parameters) | |||||
| } | } | ||||
| // region Material Extension | // region Material Extension |
| generator?: IMaterialGenerator | generator?: IMaterialGenerator | ||||
| constructor({customMaterialExtensions, ...parameters}: LineBasicMaterialParameters & IMaterialParameters = {}) { | constructor({customMaterialExtensions, ...parameters}: LineBasicMaterialParameters & IMaterialParameters = {}) { | ||||
| super(parameters) | |||||
| super() | |||||
| !this.defines && (this.defines = {}) | !this.defines && (this.defines = {}) | ||||
| this.fog = false | this.fog = false | ||||
| this.setDirty = this.setDirty.bind(this) | this.setDirty = this.setDirty.bind(this) | ||||
| if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | ||||
| iMaterialCommons.upgradeMaterial.call(this) | iMaterialCommons.upgradeMaterial.call(this) | ||||
| this.setValues(parameters) | |||||
| } | } | ||||
| // region Material Extension | // region Material Extension |
| envMap: ITexture | null = null | envMap: ITexture | null = null | ||||
| constructor({customMaterialExtensions, ...parameters}: MeshBasicMaterialParameters & IMaterialParameters = {}) { | constructor({customMaterialExtensions, ...parameters}: MeshBasicMaterialParameters & IMaterialParameters = {}) { | ||||
| super(parameters) | |||||
| super() | |||||
| !this.defines && (this.defines = {}) | !this.defines && (this.defines = {}) | ||||
| this.fog = false | this.fog = false | ||||
| this.setDirty = this.setDirty.bind(this) | this.setDirty = this.setDirty.bind(this) | ||||
| if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | if (customMaterialExtensions) this.registerMaterialExtensions(customMaterialExtensions) | ||||
| iMaterialCommons.upgradeMaterial.call(this) | iMaterialCommons.upgradeMaterial.call(this) | ||||
| this.setValues(parameters) | |||||
| } | } | ||||
| // region Material Extension | // region Material Extension |
| import type {ICamera, IObject3D, ISceneEvent, IWidget} from '../../core' | import type {ICamera, IObject3D, ISceneEvent, IWidget} from '../../core' | ||||
| import {iObjectCommons} from '../../core' | import {iObjectCommons} from '../../core' | ||||
| import {uiDropdown, uiNumber, uiPanelContainer, uiToggle} from 'uiconfig.js' | import {uiDropdown, uiNumber, uiPanelContainer, uiToggle} from 'uiconfig.js' | ||||
| import {onChange2} from 'ts-browser-helpers' | |||||
| @uiPanelContainer('Transform Controls') | @uiPanelContainer('Transform Controls') | ||||
| export class TransformControls2 extends TransformControls implements IWidget, IObject3D { | export class TransformControls2 extends TransformControls implements IWidget, IObject3D { | ||||
| // axis: 'X' | 'Y' | 'Z' | 'E' | 'XY' | 'YZ' | 'XZ' | 'XYZ' | 'XYZE' | null | // axis: 'X' | 'Y' | 'Z' | 'E' | 'XY' | 'YZ' | 'XZ' | 'XYZ' | 'XYZE' | null | ||||
| @uiDropdown('Mode', ['translate', 'rotate', 'scale'].map(label=>({label}))) | @uiDropdown('Mode', ['translate', 'rotate', 'scale'].map(label=>({label}))) | ||||
| @onChange2('setDirty') | |||||
| mode: 'translate' | 'rotate' | 'scale' | mode: 'translate' | 'rotate' | 'scale' | ||||
| translationSnap: number | null | translationSnap: number | null | ||||
| scaleSnap: number | null | scaleSnap: number | null | ||||
| @uiDropdown('Space', ['world', 'local'].map(label=>({label}))) | @uiDropdown('Space', ['world', 'local'].map(label=>({label}))) | ||||
| @onChange2('setDirty') | |||||
| space: 'world' | 'local' | space: 'world' | 'local' | ||||
| @uiNumber('Size') | @uiNumber('Size') | ||||
| @onChange2('setDirty') | |||||
| size: number | size: number | ||||
| @uiToggle('Show X') | @uiToggle('Show X') | ||||
| @onChange2('setDirty') | |||||
| showX: boolean | showX: boolean | ||||
| @uiToggle('Show Y') | @uiToggle('Show Y') | ||||
| @onChange2('setDirty') | |||||
| showY: boolean | showY: boolean | ||||
| @uiToggle('Show Z') | @uiToggle('Show Z') | ||||
| @onChange2('setDirty') | |||||
| showZ: boolean | showZ: boolean | ||||
| // dragging: boolean | // dragging: boolean |
| */ | */ | ||||
| export class CameraHelper2 extends ACameraHelperWidget { | export class CameraHelper2 extends ACameraHelperWidget { | ||||
| protected _vector = new Vector3() | protected _vector = new Vector3() | ||||
| // @ts-expect-error update three-ts-types remove abstract | |||||
| protected _camera = new Camera() | protected _camera = new Camera() | ||||
| line: LineSegments2 | line: LineSegments2 | ||||
| geometry.setPositions(vertices) | geometry.setPositions(vertices) | ||||
| geometry.setColors(colors) | geometry.setColors(colors) | ||||
| // @ts-expect-error update three-ts-types | |||||
| this.line = new LineSegments2(geometry, material) | this.line = new LineSegments2(geometry, material) | ||||
| this.line.frustumCulled = false | this.line.frustumCulled = false | ||||
| this.add(this.line) | this.add(this.line) |
| depthWrite: false, | depthWrite: false, | ||||
| }) | }) | ||||
| // @ts-expect-error update three-ts-types | |||||
| this.lightPlane = new Line2(geometry, this.material) | this.lightPlane = new Line2(geometry, this.material) | ||||
| this.add(this.lightPlane) | this.add(this.lightPlane) | ||||
| geometry = new LineGeometry() | geometry = new LineGeometry() | ||||
| geometry.setPositions([0, 0, 0, 0, 0, 1]) | geometry.setPositions([0, 0, 0, 0, 0, 1]) | ||||
| // @ts-expect-error update three-ts-types | |||||
| this.targetLine = new Line2(geometry, this.material) | this.targetLine = new Line2(geometry, this.material) | ||||
| this.add(this.targetLine) | this.add(this.targetLine) | ||||
| -this.size, this.size, 0, | -this.size, this.size, 0, | ||||
| ]) | ]) | ||||
| this.lightPlane.lookAt(this._v2) | this.lightPlane.lookAt(this._v2) | ||||
| // @ts-expect-error update three-ts-types | |||||
| this.lightPlane.material = this.material | this.lightPlane.material = this.material | ||||
| // @ts-expect-error update three-ts-types | |||||
| this.targetLine.material = this.material | this.targetLine.material = this.material | ||||
| this.material.color.set(this.color ?? this.light.color) | this.material.color.set(this.color ?? this.light.color) | ||||
| this.material.linewidth = this.lineWidth * 0.001 | this.material.linewidth = this.lineWidth * 0.001 |
| depthWrite: false, | depthWrite: false, | ||||
| }) | }) | ||||
| // @ts-expect-error update three-ts-types | |||||
| this.lightSphere = new Wireframe(geometry, this.material) | this.lightSphere = new Wireframe(geometry, this.material) | ||||
| this.lightSphere.computeLineDistances() | this.lightSphere.computeLineDistances() | ||||
| this.add(this.lightSphere) | this.add(this.lightSphere) |
| depthWrite: false, | depthWrite: false, | ||||
| }) | }) | ||||
| // @ts-expect-error update three-ts-types | |||||
| this.cone = new LineSegments2(geometry, this.material) | this.cone = new LineSegments2(geometry, this.material) | ||||
| this.add(this.cone) | this.add(this.cone) | ||||