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 |