三维模型加载器组件（"Tri"代指3D/Three.js）

基本用法

<template>
  <kq-tri-loader />
</template>

属性

属性 说明 类型 默认值
scene 场景设置 object 场景设置
grid 坐标格辅助对象 object 坐标格设置
camera 相机设置 object 相机设置
orbitCtrl 轨道器器设置 object 加载器设置
models 模型列表 array 模型配置
lights 灯光列表 array 灯光配置
highlight 高亮配置 object 高亮配置
transparent 透明配置 object 透明配置
terrain 地形，当有地形模型时，不设置此值 object 地形配置
skybox 天空盒子，需要指定路径和文件格式。文件名不能变，文件格式根据指定文件格式来。例如：px.jpg, nx.jpg, py.jpg, ny.jpg, pz.jpg, nz.jpg object 天空盒子配置

事件

属性 说明 参数
loaded 模型加载完成 { renderer, scene, camera, handler }
models-progress 模型加载中 { count, total }
object-click 对象点击 { object, handler }
object-mouseover 鼠标经过对象 { object, intersects, handler }
loaded 加载完成 { renderer, scene, camera, handler }
orbitctrl-start 轨道器开始操作 { orbitCtrl, camera }
orbitctrl-change 轨道器操作中 { orbitCtrl, camera }
orbitctrl-end 轨道器操作结束 { orbitCtrl, camera }
orbitctrl-rotating 轨道器自动旋转中 { orbitCtrl, count, angle}
orbitctrl-rotated 轨道器自动旋转结束 { orbitCtrl, count, angle}
keydown 键盘按下 { key}
keyup 键盘抬起 { key}

方法

