Explorar el Código

Update readme, Add GLTFLoader.ObjectConstructors, three-ts-types update, typescript update, other small fixes.

master
Palash Bansal hace 2 años
padre
commit
f6d86b6aa1
No account linked to committer's email address

+ 139
- 0
README.md Ver fichero

- [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



+ 10
- 10
package.json Ver fichero

"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": {

+ 0
- 2
src/assetmanager/AssetManager.ts Ver fichero

} }
} }
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

+ 24
- 2
src/assetmanager/import/GLTFLoader2.ts Ver fichero

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))

+ 5
- 2
src/core/light/DirectionalLight2.ts Ver fichero

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

+ 0
- 1
src/core/light/ILight.ts Ver fichero

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

+ 2
- 1
src/core/material/LegacyPhongMaterial.ts Ver fichero

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

+ 2
- 1
src/core/material/LineMaterial2.ts Ver fichero

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

+ 2
- 1
src/core/material/PhysicalMaterial.ts Ver fichero





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

+ 2
- 1
src/core/material/ShaderMaterial2.ts Ver fichero

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

+ 2
- 1
src/core/material/UnlitLineMaterial.ts Ver fichero

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

+ 2
- 1
src/core/material/UnlitMaterial.ts Ver fichero

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

+ 7
- 0
src/three/controls/TransformControls2.ts Ver fichero

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

+ 0
- 2
src/three/widgets/CameraHelper2.ts Ver fichero

*/ */
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)

+ 0
- 4
src/three/widgets/DirectionalLightHelper2.ts Ver fichero

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

+ 0
- 1
src/three/widgets/PointLightHelper2.ts Ver fichero

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)

+ 0
- 1
src/three/widgets/SpotLightHelper2.ts Ver fichero

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)



Cargando…
Cancelar
Guardar