查看手机演示

# 3d三维模型

一个快速生成webGL，3D物品预览、动画、3D模块元素修改组件，基于uniapp的renderjs技术开发，后续再补充微信小程序端兼容。

# 平台兼容

H5	微信小程序	app（IOS,android）
√	×	√

# 安装

该组件基于Three.js开发封装，需要在项目中首先安装Three.js才能使用
three文档 (opens new window)

npm i three -S

# 使用

提示

3D模型组件的宽高适应上级元素的宽高（需要用view包裹并有明确的元素高度）

# 代码演示

基本使用

<template>
  <view>
    <!-- modelUrl传入指定glb模型，不传显示默认模型 -->
    <view style="height:200rpx">
      <k-3d  modelUrl="http://cdn.k900.top/image/Soldier.glb"></k-3d>
    </view>

  </view>
</template>

进阶使用

 <template>
  <view>
    <!-- 示例包括触发动画、触发模块颜色、重新渲染等方法演示在下方 methods -->
    <view style="height:200rpx">
      <k-3d ref="k3d" v-if="is3D" modelUrl="http://cdn.k900.top/image/Soldier.glb" :rotation="true" :lucency="true" @modelAnimation="getAniList" @modeMesh="getModeMesh" @getProgress="num=$event"></k-3d>
    </view>


    <!-- 按钮：指定动画触发 -->
   <view class="btnList" v-if="AniList && AniList.length>0">
      <button @click="setAnima(item)" class="k3d-btn" v-for="(item,index) in AniList">动画{{index+1}}</button>
    </view>

    <!-- 按钮：指定模块改变颜色 -->
   <view class="btnList" v-if="MeshList && MeshList.length>0">
      <button @click="setMesh(item)" class="k3d-btn back" v-for="(item,index) in MeshList">{{item.name}}</button>
    </view>

      <button type="primary"  @click="update3D">重新渲染3D场景</button>
  </view>
</template>

 export default {
    data() {
      return {
        AniList: [], //模型机械动画预设组
        MeshList: [], //模型模块组
        is3D: true, //重新渲染
        num:0,//模型加载进度值
      }
    },
    methods: {
      // 获得组件的模型动画组
      getAniList(value) {
        console.log('G2使用组件-动画组', value);
        this.AniList = value
      },
      // 获得模型模块组合 块
      getModeMesh(value) {
        console.log('G2使用组件-模块组', value);
        this.MeshList = value
      },

      // 触发指定动画
      setAnima(item) {
        this.$refs['k3d'].payAnim(item)
      },

      // 修改指定模型模块样式
      setMesh(item) {
        let style = {
          color: '#17d9ff'
        }
        this.$refs['k3d'].setMesh(item, style)
      },

      // 重新渲染场景
      update3D() {
        this.is3D = false
        this.AniList = [] //模型机械动画预设组
        this.MeshList = [] //模型模块组
        setTimeout(() => {
          this.is3D = true
        }, 50)
      },


    }
  }

# API

属性：

组件的height、width自适应上级元素。

参数	类型	作用	默认值
modelUrl	string	gltf格式的3d模型网络地址（其他模型格式未测）	默认模型
size	Number	模型大小缩放倍数	1
rotation	Boolean	是否开启模型自动旋转	false
lucency	Boolean	背景是否透明	false
background	string	背景颜色（lucency为true时无效）	#f4f7ff

回调事件：

@modelAnimation: function => 返回当前模型的预设机型动画数组，无返回空数组[]
@modeMesh: function => 返回当前模型的模块组合，无返回空数组[]
@getProgress:function => 返回当前进度条的进度（0-100）

实例事件：

.payAnim(value) => 触发指定动作动画，value传入动画预设对象
.setMesh(value,style) => 修改模型指定模块样式，value传入指定模块对象,style传入网格材质属性（具体属性看：three网格材质 (opens new window)）

插槽slot：

自定义在渲染加载时内容样式

← 动画组件