WThreejsVue

Props

Name	Type	Default value	Required?	Description
`opt`	Object	`{}`	No	輸入設定物件，預設{}
`opt.width`	Number	-	No	輸入元件寬度數字，單位px
`opt.height`	Number	-	No	輸入元件高度數字，單位px
`opt.items`	Array	`[]`	No	輸入3D場景中要渲染的物件資料陣列，預設[]
`opt.backgroundColor`	String	-	No	輸入場景背景色字串
`opt.useAutoRotate`	Boolean	`false`	No	輸入是否啟用自動旋轉布林值，預設false
`opt.autoRotateDeg`	Number	-	No	輸入自動旋轉角度數字，單位度
`opt.useHelperAxes`	Boolean	`true`	No	輸入是否顯示輔助軸線布林值，預設true
`opt.helperAxesLengthRatio`	Number	-	No	輸入輔助軸線長度比例數字
`opt.useHelperGrid`	Boolean	`true`	No	輸入是否顯示輔助網格布林值，預設true
`opt.helperGridLengthRatio`	Number	-	No	輸入輔助網格長度比例數字
`opt.helperGridDensity`	Number	-	No	輸入輔助網格密度數字
`opt.helperGridPositionRatioZ`	Number	-	No	輸入輔助網格Z軸位置比例數字
`opt.useLightAmbient`	Boolean	-	No	輸入是否啟用環境光布林值
`opt.lightAmbientColor`	String	-	No	輸入環境光顏色字串
`opt.useLightPoint`	Boolean	-	No	輸入是否啟用點光源布林值
`opt.lightPointPoss`	Array	-	No	輸入點光源位置陣列
`opt.lightPointColor`	String	-	No	輸入點光源顏色字串
`opt.lightPointIntensity`	Number	-	No	輸入點光源強度數字
`opt.lightPointDistance`	Number	-	No	輸入點光源照射距離數字
`opt.lightPointDecay`	Number	-	No	輸入點光源衰減率數字
`opt.useLightDirection`	Boolean	-	No	輸入是否啟用平行光布林值
`opt.lightDirectionColor`	String	-	No	輸入平行光顏色字串
`opt.lightDirectionIntensity`	Number	-	No	輸入平行光強度數字
`opt.lightDirectionPos`	Object	-	No	輸入平行光位置物件
`opt.useAxis`	Boolean	`false`	No	輸入是否顯示座標軸布林值，預設false
`opt.axisXTitle`	String	-	No	輸入X軸標題文字字串
`opt.axisXTitleColor`	String	-	No	輸入X軸標題顏色字串
`opt.axisXTitleFontSize`	String	-	No	輸入X軸標題字型大小字串
`opt.axisXTitleFontFamily`	String	-	No	輸入X軸標題字型字串
`opt.axisXTitleDistance`	Number	-	No	輸入X軸標題與軸線距離數字
`opt.axisXLineColor`	String	-	No	輸入X軸線顏色字串
`opt.axisXLineWidth`	Number	-	No	輸入X軸線寬度數字
`opt.axisXTickLineColor`	String	-	No	輸入X軸刻度線顏色字串
`opt.axisXTickLineWidth`	Number	-	No	輸入X軸刻度線寬度數字
`opt.axisXTickLineLength`	Number	-	No	輸入X軸刻度線長度數字
`opt.axisXTickNum`	Number	-	No	輸入X軸刻度數量數字
`opt.axisXTickLabelDistance`	Number	-	No	輸入X軸刻度標籤與軸線距離數字
`opt.axisXTickLabelDig`	Number	-	No	輸入X軸刻度標籤小數位數數字
`opt.axisXTickLabelColor`	String	-	No	輸入X軸刻度標籤顏色字串
`opt.axisXTickLabelFontSize`	String	-	No	輸入X軸刻度標籤字型大小字串
`opt.axisXTickLabelFontFamily`	String	-	No	輸入X軸刻度標籤字型字串
`opt.axisXGridLineColor`	String	-	No	輸入X軸網格線顏色字串
`opt.axisXGridLineWidth`	Number	-	No	輸入X軸網格線寬度數字
`opt.axisYTitle`	String	-	No	輸入Y軸標題文字字串
`opt.axisYTitleColor`	String	-	No	輸入Y軸標題顏色字串
`opt.axisYTitleFontSize`	String	-	No	輸入Y軸標題字型大小字串
`opt.axisYTitleFontFamily`	String	-	No	輸入Y軸標題字型字串
`opt.axisYTitleDistance`	Number	-	No	輸入Y軸標題與軸線距離數字
`opt.axisYLineColor`	String	-	No	輸入Y軸線顏色字串
`opt.axisYLineWidth`	Number	-	No	輸入Y軸線寬度數字
`opt.axisYTickLineColor`	String	-	No	輸入Y軸刻度線顏色字串
`opt.axisYTickLineWidth`	Number	-	No	輸入Y軸刻度線寬度數字
`opt.axisYTickLineLength`	Number	-	No	輸入Y軸刻度線長度數字
`opt.axisYTickNum`	Number	-	No	輸入Y軸刻度數量數字
`opt.axisYTickLabelDistance`	Number	-	No	輸入Y軸刻度標籤與軸線距離數字
`opt.axisYTickLabelDig`	Number	-	No	輸入Y軸刻度標籤小數位數數字
`opt.axisYTickLabelColor`	String	-	No	輸入Y軸刻度標籤顏色字串
`opt.axisYTickLabelFontSize`	String	-	No	輸入Y軸刻度標籤字型大小字串
`opt.axisYTickLabelFontFamily`	String	-	No	輸入Y軸刻度標籤字型字串
`opt.axisYGridLineColor`	String	-	No	輸入Y軸網格線顏色字串
`opt.axisYGridLineWidth`	Number	-	No	輸入Y軸網格線寬度數字
`opt.axisZTitle`	String	-	No	輸入Z軸標題文字字串
`opt.axisZTitleColor`	String	-	No	輸入Z軸標題顏色字串
`opt.axisZTitleFontSize`	String	-	No	輸入Z軸標題字型大小字串
`opt.axisZTitleFontFamily`	String	-	No	輸入Z軸標題字型字串
`opt.axisZTitleDistance`	Number	-	No	輸入Z軸標題與軸線距離數字
`opt.axisZLineColor`	String	-	No	輸入Z軸線顏色字串
`opt.axisZLineWidth`	Number	-	No	輸入Z軸線寬度數字
`opt.axisZTickLineColor`	String	-	No	輸入Z軸刻度線顏色字串
`opt.axisZTickLineWidth`	Number	-	No	輸入Z軸刻度線寬度數字
`opt.axisZTickLineLength`	Number	-	No	輸入Z軸刻度線長度數字
`opt.axisZTickNum`	Number	-	No	輸入Z軸刻度數量數字
`opt.axisZTickLabelDistance`	Number	-	No	輸入Z軸刻度標籤與軸線距離數字
`opt.axisZTickLabelDig`	Number	-	No	輸入Z軸刻度標籤小數位數數字
`opt.axisZTickLabelColor`	String	-	No	輸入Z軸刻度標籤顏色字串
`opt.axisZTickLabelFontSize`	String	-	No	輸入Z軸刻度標籤字型大小字串
`opt.axisZTickLabelFontFamily`	String	-	No	輸入Z軸刻度標籤字型字串
`opt.axisZGridLineColor`	String	-	No	輸入Z軸網格線顏色字串
`opt.axisZGridLineWidth`	Number	-	No	輸入Z軸網格線寬度數字
`opt.cameraType`	String	`'perspective'`	No	輸入相機類型字串，可選'perspective'或'orthographic'，預設'perspective'
`opt.cameraFov`	Number	-	No	輸入透視相機視野角度數字
`opt.cameraNear`	Number	-	No	輸入相機近裁剪面數字
`opt.cameraFar`	Number	-	No	輸入相機遠裁剪面數字
`opt.cameraOrthographicRatio`	Number	-	No	輸入正交相機比例數字
`opt.cameraAzimuthAngle`	Number	-	No	輸入相機方位角(水平角度)數字，因可通過UI改變導致Vue無法監聽變數有變而觸發computed，故建議直接使用setCameraAzimuthAngle變更
`opt.cameraPolarAngle`	Number	-	No	輸入相機極角(垂直角度)數字，因可通過UI改變導致Vue無法監聯變數有變而觸發computed，故建議直接使用setCameraPolarAngle變更
`opt.menuSettingIcon`	String	-	No	輸入設定選單圖示SVG path字串，預設mdiCogOutline
`opt.menuSettingTooltip`	String	`'Settings'`	No	輸入設定選單tooltip文字字串，預設'Settings'
`opt.menuHelperAxesIcon`	String	-	No	輸入輔助軸線圖示SVG path字串，預設mdiAxis
`opt.menuHelperAxesTooltip`	String	`'Help axes'`	No	輸入輔助軸線tooltip文字字串，預設'Help axes'
`opt.menuHelperGridIcon`	String	-	No	輸入輔助網格圖示SVG path字串，預設mdiGrid
`opt.menuHelperGridTooltip`	String	`'Help grid'`	No	輸入輔助網格tooltip文字字串，預設'Help grid'
`opt.menuPerspectiveIcon`	String	-	No	輸入透視切換圖示SVG path字串，預設mdiProjectorScreenOutline
`opt.menuPerspectiveTooltip`	String	`'Perspective'`	No	輸入透視切換tooltip文字字串，預設'Perspective'
`opt.menuAxisIcon`	String	-	No	輸入座標軸圖示SVG path字串，預設mdiPackageVariantClosed
`opt.menuAxisTooltip`	String	`'Axis'`	No	輸入座標軸tooltip文字字串，預設'Axis'
`opt.menuAutoRotateIcon`	String	-	No	輸入自動旋轉圖示SVG path字串，預設mdiAxisZRotateCounterclockwise
`opt.menuAutoRotateTooltip`	String	`'Auto rotate'`	No	輸入自動旋轉tooltip文字字串，預設'Auto rotate'
`opt.menuViewXYIcon`	String	-	No	輸入XY平面視角圖示SVG path字串
`opt.menuViewXYTooltip`	String	`'XY plane'`	No	輸入XY平面視角tooltip文字字串，預設'XY plane'
`opt.menuViewXZIcon`	String	-	No	輸入XZ平面視角圖示SVG path字串
`opt.menuViewXZTooltip`	String	`'XZ plane'`	No	輸入XZ平面視角tooltip文字字串，預設'XZ plane'
`opt.menuViewYZIcon`	String	-	No	輸入YZ平面視角圖示SVG path字串
`opt.menuViewYZTooltip`	String	`'YZ plane'`	No	輸入YZ平面視角tooltip文字字串，預設'YZ plane'
`opt.menuLegendIcon`	String	-	No	輸入圖例圖示SVG path字串，預設mdiListBoxOutline
`opt.menuLegendTooltip`	String	`'Legend'`	No	輸入圖例tooltip文字字串，預設'Legend'
`opt.legnedBackgroundColor`	String	`'rgba(90,90,90,0.5)'`	No	輸入圖例區域背景色字串，預設'rgba(90,90,90,0.5)'
`opt.legnedHeight`	Number	`null`	No	輸入圖例區域固定高度數字，單位px，預設null
`opt.legnedHeightMax`	Number	`null`	No	輸入圖例區域最大高度數字，單位px，預設null

