glb model player

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

use

for example

• SINGLE

       <!-- <glb-model-play  modelUrl="https://yuanshu-3d-model-demo.oss-cn-beijing.aliyuncs.com/output/1662469504652668930/1685238431918/glb/scene.glb"></glb-model-play> -->

• 多个比如轮播

<template>
  <div>
    <glb-model-play   :modelUrl="modelUrl" :camera-postion="cameraPostion"  :index=String(index) :width="currentWidth" :height="currentHeight" ></glb-model-play>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modelUrl: 'https://yuanshu-3d-model-demo.oss-cn-beijing.aliyuncs.com/output/1662469504652668930/1685238431918/glb/scene.glb',//传模型地址
      CameraPostion: [200, 200, 200],//传相机位置，不传采用默认适配
      backgroundColor: 'red',//传背景颜色
       currentWidth:0,//传宽
      currentHeight:0,//传高
    };
  },
};

</script>

发布包

1. https://www.npmjs.com/ 注册账号
2. 切镜像 npm config set registry https://registry.npmjs.org 在引入包的时候 可以切换回cnpm 镜像
   npm config set registry https://registry.npm.taobao.org 获取镜像源的方法 npm config get registry
3. npm login登录
4. 更新版本 npm version prepatch
5. "publish": "npm publish --access public"

调试 通过建立软链的方式

（1）下载本包
（2） npm link 创建链接
  (3)  查看全局链接  npm ls --global --depth 0    
（4）在项目中使用 npm likn glb-model-play  （包名）

临时去掉了package.json中暂时用不到的包，需要可以加入

    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"，
    "element-ui": "^2.15.12",

开发包和生产包

可以引入未打包的入口 进行生产环境下的 比如相机距离的调试 "main": "packages/index.js", 未打包 （开发版本）
"main": "dist/myLib.umd.js", 打包后 （生产版本） npm run lib

url?debug=true 可以开启调试模式 获取具体的摄像机位置