Muz-Threes WebGL三维
基于three.sj开发的VUE组件——Жидзин（Zidjin）系列组件库。
安装
推荐使用 npm 的方式安装。
npm install muz-threes引入
全局引入，在 main.js 中写入以下内容：
import Vue from 'vue';
import App from './App.vue';
import MuzThrees from "muz-threes";
Vue.use(MuzThrees);
new Vue({
el: '#app',
render: h => h(App)
});局部引入，在 vue页面文件中写入以下内容
export default {
components: {
MuzThrees: () => import('muz-threes'),
},
};基本用法
初始化中心坐标、缩放比例和背景图层，默认坐标为北京天安门。
<muz-threes :three-config="threeConfig"></muz-threes>
<script>
export default {
components: {
threeConfig: {
/** 基础配置（单位：米） */
config: {
/** @brief 相机位置 */
position: {x: -20, y: 10, z: -20},
/** @brief 相机朝向 */
lookAt: {x: 0, y: 0, z: 0},
grid: {},
axes: {},
/** @brief 视轨控制器 */
orbit: {
mapControl: false, //是否启用为地图控制模式
/* 以下原生属性 */
target: {x: 0, y: 0, z: 0},
autoRotate: true, //自动旋转
},
},
}
},
data: ()=>({})
};
</script>Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| three-config | 配置。所有效果都通过这里配置 | object | - | - |
Three-Config Attributes
| 说明 | 参数 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 基础配置 | config | object | - | （单位：米） |
| 地面贴图 | grounds | array | - | （单位：米） |
| 灯光 | lights | array- | - | |
| 各种物体 | object3Ds | array | - | |
| 线 | lines | array | - | |
| 气泡窗组 | bubbles | array | - | |
| 相机轨迹 | tracks | array | - | |
| 树林 | trees | array | - | |
| 全景 | panoramas | array | - | |
| 动画 | animations | array | - | |
| 移动 | moves | array | - | |
| false |
Config Options
基础配置选项。Config of Three-Config Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| fov | 相机视角 | number | 70 | |
| near | 相机近面 | number | 1 | |
| far | 相机远面 | number | 1000 | |
| clearColor | 背景颜色 | object | { color: 0x000426, alpha: 1.0} | |
| position | 相机位置 | object<x,y,z> | {x: -20, y: 10, z: -20} | |
| lookAt | 相机朝向 | object<x,y,z> | {x: -19, y: 10, z: 0} | |
| shadow | 启用阴影 | object | { show: true } | |
| stats | 性能监测 | object | { show: false } | |
| grid | 平面坐标格助手。 默认为500*500m网络，细分为50份，即每小格10平方米 |
object | { show: true, size: 100, //尺寸 divisions: 10, //细分数 } |
|
| axes | 直角坐标系助手 | object | { show: true, size: 200, //轴线长，rgb三色对应xyz三轴 } |
|
| fog | 雾 | object | { show: true, color: 0x051041, //雾的颜色 // #051041 near: 0, //雾的最小距离，rgb三色对应xyz三轴 far: 2000, //雾的最大距离，rgb三色对应xyz三轴 } |
|
| antialias | 是否执行抗锯齿。对性能有影响 | boolean | true | false |
| orbit | 视轨控制器 | object | { show: true, mapControl: true, //是否启用为地图控制模式 /* 以下原生属性 */ target: {x: 0, y: 10, z: 0}, enableDamping: true, // 启用阻尼 enableZoom: true, //缩放 enablePan: true, //右键平移拖拽 enableRotate: true, //左键拖动旋转 enableKeys: true, //启用或禁用键盘控制 dampingFactor: 0.1, // 阻尼大小 screenSpacePanning: false, //相机平移方式 minDistance: -50, //相机距原点近面 maxDistance: 1000, //相机距原点远面 keyPanSpeed: 7, //当使用键盘按键的时候，相机平移的速度有多快。默认值为每次按下按键时平移7像素。 maxPolarAngle: Math.PI / 2, //最大俯角 panSpeed: 5, //平移速度 rotateSpeed: 0.2, //旋转速度 autoRotate: false, //自动旋转 autoRotateSpeed: 0.2 ,//自动旋转速度 } |
Grounds Options
地面贴图（单位：米）
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| width | 宽 | number | 100 | |
| height | 高 | number | 100 | |
| map | 贴图地址 | string | url | |
| position | 中心位置 | object<x,y,z> | {x: 0, y: 0, z: 0} | - |
Lights Options
灯光
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| *type | 光照类型 | string | ambient环境光、point点光源、 sun太阳光、hemisphere半球光、 directional平行光、spot聚光灯、 area面光源 |
|
| *color | 光的颜色 | hex | 0xFFFFFF | 0xFFFFFF |
| *intensity | 光的强度。适用 | number | - | 1 sun为5; |
| *position | 光的位置 | object | {x: 50, y: 20, z: 50} sun为： {x: 50000, y: 30000, z: 50000} |
|
| distance | 光照距离 适用：point、sun、spot |
number | 0为无限远 | 0 sun为100000; |
| decay | 光衰退量 适用：point、sun、spot |
number | 1 sun为1; |
|
| size | 投影的大小，直径，默认为10（即半径5）。 适用：directional |
number | 10 | |
| near | 投影的最近点 适用：directional |
number | ||
| far | 投影的最远点 适用：directional |
number | ||
| mapSize | 投影分辨率。定义阴影贴图的宽度和高度。只有开启阴影才有效。 适用：directional |
number<2^n> | 必须是2的平方数 | 512 |
| helper | 启用光线助手 适用：directional、hemisphere、area |
object/boolean | ||
| groundColor | 地面反射光的颜色 适用：hemisphere |
hex | 0xFFFFFF | |
| angle | 聚光灯的光照角度 适用：spot |
number | Math.PI/3 | |
| penumbra | 聚光灯的半影??? 适用：spot |
number | 0 | |
| width | 面光源的宽度 适用：area |
|||
| height | 面光源的高度 适用：area |
|||
| lookAt | 光照朝向 适用：area |
object<x,y,z> |
Lines Options
线的属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| show | 是否显示 | boolean | false | show |
| dots | 线的连续点集合 | array<array[x,y,z]> | [[0,0,0],[10,5,10]] | - |
| color | 线的颜色 | hex | - | 0x0000ff |
Panoramas Options
全景VR属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| map | 全景贴图 | string | ||
| radius | 全景球半径 | number | 5 | |
| width | 全景球的水平分割数 | number | 32 | |
| height | 全景球的垂直分割数 | number | 16 | |
| side | 贴图的面 | string | back内面贴图 double双面贴图 |
double |
| color | 全景球的基础色 | hex | - | 0xFFFFFF |
| position | 球的位置 | object<x,y,z> | - | {x: 0, y: 0, z: 0} |
Bubbles Options
气泡窗组选项
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| width | 宽，气泡的直径 | number | - | 10 |
| ppi | 分辨率，即气泡单位长度的像素密度 默认为宽10x20ppi，即200x200px，一般不建议尺寸超过1000宽高，以免数据多时会影响性能。 |
number | - | 20 |
| color | 字的颜色 | string | - | '#333' |
| backgroundColor | 气泡的背景色 | string | - | '#CCC' |
| list | 气泡窗列表 | array | - | - |
List of Bubbles Options
气泡窗列表
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| id | ID | string/number | - | - |
| text | 气泡文本 | string | - | - |
| position | 气泡位置 | object<x,y,z> | - | - |
| emit | 点击气泡时触发的信号 触发事件后将接收两个属性：气泡文本name和数据userData， 其中userData对象结构为object<id,emit,raw> |
string | - | - |
| raw | 需要携带的原始数据，会添加到气泡对象的userData中 | string/object/array | - | - |
object3Ds Options
三维模型对象列表
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| url | 文件路径 | string | - | - |
| type | 文件类型 | string | 'gltf', 'stl' | - |
| scale | 缩放 | object<x,y,z> | - | {x: 1, y: 1, z: 1} |
| position | 位置 | object<x,y,z> | - | {x: 0, y: 0, z: 0} |
| rotation | 旋转（弧度） | object<x,y,z> | - | {x: 0, y: 0, z: 0} |
| list | 克隆列表，可配置position,rotation子选项 | array | - | - |
| materialType | 材质类型 适用：stl |
string | 'point', 'line', 'mesh' | |
| materialColor | 材质颜色 适用：stl |
hex | 0xFFFFFF | |
| dotSize | 点大小 适用：stl |
int | 1 |