Options
All
  • Public
  • Public/Protected
  • All
Menu

Class NgxMeshComponent

The Mesh component.

See the ngx3js docs page for details. See the ngx mesh page for a live demo.

<ngx3js-mesh [type]="'skybox'" [skyboxType]="'sun'"></ngx3js-mesh>
<ngx3js-mesh [type]="'HTMLMesh'" [domElement]="domElement"></ngx3js-mesh>
<ngx3js-mesh [type]="'SVGObject'" [cssTag]="'div'"></ngx3js-mesh>
<ngx3js-mesh [type]="'CSS2DObject'" [cssTag]="'div'"></ngx3js-mesh>
<ngx3js-mesh [type]="'CSS3DSprite'" [cssTag]="'div'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Reflector'"
[color]="'0x889999'" [clipBias]="0.003"
[textureWidth]="1024" [textureWidth]="1024"
></ngx3js-mesh>
<ngx3js-mesh [type]="'ReflectorRTT'"
[color]="'0x889999'" [clipBias]="0.003"
[textureWidth]="1024" [textureWidth]="1024"
></ngx3js-mesh>
<ngx3js-mesh [type]="'Refractor'"
[color]="'0x999999'"
[textureWidth]="1024" [textureHeight]="1024" [shader]="'WaterRefraction'"
></ngx3js-mesh>
<ngx3js-mesh [type]="'ReflectorRTT'"
[color]="'0x889999'" [clipBias]="0.003"
[textureWidth]="1024" [textureWidth]="1024"
></ngx3js-mesh>
<ngx3js-mesh [type]="'ReflectorForSSRPass'"
[color]="'0x889999'" [clipBias]="0.003"
[textureWidth]="1024" [textureWidth]="1024"
></ngx3js-mesh>
<ngx3js-mesh [type]="'Water'"
[sunColor]="'0xffffff'" [waterColor]="'0x001e0f'"
[sunDirection]="sunDirection"
[textureWidth]="512" [textureHeight]="512"
[alpha]="alpha" [distortionScale]="distortionScale"
[uniforms]="uniforms"
></ngx3js-mesh>
<ngx3js-mesh [type]="'Water2'"
[color]="'#ffffff'" [waterScale]="4" [reflectivity]="0.02"
[flowDirectionX]="1" [flowDirectionY]="1" [textureWidth]="1024"
[textureHeight]="1024"></ngx3js-mesh>
<ngx3js-mesh [type]="'Sky'" [uniforms]="{
sunPosition: { type: 'v3', value: sunDirection },
turbidity: { type: 'number', value: 10 },
rayleigh: { type: 'number', value: 2 },
mieCoefficient: { type: 'number', value: 0.005 },
mieDirectionalG: { type: 'number', value: 0.8 }}"></ngx3js-mesh>
<ngx3js-mesh [type]="'Flow'"></ngx3js-mesh>
<ngx3js-mesh [type]="'InstancedFlow'"></ngx3js-mesh>
<ngx3js-mesh [type]="'LineLoop'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Light'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Lensflare'"></ngx3js-mesh>
<ngx3js-mesh [type]="'InstancedMesh'"></ngx3js-mesh>
<ngx3js-mesh [type]="'merged'"></ngx3js-mesh>
<ngx3js-mesh [type]="'naive'"></ngx3js-mesh>
<ngx3js-mesh [type]="'multimaterial'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Sprite'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Wireframe'"></ngx3js-mesh>
<ngx3js-mesh [type]="'LOD'"></ngx3js-mesh>
<ngx3js-mesh [type]="'MarchingCubes'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Points'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Line'"></ngx3js-mesh>
<ngx3js-mesh [type]="'TubePainter'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Text'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Line2'"></ngx3js-mesh>
<ngx3js-mesh [type]="'LineSegments'"></ngx3js-mesh>
<ngx3js-mesh [type]="'MD2CharacterComplex'"></ngx3js-mesh>
<ngx3js-mesh [type]="'InteractiveGroup'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Group'"></ngx3js-mesh>
<ngx3js-mesh [type]="'Mesh'"></ngx3js-mesh>
see

THREE.Mesh

see

THREE.Group

Hierarchy

Implements

  • OnInit

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

