ModelShow 轻易展示你的模型

ModelShow.js是一个 Web 插件，可以在尽可能少写代码的情况下轻松渲染交互式 3D 模型。后续随着更新迭代持续为您提供出色的渲染质量和性能,目前暂时仅支持glb格式的模型

效果展示

• 多个模型加载

• 热点标签

• 进入动画

特点

• 简单快速
• 支持加载回调
• 多种定制化配置
• 多种格式模型（后续）
• 热点标签

一、安装调试

• 安装依赖

npm install

• 运行项目

npm run dev

• 打包项目

npm run build

二、快速开始

• script标签

<div style="width:100vw;height:100vh;" id="modelBox"></div>
<script src="./modelShow.js"></script>
<script>
     new modelShow({
           dom: '#modelBox',                   
           src: './model/SittingBox.glb',       
        })
</script>

• React

npm i modelshow

import { modelShow } from 'modelshow'

useEffect(() => {
    new modelShow({
      dom: "#DOM", //挂载的DOM元素
      src: "/Chair.glb", //模型地址
    });
  }, []);

• 更多配置

        new modelShow({
            dom: '#modelBox',                   //挂载的DOM元素
            src: './model/Chair.glb',            //模型地址
            autoRotate: false,                   //是否开启自动旋转
            autoRotateSpeed: 1,                  //自动旋转速度
            dampingFactor: 0.2,                  //阻尼惯性,
            background: true,                    //是否开启背景
            backgroundSrc: './img/test.hdr',     //自定义背景图             
            animationAutoPlay: false,            //是否开启自动播放动画
            enterDelay:2000,                     //模型加载完毕的镜头动画持续时间
            firstTip:true,                       //是否开启提示动画
            enableControls: true,                //是否允许操作模型
            enableScale:false,                   //是否允许缩放模型
            modelLight:1,                        //模型亮度
        
            cameraLog: true,                     //打开镜头位置回调,控制栏打印的镜头位置用来设置cameraPositon
            cameraPositon: {x: -1.1327100102464236, y: 1.2951240863255877, z: 5.040950697231143},   //镜头进来的初始位置
            toCameraPositon:{ x:-3.3314586169228764, y:1.560133658479898, z:4.393925409555959}, //动画要去的角度
            canLookBottom:false,                 //是否能观察到底部

            hotLableClickLog: true,              //打开热点位置回调,控制栏打印的热点位置用来设置hotLable里的position
            hotLable: [
                {
                    position: {x: 0.40007822100729656, y: 1.592662647707436, z: -3.2767245957335804},
                    txt: '真皮沙发',
                },
                {
                    position: {x: -0.19227751846494473, y: -0.12946819191214498, z: -0.543004078646794},
                    txt: '红木木材',
                    style: `
                    padding: 9px 17px;
                    background: #fff;
                    border-radius:5px;
                    align-items:center;
                    justify-content:space-between;
                    font-size: 15px;
                    `
                }
            ],

            loadProgress: (progress) => {       //加载回调
                console.log('Model progress:  ' + progress)
            },

            loadEnd: () => {                    //加载完毕回调
                console.log('model done')
            },
            
        })

三、运行的必要条件

• Node.js v12
• 支持webgl的浏览器

License

MIT

Change Log

v1.0 (2022/01/02 14:02)

• ~~glb模型导入~~
• ~~自动播放模型动画~~
• ~~增加hdr贴图~~
• ~~完成基础场景搭建~~
• ~~自定义镜头旋转速度,阻尼大小~~
• ~~模型加载回调~~

v1.1 (2022/01/07 17:06)

• ~~热点标签模块以及点击回调~~

v1.2 (2022/01/11 15:43)

• ~~镜头位置打印以及设置~~
• ~~镜头限制是否能看到底部~~
• ~~模型加载后的镜头动画以及配置~~
• ~~支持加载draco压缩后的gltf模型~~
• ~~增加热点的大小缩放~~
• ~~进入动画 + 操作提示~~

v1.3 (2022/01/12 17:30)

• ~~压缩插件打包体积(1.5m -> 775kb)~~

v1.3.1 (2022/01/13 17:48)

• ~~再次压缩插件打包体积(776kb -> 636kb)~~

v1.4.0 (2022/01/18 14:27)

• ~~增加es6模块加载示例~~
• ~~fix 进入提示操作动画BUG~~
• ~~自定义背景hdr贴图~~

v1.5 (2022/01/20 11:06)

• ~~增加判断进行打包~~
• ~~热点文字提示改版~~
• ~~增加模型跟着操作提示旋转~~
• ~~增加是否禁止操作模型选项~~
• ~~增加是否禁止缩放模型选项~~

v1.5.1 (2022/01/24 17:11)

• ~~增加npm仓库以及react示例~~

v1.5.2 (2022/01/25 17:08)

• ~~增加模型亮度调整~~
• ~~支持加载fbx格式模型~~

Todo List

• 支持加载obj模型

• 搭建官网 + 示例 + 文档

• 开发热点遮挡自动隐藏

• TypeScript重构