Nervous Penpal Message

    muz-threes

    1.0.2 • Public • Published

    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

    Install

    npm i muz-threes

    DownloadsWeekly Downloads

    7

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    18.9 MB

    Total Files

    31

    Last publish

    Collaborators

    • sieyoo