Modelshow NPM | npm.io

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')
            },
            
        })