Description:

Name

Type

Default value

Required?

Description

opt

Object

{}

輸入設定物件，預設{}

opt.width

Number

輸入元件寬度數字，單位px

opt.height

Number

輸入元件高度數字，單位px

opt.items

Array

[]

輸入3D場景中要渲染的物件資料陣列，預設[]

opt.backgroundColor

String

輸入場景背景色字串

opt.useAutoRotate

Boolean

false

輸入是否啟用自動旋轉布林值，預設false

opt.autoRotateDeg

Number

輸入自動旋轉角度數字，單位度

opt.useHelperAxes

Boolean

true

輸入是否顯示輔助軸線布林值，預設true

opt.helperAxesLengthRatio

Number

輸入輔助軸線長度比例數字

opt.useHelperGrid

Boolean

true

輸入是否顯示輔助網格布林值，預設true

opt.helperGridLengthRatio

Number

輸入輔助網格長度比例數字

opt.helperGridDensity

Number

輸入輔助網格密度數字

opt.helperGridPositionRatioZ

Number

輸入輔助網格Z軸位置比例數字

opt.useLightAmbient

Boolean

輸入是否啟用環境光布林值

opt.lightAmbientColor

String

輸入環境光顏色字串

opt.useLightPoint

Boolean

輸入是否啟用點光源布林值