Protected OBJECT3D_ATTR

OBJECT3D_ATTR: string[] = ...

Object3 d attr of abstract object3d component

Protected OBJECT_ATTR

OBJECT_ATTR: string[] = ...

Object attr of abstract subscribe component

Protected _changeList

_changeList: string[] = null

Change list of abstract subscribe component

Protected _needUpdate

_needUpdate: boolean = true

Need update of abstract subscribe component

alpha

alpha: number = null

The alpha of water

axis

axis: string = null

The axis of mesh component

blobInfos

blobInfos: { colors?: any; strength: number; subtract: number; x: number; y: number; z: number }[] = null

The blobInfos of mesh component

Protected cachedGeometryList

cachedGeometryList: NgxAbstractGeometryComponent[] = []

Protected cachedLookatList

cachedLookatList: NgxLookatComponent[] = []

Protected cachedMaterialList

cachedMaterialList: NgxAbstractMaterialComponent[] = []

Protected cachedPositionList

cachedPositionList: NgxPositionComponent[] = []

Protected cachedRotationList

cachedRotationList: NgxRotationComponent[] = []

Protected cachedScaleList

cachedScaleList: NgxScaleComponent[] = []

castShadow

castShadow: boolean = null

Whether the object gets rendered into shadow map. Default is false.

centerX

centerX: number = null

The centerX of mesh component

centerY

centerY: number = null

The centerY of mesh component

clipBias

clipBias: number = null

The clip bias of Reflector

color

color: INgxColor = null

The color of sun etc

colors

colors: string | number[] = null

The colors of mesh component

Protected controllerList

controllerList: QueryList<NgxAbstractControllerComponent>

Content children of abstract object3d component

count

count: number = null

The count of mesh component

cssStyle

cssStyle: string | ICssStyle = null

The css style of CSS2DObject, CSS3DObject

see

CssStyle

cssTag

cssTag: any = null

The css tag of CSS2DObject, CSS3DObject

| HTMLDivElement | div | | HTMLSpanElement | span |

curve

The curve

debug

debug: boolean = false

Debug this Object

distance

distance: number = null

The distance of sun

distortionScale

distortionScale: number = null

The distortion scale of Water

divisions

divisions: number = null

The divisions of mesh component

domElement

domElement: HTMLElement = null

The domElement of CSS2DObject, CSS3DObject, HtmlMesh

enableColors

enableColors: boolean = null

The enableColors of mesh component

enableUvs

enableUvs: boolean = null

The enableUvs of mesh component

enabled

enabled: boolean = true

Enabled or Not

encoding

encoding: string = null

THREE.LinearEncoding is the default. See the texture constants page for details of other formats. Note that if this value is changed on a texture after the material has been used, it is necessary to trigger a Material.needsUpdate for this value to be realized in the shader.

Three Type Value String(case insensitive)
THREE.LinearEncoding LinearEncoding ,
THREE.sRGBEncoding sRGBEncoding ,
THREE.GammaEncoding GammaEncoding ,
THREE.RGBEEncoding RGBEEncoding ,
THREE.LogLuvEncoding LogLuvEncoding ,
THREE.RGBM7Encoding RGBM7Encoding ,
THREE.RGBM16Encoding RGBM16Encoding ,
THREE.RGBDEncoding RGBDEncoding ,

flowDirectionX

flowDirectionX: number = null

The flowDirectionX of mesh component

flowDirectionY

flowDirectionY: number = null

The flowDirectionY of mesh component

flowMap

flowMap: string | I3JS.Texture | NgxAbstractTextureComponent = null

The flowMap of mesh component

flowSpeed

flowSpeed: number = null

The flowSpeed of mesh component

frustumCulled

frustumCulled: boolean = null

When this is set, it checks every frame if the object is in the frustum of the camera before rendering the object. If set to false the object gets rendered every frame even if it is not in the frustum of the camera. Default is true.

geometry

geometry: any = null

The geometry of mesh

Protected geometryList

geometryList: QueryList<NgxAbstractGeometryComponent>

Content children of mesh component

helperComponent

helperComponent: NgxHelperComponent = null

Helper component of mesh component

helperOptions

helperOptions: IHelperOptions = null

The options of helper

helperType

helperType: string = null