属性 说明 参数 返回值
showAxesHelper4Object 显示对象坐标轴 (name) null
hideAxesHelper 隐藏坐标轴 null null
getObjects 获取对象列表，第二个参数是指是否克隆材质，防止多个对象用一个公共材质球 [name], isCloneMaterial = false array[object]
getSceneTreeView 获取场景模型对象列表 null array[{name: null, data:[{object}]}]
getAllChildren4Oject 获取对象所有子对象 name array[object]
getScene 获取场景句柄 null null
getRenderer 获取渲染去句柄 null null
getCameras 获取相机句柄，不指定相机名称返回相机列表句柄 (name/index) null
setObjectsHide 设置对象隐藏 (names) null
setObjectsShow 设置对象显示 (names) null
setObjectsHighlight 设置对象高亮 (names, multiple = true) null
setObjectsUnHighlight 设置不高亮对象 (names) null
clearObjectsHighlight 清除高亮 null null
setObjectsTransparent 设置对象透明 (names) null
setObjectsUnTransparent 清除对象透明 (names) null
setObjectsBaseColor 设置对象基础颜色 (names, color) null
restoreObjectsBaseColor 还原对象基础颜色，当使用setObjectsBaseColor方法后，此方法用的比较多 (names) null
setObjectsMaterialColor 设置对象材质颜色 (names, color) null
restoreObjectsMaterialColor 还原对象材质颜色，当使用setObjectsMaterialColor方法后，此方法用的比较多 (names) null
getObjectsPosition 获取对象平移 (names [{z, y, z}]
setObjectsPosition 设置对象平移 (names, position = {z, y, z}, time = 1000) null
getModels 获取模型列表 null array[model]
setModelsRotation 设置模型轴向 (names, rotation = {z, y, z}, time = 1000) null
getObjectsRotation 获取对象旋转 (names) [{z, y, z}]
setObjectsRotation 设置对象旋转 (names, rotation = {z, y, z}) null
setObjectsRotationOnAxis 设置本地对象旋转（x、y、z一般传递一个值） (names, rotation = {z, y, z}) null
setObjectsLoopRotation 设置对象循环旋转 (names, rotation = {z, y, z}) null
getModelCenter 获取模型中心点 (object) object
getOrbitControls 获取轨道器句柄 null object
autoTweenAnimation 自定义补间动画 参数说明 null
setCameraPosition 设置相机位置 (position, callback) null
setCameraRotation 设置相机角度 (rotation, callback) null
getAnimationsList 获取场景中动画列表 null array[{name, model, animations}]
playAnimationMixer 播放动画 参数说明 array[{name, animation, callback}]
resetRoam 重置漫游（第一人人称相机启用），由于浏览器的安全性，需要通过用户主动触发（点击）才可以起效 (value = true) null
resetRoamDelta 设置漫游速度 (value) null
resetModelCenter 设置模型居中场景 null null
setIsolated 设置高亮对象孤立 null null
setUnIsolated 取消高亮对象孤立 null null
setTopView 设置顶视图 null null
setSideView 设置侧视图 null null
setFrontView 设置前视图 null null
getObjectBox 获取对象盒子 (name) THREE.Box3
getObjectSize 获取对象盒子尺寸 (name) THREE.Vector3
getObjectCenter 获取对象盒子中心点 (name) THREE.Vector3
flyToObject 漫游目标对象 ({position, rotation, name}) null
openLight 开灯 参数说明 null
closeLight 关灯 (names, intensity = 0.1) null
setImageTexture4Object 设置对象贴图 (name, url) null
clearImageTexture4Objects 清除对象贴图 (names) null
appendMarkers 追加覆盖物 (markers = [{icon, code, …}]) null
removeMarkers 删除覆盖物 (markers = [{code, …}]) null
clearMarkers 清除覆盖物 () null
setWireframe4Objects 设置网格显示 (names = [], wireframe = true/false) null
showFPS 显示FPS null null
hideFPS 隐藏FPS null null
setMoveSpeed 设置移动速度 (value) null
setRotatedSpeed 设置旋转速度 (value) null
dispose 模型销毁 null null

场景设置

属性 说明 类型 默认值
background 场景背景颜色/图片 string null
clearColor 前景色 string #ffffff

坐标格设置

属性 说明 类型 默认值
show 显示网格线 boolean false
size 坐标格尺寸 string 300
divisions 坐标格细分次数 string 50
colorCenterLine 中线颜色 string #00ff12
colorGrid 中线颜色 string #ffffff

相机设置

属性 说明 类型 默认值
aspect 相机视锥体 number 浏览器视窗宽高比
fov 视野角度 number null
near 近裁剪面距离 number null
far 远裁剪面距离 number null
name 相机名称，随意命名，唯一值 string null
position 相机位置 object {x: 0, y: 0, z: 0}
rotation 相机旋转角度 object {x: 0, y: 0, z: 0}
lookAt 相机焦点定位 object {x: 0, y: 0, z: 0}

加载器设置

属性 说明 类型 默认值
alpha 加载器缓冲器是否允许透明值 boolean true
antialias 是否启用锯齿处理 boolean true
autoClear 渲染器是否应在渲染每一帧前自动清除 boolean true
orbitCtrl 是否使用轨道器 boolean/object 轨道器配置
pointer 启用指针 boolean true
resize 浏览器窗口变化时，是否改变场景大小 boolean true
shadow 阴影启动 boolean true
width 宽度 number null
height 高度 number null

模型配置

属性 说明 类型 默认值
name 模型名称，随意命名，唯一不可重复 string null
src 模型路径 string null
type 模型类型 string 模型类型
hide 是否隐藏 boolean null

灯光配置

属性 说明 类型 默认值
name 灯光名称，随意命名，唯一不可重复 string null
castShadow 启用投射阴影 boolean true
color 灯光颜色 string/number #ffffff
intensity 亮度 number 1
position 灯光位置 object {x: 0, y: 0, z: 0}
shadowMapSize 灯光投射影长 object {width: 512, height: 512}
type 灯光类型 string 灯光类型

高亮配置

属性 说明 类型 默认值
edgeStrength 描边强度（越大越粗） number 10
blur 是否应该模糊轮廓 boolean false
pulseSpeed 脉冲频率 number 0.1
visibleEdgeColor 可见轮廓颜色（十六进制） color #ffffff
hiddenEdgeColor 被遮挡部分的轮廓颜色 color 0x220090a
useInMouseover 鼠标放置对象上去显示高亮 boolean null
useInClick 点击对象显示高亮 boolean null

透明配置

属性 说明 类型 默认值
color 透明颜色 hex 0x88ccff
opacity 透明度 number 0.5
depthWrite 避免遮挡后面的物体 boolean false
useInMouseover 鼠标放置上去显示透明 boolean null
useInClick 点击显示透明 boolean null

灯光类型

属性 说明 类型 性能消耗
ambient 环形光，基本光照（默认值） string 低
directional 太阳光， 平行光 string 中
point 点光源，灯泡、点光源 string 高
spot 聚光灯，手电筒、聚光灯 string 高
hemisphere 半球光，户外环境光 string 低
rectArea 矩形区域光，窗户、灯箱 string 中

轨道器配置

属性 说明 类型 默认值
autoRotate 自动旋转 boolean false
maxAutoRotations 最大旋转周数，一般和autoRotate结合使用 number null
autoRotateSpeed 自动旋转速速；从顶视图看，正值是逆时针；负值是顺时针 number 2.0
enableDamping 是否启用阻尼惯性 boolean true
dampingFactor 阻尼系数 number 0.05
maxDistance 相机距离目标点的最大距离 number 100
minDistance 相机距离目标点的最小距离 number 1
useRoam 使用漫游（wasd键） boolean null
roamDelta 漫游速度 number 0.2

模型类型

属性 说明 类型 默认值
gltf gltf，不允许大写 string null
glb glb，不允许大写 string null
fbx fbx，不允许大写 string null

自定义补间动画参数说明

属性 说明 类型 默认值
prop 动画属性 null 属性配置
value 目标位置 {x, y, z} null
time 执行时间(ms) number 1000
easing 动画类型 string TWEEN.Easing.Quadratic.Out
callback 动画执行完毕回调函数 function null

模型剪辑动画参数说明

属性 说明 类型 默认值
name 动画名称 string null
start 开始时间(s) number null
time 执行时间(s) number null
timeScale 播放倍速（负值为倒放） number 1000
loop 循环次数 number 1
clamp 是否停留之后一帧 boolean true
callback 动画指定完毕回调 function null

开灯参数说明

属性 说明 类型 默认值
names 对象名称 array null
emissive 灯光贴图路径 string null
hz 灯光赫兹频率 number null
intensity 灯光亮度 number 0.5
light 灯光颜色 color null
callback 回调 function({hz, object}) null

自定义补间动画prop动画属性

属性 说明 类型 默认值
position 平移动画 position null
rotation 旋转动画 rotation null

地形参数

属性 说明 类型 默认值
plane 地形几何体 object 几何体配置
heightmap 高度图/灰度高度图地址 string null

天空盒子

属性 说明 类型 默认值
path 文件路径，例如：/data/skybox/ string null
format 图片格式化 string null
px 正X轴方向（右面） string null
nx 负X轴方向（左面） string null
py 正Y轴方向（上面） string null
ny 负Y轴方向（下面） string null
pz 正Z轴方向（前面） string null
nz 负Z轴方向（后面） string null

地形几何体配置

属性 说明 类型 默认值
width 平面沿 X 轴的宽度（可选） number 200
height 平面沿 Y 轴的高度（可选） number 200
widthSegments 沿宽度方向的分段数（可选） number 100
heightSegments 沿高度方向的分段数（可选） number 100

results matching ""

    No results matching ""