opt.lightPointPoss

Array

輸入點光源位置陣列

opt.lightPointColor

String

輸入點光源顏色字串

opt.lightPointIntensity

Number

輸入點光源強度數字

opt.lightPointDistance

Number

輸入點光源照射距離數字

opt.lightPointDecay

Number

輸入點光源衰減率數字

opt.useLightDirection

Boolean

輸入是否啟用平行光布林值

opt.lightDirectionColor

String

輸入平行光顏色字串

opt.lightDirectionIntensity

Number

輸入平行光強度數字

opt.lightDirectionPos

Object

輸入平行光位置物件

opt.useAxis

Boolean

false

輸入是否顯示座標軸布林值，預設false

opt.axisXTitle

String

輸入X軸標題文字字串

opt.axisXTitleColor

String

輸入X軸標題顏色字串

opt.axisXTitleFontSize

String

輸入X軸標題字型大小字串

opt.axisXTitleFontFamily

String

輸入X軸標題字型字串

opt.axisXTitleDistance

Number

輸入X軸標題與軸線距離數字

opt.axisXLineColor

String

輸入X軸線顏色字串

opt.axisXLineWidth

Number

輸入X軸線寬度數字

opt.axisXTickLineColor

String

輸入X軸刻度線顏色字串

opt.axisXTickLineWidth