The type of helper

Protected id

id: string = ''

The Id of abstract subscribe component

index

index: number = null

The index of mesh component

isolation

isolation: number = null

The isolation of mesh component

lightOptions

lightOptions: ILightOptions = null

The options of light

see

LightOptions

makeColor

makeColor: (color: I3JS.Color, index?: number) => void = null

Type declaration

    • The makeColor of mesh component

      Parameters

      Returns void

makeMatrix

makeMatrix: (matrix4: I3JS.Matrix4, index?: number) => void = null

Type declaration

    • The makeMatrix of mesh component

      Parameters

      Returns void

material

The material of mesh

materialIsArray

materialIsArray: boolean = null

The material of mesh is array

Protected materialList

materialList: QueryList<NgxAbstractMaterialComponent>

Content children of abstract object3d component

materialOption

materialOption: IMaterialParameters = null

Input of mesh component

matrixAutoUpdate

matrixAutoUpdate: boolean = null

When this is set, it calculates the matrix of position, (rotation or quaternion) and scale every frame and also recalculates the matrixWorld property. Default is Object3D.DefaultMatrixAutoUpdate (true).

metalness

metalness: number = null

How much the material is like a metal. Non-metallic materials such as wood or stone use 0.0, metallic use 1.0, with nothing (usually) in between. Default is 0.0. A value between 0.0 and 1.0 could be used for a rusty metal look. If metalnessMap is also provided, both values are multiplied.

morphTargets

morphTargets: boolean = null

Define whether the material uses morphTargets. Default is false.

moveAlongCurve

moveAlongCurve: number = null

The moveAlongCurve of mesh component

moveIndividualAlongCurve

moveIndividualAlongCurve: string | number[] = null

The moveIndividualAlongCurve of mesh component

name

name: string = ''

