v3d-view v1.1.5

v3d-view

vue.js 3D model viewer component, based on threejs, inspired by model-tag

感谢vue-3d-model，基于此组件演化的一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。 由于本人并非专业前端，是后端人员，只是追求满足使用，代码有不足之处，欢迎指正。

版本功能介绍,请注意组件支持VUE 2.x，并未测试VUE3.x,基础功能请参照vue-3d-model组件官网文档 ！！：

1.0.0 ~ 1.0.1 支持 axisHelper,boxHelper 工具，（如果模型初始位置不在世界坐标原点，此工作可以辅助调整，作为指南针工具，不至于后续调整模型陷入混迷失混乱）属性开关请看属性介绍列表，并加强灯光亮度；

1.0.2 支持 fbx 动画，属性cartoon = true即可实现，其它的格式动画暂未实现，后期有需要了会研究。

1.0.3 补充readme文档遗漏

1.0.4 补充readme文档

1.0.5 修复fbx本身没有自带动画动作情况下无法正常加载（也就是只是个静态模型的情况）

1.0.6 灯光强度bug修复，普通展示模型，灯光无问题，实物模型反光问题待解决

1.1.0 Release版本，修改说明文档.基础功能已经完成。

1.1.1 Release版本，工具优化

1.1.2 新增shadow3d 阴影属性标签和plane阴影helper工具属性标签，支持FBX/STL/DAE格式模型阴影功能;调用方式查看下边的Demo代码。

1.1.3 新增1.1.2版本复杂模型无投影（group父子模型，子节点间相互投影效果，复杂模型建议用点光源测试，可以看到明显效果）；1.1.2 单模型不考虑子节点相互投影也可使用（单模型平行光即可有比较明显效果）。

1.1.4 精简代码体积，提升加载速度

1.1.5 阴影分辨率优化，使阴影清晰；加入地面阴影接收开关和子部件阴影接收开关，便于控制只需要子部件阴影或者地面阴影，更精细控制阴影

Install & upgrade

using npm（升级组件版本也运行以下命令即可，会自动更新组件版本和package.json 版本号）

npm install v3d-view --save

fbx 测试文件test.fbx 在node_modules\v3d-view依赖目录，请自行查找替换到自己测试的目录路径替换测试代码中的路径，动画测试代码如下：

<template>
      <model-fbx :cartoon=true :backgroundAlpha="0" :axis=true :box=true 
                 src="static/models/animation/test.FBX"></model-fbx>
</template>
  
<script>

import { ModelFbx } from 'v3d-view'

export default {
  name: 'demo-animation',
  components: {
    ModelFbx
  },
};
</script>

fbx 、stl 、dae格式阴影标签使用方式:

<model-fbx :shadow3d="shadow3d"  :plane=true  src="static/models/wzj/cloth.fbx"></model-fbx>

fbx 、stl 、dae格式阴影调用Demo代码：

        shadow3d:{
            //标签加上  :shadow3d="shadow3d"；目前仅测试了fbx、stl、dae格式阴影，其它格式暂未实现，后期版本有空研究
            //如果阴影没有显示，试试调整planeMaterial.color或者灯光值；
            //支持平行光和点光源，其它光源不支持阴影
            //目前fbx，dae没有问题，其它格式抽空优化提交版本
            //**参数必须都有**，没有空做非空，类型校验，有空优化，保证先可用
            
            switch:true, //阴影总开关
            childSwitch: true, //子部件是否接受投影
            planeSwitch:true, //地面是否接受投影
            planeGeometry: {width:10000,height:10000,widthSegments:1,heightSegments:1},
            // color：影子颜色；opacity：影子透明度
            planeMaterial: {color:0x000000 ,opacity:0.2 },
         /**
          * 1.调整plane 位置，接受投影，有时候位置不对，plane太小,阴影颜色跟背景色类似,
          *   位置跟模型、光线角度不对，都可能造成阴影效果出不来；plane width,height开始尽量大一些，先调试出来，然后细调，
          * 2.阴影辅助工具:plane=true，可以用来调阴影，影响因素较多，请耐心调试,以下为自己调试用的参数，更多解释请查看threejs官方文档
          */
            rotation: { x: -0.25 * Math.PI, y: 0, z: 0 },
            position: { x: -10, y: 0, z: 0 }

      },

Usage

<template>
  <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
</template>
<script>
import { ModelObj } from 'v3d-view';
export default {
  components: { ModelObj }
}
</script>

Documents

props

events

Model Format Support

Browser Support

Modern browsers and IE 11.

You can click on this for more information.

LICENSE

MIT