Number

輸入X軸刻度線寬度數字

opt.axisXTickLineLength

Number

輸入X軸刻度線長度數字

opt.axisXTickNum

Number

輸入X軸刻度數量數字

opt.axisXTickLabelDistance

Number

輸入X軸刻度標籤與軸線距離數字

opt.axisXTickLabelDig

Number

輸入X軸刻度標籤小數位數數字

opt.axisXTickLabelColor

String

輸入X軸刻度標籤顏色字串

opt.axisXTickLabelFontSize

String

輸入X軸刻度標籤字型大小字串

opt.axisXTickLabelFontFamily

String

輸入X軸刻度標籤字型字串

opt.axisXGridLineColor

String

輸入X軸網格線顏色字串

opt.axisXGridLineWidth

Number

輸入X軸網格線寬度數字

opt.axisYTitle

String

輸入Y軸標題文字字串

opt.axisYTitleColor

String

輸入Y軸標題顏色字串

opt.axisYTitleFontSize

String

輸入Y軸標題字型大小字串

opt.axisYTitleFontFamily

String

輸入Y軸標題字型字串

opt.axisYTitleDistance

Number

輸入Y軸標題與軸線距離數字

opt.axisYLineColor

String

輸入Y軸線顏色字串

opt.axisYLineWidth

Number

輸入Y軸線寬度數字

opt.axisYTickLineColor

String

輸入Y軸刻度線顏色字串

opt.axisYTickLineWidth

Number

輸入Y軸刻度線寬度數字

opt.axisYTickLineLength

Number

輸入Y軸刻度線長度數字

opt.axisYTickNum

Number

輸入Y軸刻度數量數字

opt.axisYTickLabelDistance

Number

輸入Y軸刻度標籤與軸線距離數字

opt.axisYTickLabelDig

Number

輸入Y軸刻度標籤小數位數數字

opt.axisYTickLabelColor

String

輸入Y軸刻度標籤顏色字串

opt.axisYTickLabelFontSize

String

輸入Y軸刻度標籤字型大小字串

opt.axisYTickLabelFontFamily

String

輸入Y軸刻度標籤字型字串

opt.axisYGridLineColor

String

輸入Y軸網格線顏色字串

opt.axisYGridLineWidth

Number

輸入Y軸網格線寬度數字

opt.axisZTitle

String

輸入Z軸標題文字字串

opt.axisZTitleColor

String

輸入Z軸標題顏色字串

opt.axisZTitleFontSize

String

輸入Z軸標題字型大小字串

opt.axisZTitleFontFamily

String

輸入Z軸標題字型字串

opt.axisZTitleDistance

Number

輸入Z軸標題與軸線距離數字

opt.axisZLineColor

String

輸入Z軸線顏色字串

opt.axisZLineWidth

Number

輸入Z軸線寬度數字

opt.axisZTickLineColor

String

輸入Z軸刻度線顏色字串

opt.axisZTickLineWidth

Number

輸入Z軸刻度線寬度數字