The name of the object (doesn't need to be unique). Default is an empty string.

normalMap0

normalMap0: string | I3JS.Texture | NgxAbstractTextureComponent = null

The normalMap0 of mesh component

normalMap1

normalMap1: string | I3JS.Texture | NgxAbstractTextureComponent = null

The normalMap1 of mesh component

Protected object3d

object3d: I3JS.Object3D<Event> = null

The Object3d of abstract object3d component

Protected object3dList

object3dList: QueryList<NgxAbstractObject3dComponent>

Content children of abstract object3d component

onDestory

onDestory: EventEmitter<NgxMeshComponent> = ...

Will be called when before destory. The argument will be the loaded self

onLoad

onLoad: EventEmitter<NgxMeshComponent> = ...

Will be called when load completes. The argument will be the loaded self

overrideParams

overrideParams: {} = null

The override params

Type declaration

  • [key: string]: any

Protected parent

parent: any = null

The Parent of abstract subscribe component

Protected parentObject3d

parentObject3d: I3JS.Object3D<Event> = null

Parent object3d of abstract object3d component

planeInfos

planeInfos: { strength: number; subtract: number; type: string }[] = null

The planeInfos of mesh component

rayParams

rayParams: RayParameters = null

The rayParams of geometry component

receiveShadow

receiveShadow: boolean = null

Whether the material receives shadows. Default is false.

reflectivity

reflectivity: number = null

The reflectivity of mesh component

resolution

resolution: number = null

The resolution of mesh component

roughness

roughness: number = null

How rough the material appears. 0.0 means a smooth mirror reflection, 1.0 means fully diffuse. Default is 1.0. If roughnessMap is also provided, both values are multiplied.

scaleStep

scaleStep: number = 1

The scale step of MultiMaterialObject

Protected selfAny

selfAny: any = ...

shader

shader: string = null

The shader of mesh component

shareParts

shareParts: NgxMeshComponent = null

The shareParts of mesh component

sharedCamera

sharedCamera: any = null

The sharedCamera of mesh component

sharedMesh

sharedMesh: NgxMeshComponent = null

The sharedMesh of mesh component

size

size: number = null

The size of mesh component

skyColor

skyColor: string | number = null

The color of sky

skyboxCubeImage

skyboxCubeImage: string[] = null

The cube image of skybox

skyboxImage

skyboxImage: any = null

The image of skybox

skyboxRate

skyboxRate: number = 100

The rate of Skybox from distance

skyboxSunImage

skyboxSunImage: string = null

The sun image of skybox

skyboxSunX

skyboxSunX: number = 0

The sun X direction in degree.

skyboxSunY

skyboxSunY: number = 0

The sun Y direction in degree.

skyboxSunZ

skyboxSunZ: number = 0

The sun Z direction in degree.

skyboxType

skyboxType: string = 'auto'

The type of skybox

Three Type Value String(case insensitive)
Lensflare sun
THREE.BoxGeometry box
THREE.SphereGeometry sphere

storageName

storageName: string = null

The storage Name

storageOption

storageOption: any = null

The storage Option

storageSource

storageSource: any = null

Storage source of mesh component

stormParams

stormParams: StormParams = ...

The stormParams of mesh component

Protected subscribeType

subscribeType: string = null

Subscribe type of abstract subscribe component

sunColor

sunColor: INgxColor = null

The color of sun

sunDirection

sunDirection: I3JS.Vector3 | number[] = null

The direction of sun

sunPosition

sunPosition: I3JS.Vector3 | number[] = null

The position of sun

text

text: string = null

The text of mesh component

texture

The refer texture

textureHeight

textureHeight: number = null

The texture Height

textureSize

textureSize: I3JS.Vector2 | NgxSizeComponent = null

The texture size

textureWidth

textureWidth: number = null

The texture Width

tween

tween: {} = null

Tween animation params

Type declaration

  • [key: string]: any

type

type: string = 'mesh'

The type of mesh

Three Type Value String(case insensitive)
Lensflare type : skybox, skyboxType : sun
SVGObject SVGObject, SVG
CSS2DObject CSS2DObject, CSS2D
CSS3DSprite CSS3DSprite
CSS3DObject CSS3DObject, CSS3D, CSS
Reflector Reflector
ReflectorRTT ReflectorRTT
Refractor Refractor
ReflectorForSSRPass RefractorForSSRPass
Water Water
Water2 Water2
Sky Sky
Flow Flow
InstancedFlow InstancedFlow
THREE.Light light
THREE.LineLoop LineLoop
Lensflare Lensflare, lensflareelement
THREE.InstancedMesh InstancedMesh, Instanced
BufferGeometryUtils.mergeBufferGeometries merged
SceneUtils.createMultiMaterialObject multimaterial, multi
THREE.Sprite Sprite
Wireframe wireframe
THREE.LOD lod
MarchingCubes marchingcubes
THREE.Points points
THREE.Line Line
Line2 line2
THREE.LineSegments linesegments
MD2CharacterComplex md2charactercomplex
THREE.Group group
THREE.Mesh mesh

uniforms

uniforms: {} = null

The uniform of sun, sky water etc

Type declaration

  • [uniform: string]: { options?: any; type: string; value: any } | IUniform

usage

usage: string = null

The usage of InstancedMesh

Three Type Value String(case insensitive)
THREE.StaticDrawUsage StaticDrawUsage, StaticDraw
THREE.DynamicDrawUsage DynamicDrawUsage, DynamicDraw
THREE.StreamDrawUsage StreamDrawUsage, StreamDraw
THREE.StaticReadUsage StaticReadUsage, StaticRead
THREE.DynamicReadUsage DynamicReadUsage, DynamicRead
THREE.StreamReadUsage StreamReadUsage, StreamRead
THREE.StaticCopyUsage StaticCopyUsage, StaticCopy
THREE.DynamicCopyUsage DynamicCopyUsage, DynamicCopy
THREE.StreamCopyUsage StreamCopyUsage, StreamCopy

useDepthTexture

useDepthTexture: boolean = null

The clip bias of Reflector

usePlaneStencil

usePlaneStencil: boolean = false

use Plane Stencil

userData

userData: any = null

An object that can be used to store custom data about the Object3D. It should not hold references to functions as these will not be cloned.

visible

visible: boolean = true

Object gets rendered if true. Default is true.

volumeOption

volumeOption: IVolumeOptions = null

The volume Option

waterColor

waterColor: string | number = null

The color water

waterScale

waterScale: number = null

The waterScale of mesh component

windowExport

windowExport: string = null

Export this Object to window global variables

Accessors

needUpdate

  • set needUpdate(value: boolean): void
  • Sets need update

    Parameters

    • value: boolean

    Returns void

Methods

addChanges

  • addChanges(key: string | string[] | SimpleChanges): void

addChildObject3d

addDebugLine

  • addDebugLine(objs: I3JS.Object3D<Event>[], lines: string[], prefix: string): string[]

addParentObject3d

addPosition

addRotation

Protected applyChanges

  • applyChanges(changes: string[]): void

applyChanges3d

  • applyChanges3d(changes: string[]): void

Protected callOnLoad

  • callOnLoad(): void

Protected checkChanges

  • checkChanges(changes: SimpleChanges): SimpleChanges

Protected clearChanges

  • clearChanges(): void

Protected consoleLog

  • consoleLog(key: string, object: any, level?: string): void

Protected consoleLogTime

  • consoleLogTime(key: string, object: any, repeat?: number): void

Protected destroyLocalComponent

  • destroyLocalComponent(key: string): void

dispose

  • dispose(): void

Protected getChanges

  • getChanges(): string[]

getClips

  • getClips(): any

getCurve

getGeometry

getId

  • getId(): string

getJson

  • getJson(): any

getMaterial

Protected getMaterialOne

Protected getMaterials

Protected getMaterialsMulti

getMesh

  • getMesh<T>(): T

Protected getName

  • getName(def?: string): string

getObject

  • getObject<T>(): T

getObject3d

  • getObject3d<T>(): T

getObjectById

getObjectByName

getObjectByProperty

getObjectTop

getPosition

getRealMesh

getRotation

getScale

getStorageSource

  • getStorageSource(): any

getSubscribe

  • getSubscribe(): Observable<string[]>

getTagAttributeObject3d

Protected getTimeout

  • getTimeout(timeDelay?: number): Promise<void>

getUniforms

  • getUniforms(): {}

getUserData

  • getUserData(): {}

Protected getVisible

  • getVisible(def?: boolean): boolean

Protected initLocalComponent

  • initLocalComponent<T>(key: string, component: T): T

Protected isIdEuals

  • isIdEuals(id: string): boolean

ngAfterContentInit

  • ngAfterContentInit(): void

ngOnChanges

  • ngOnChanges(changes: SimpleChanges): void
  • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated. default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

    Parameters

    • changes: SimpleChanges

      The changed properties.

    Returns void

ngOnDestroy

  • ngOnDestroy(): void

ngOnInit

  • ngOnInit(): void
  • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

    Returns void

removeObject3d

resetHelper

  • resetHelper(): void

resetTween

  • resetTween(): void

runSubscribeNext

  • runSubscribeNext(key: string | string[]): void

setLookat

Protected setObject

  • setObject(obj: any): void

Protected setObject3d

setParent

setParentObject3d

setPosition

setRotation

setSavelocalStorage

  • setSavelocalStorage(storageName: string): void

setScale

setScaleScalar

setSubscribeNext

  • setSubscribeNext(key: string | string[]): void

setSubscribeType

  • setSubscribeType(subscribeType: string): void

setTween

  • setTween(tweenData: {}): void

setTweenTarget

  • setTweenTarget(tweenTarget: any): void

setUserData

  • setUserData(key: string, value: any): void

setVisible

  • setVisible(visible: boolean, helperVisible?: boolean): void

setWireFrame

showDebug

Protected subscribeListQuery

  • subscribeListQuery(queryList: QueryList<any>, subscribeKey: string, changeKey: string): void

Protected subscribeListQueryChange

  • subscribeListQueryChange(queryList: QueryList<any>, subscribeKey: string, changeKey: string): void

Protected subscribeRefer

  • subscribeRefer(key: string, subscription: Subscription): void

Protected subscribeReferList

  • subscribeReferList(key: string, subscription: Subscription): void

Protected unSubscribeRefer

  • unSubscribeRefer(key: string): void

Protected unSubscribeReferList

  • unSubscribeReferList(key: string): void

Protected unSubscription

  • unSubscription(subscriptions: Subscription[]): Subscription[]

updateInputParams

  • updateInputParams(params: {}, firstChange?: boolean, changes?: SimpleChanges, type?: string): void

Generated using TypeDoc