opt.axisZTickLineLength

Number

輸入Z軸刻度線長度數字

opt.axisZTickNum

Number

輸入Z軸刻度數量數字

opt.axisZTickLabelDistance

Number

輸入Z軸刻度標籤與軸線距離數字

opt.axisZTickLabelDig

Number

輸入Z軸刻度標籤小數位數數字

opt.axisZTickLabelColor

String

輸入Z軸刻度標籤顏色字串

opt.axisZTickLabelFontSize

String

輸入Z軸刻度標籤字型大小字串

opt.axisZTickLabelFontFamily

String

輸入Z軸刻度標籤字型字串

opt.axisZGridLineColor

String

輸入Z軸網格線顏色字串

opt.axisZGridLineWidth

Number

輸入Z軸網格線寬度數字

opt.cameraType

String

'perspective'

輸入相機類型字串，可選'perspective'或'orthographic'，預設'perspective'

opt.cameraFov

Number

輸入透視相機視野角度數字

opt.cameraNear

Number

輸入相機近裁剪面數字

opt.cameraFar

Number

輸入相機遠裁剪面數字

opt.cameraOrthographicRatio

Number

輸入正交相機比例數字

opt.cameraAzimuthAngle

Number

輸入相機方位角(水平角度)數字，因可通過UI改變導致Vue無法監聽變數有變而觸發computed，故建議直接使用setCameraAzimuthAngle變更

opt.cameraPolarAngle

Number

輸入相機極角(垂直角度)數字，因可通過UI改變導致Vue無法監聯變數有變而觸發computed，故建議直接使用setCameraPolarAngle變更

opt.menuSettingIcon

String

輸入設定選單圖示SVG path字串，預設mdiCogOutline

opt.menuSettingTooltip

String

'Settings'

輸入設定選單tooltip文字字串，預設'Settings'

opt.menuHelperAxesIcon

String

輸入輔助軸線圖示SVG path字串，預設mdiAxis

opt.menuHelperAxesTooltip

String

'Help axes'

輸入輔助軸線tooltip文字字串，預設'Help axes'

opt.menuHelperGridIcon

String

輸入輔助網格圖示SVG path字串，預設mdiGrid

opt.menuHelperGridTooltip

String

'Help grid'

輸入輔助網格tooltip文字字串，預設'Help grid'

opt.menuPerspectiveIcon

String

輸入透視切換圖示SVG path字串，預設mdiProjectorScreenOutline

opt.menuPerspectiveTooltip

String

'Perspective'

輸入透視切換tooltip文字字串，預設'Perspective'

opt.menuAxisIcon

String

輸入座標軸圖示SVG path字串，預設mdiPackageVariantClosed

opt.menuAxisTooltip

String

'Axis'

輸入座標軸tooltip文字字串，預設'Axis'

opt.menuAutoRotateIcon

String

輸入自動旋轉圖示SVG path字串，預設mdiAxisZRotateCounterclockwise

opt.menuAutoRotateTooltip

String

'Auto rotate'

輸入自動旋轉tooltip文字字串，預設'Auto rotate'

opt.menuViewXYIcon

String

輸入XY平面視角圖示SVG path字串

opt.menuViewXYTooltip

String

'XY plane'

輸入XY平面視角tooltip文字字串，預設'XY plane'

opt.menuViewXZIcon

String

輸入XZ平面視角圖示SVG path字串

opt.menuViewXZTooltip

String

'XZ plane'

輸入XZ平面視角tooltip文字字串，預設'XZ plane'

opt.menuViewYZIcon

String

輸入YZ平面視角圖示SVG path字串

opt.menuViewYZTooltip

String

'YZ plane'

輸入YZ平面視角tooltip文字字串，預設'YZ plane'

opt.menuLegendIcon

String

輸入圖例圖示SVG path字串，預設mdiListBoxOutline

opt.menuLegendTooltip

String

'Legend'

輸入圖例tooltip文字字串，預設'Legend'

opt.legnedBackgroundColor

String

'rgba(90,90,90,0.5)'

輸入圖例區域背景色字串，預設'rgba(90,90,90,0.5)'

opt.legnedHeight

Number

null

輸入圖例區域固定高度數字，單位px，預設null

opt.legnedHeightMax

Number

null

輸入圖例區域最大高度數字，單位px，預設null