适用faceEnum参数类型的组件设计

作为一个react组件,它将至少可以接收以下props:

propTypes = {
  token: String, //用户的token
  label: String, //此参数的标签
}

此组件的主要依赖为face3d-query项目,face3d-query项目将完成face3d集合相关信息的检索,上传,移除等任务。例如:

import {upload, findAll, init, find, remove} from 'face3d-query'

init(token, baseUrl)  //初始化face3d-query的请求token和请求的基本Url,例如http://test.tuocad.com/tuo-fair-backend

findAll().then(results => console.log(results)) //打印当前用户所有的face3d数据
find(id).then(result => console.log(result)) //打印当前用户所指定的face3d.id的数据
upload(data).then(result => console.log(result)) //打印上传当前数据的结果 {result: 'ok'}为成功, {result: 'error', msg: String} //为上传失败和失败原因
remove(id).then(result => console.log(result)) //打印移除指定数据的结果, 结果的格式与upload相同。

此组件将在合适的位置和时间,提供用户对face3d数据的查寻,移除和上传功能。

关于tuo-scene中使用绑定3D点的说明

所谓绑定3D点是指一个点具备独立的坐标值,但时它在实际应用的时候,我们需要把它看成是在某个相对坐标系下的坐标。这种应用场景出现在TuoObject2D中计算投射2D点时引用了某个3D对象上的某个点的情况。

TuoObject2D对象不能像原生的three.js的Object3D那样直接作为一个子对象添加到3D场景中去,但有时候我们却需要在计算其坐标时把它当作某个Object3D对象的子对象。在这种场景下,我提出一个解决方案,就是给创建TuoObject2D对象时应用的3D点point添加一个_bindObject对象。到要实际应用point的时候,采取如下方法获取point的真实坐标值:

let absPoint = new THREE.Vector3()
if(point._buildObject)
  absPoint.copy(point).applyMatrix4(point._buildObject.matrixWorld)

使用示例1

上传STEP资源

创建文档

文档中引用STEP资源相关的可视化数据

doc.loadResource('TuoVisual', 'https://res.tuocad.com/uploads/5fc78f56eb6bac000c3b4c22/5fc78f57eb6bac000c3b4c23.TuoVisual', (info) => {              
  doc.setOriginState() //定义文档初始状态
  
  
  doc.callAfterComplete(doc => {
    doc.viewDocument.fitScene() //调整初始化视图摄像头与对象的距离
    doc.viewDocument.setViewPoint('LeftTopFront') //调整初始摄像头视角
    doc.viewDocument.setCameraControls({type:'orbit'}) //配置摄像头控件
  })  
})

调整可视化数据

调整装配体模型的组织结构

'use strict'
doc.loadResource('TuoVisual', 'https://res.tuocad.com/uploads/5fc78f56eb6bac000c3b4c22/5fc78f57eb6bac000c3b4c23.TuoVisual', (info) => {              
  doc.setOriginState() //定义文档初始状态
  
  
  //统一组织结构
  let totalGroup = {
    type: 'group',
    name: 'totalGroup',
    children: [
      'SJZ-HG1_ASM', 
      'SJZ-X', 
      'SJZ-X001', 
      'SJZ-X002',
      'SJZ-X003',
      'SJZ-DINGB',
      'SJZ-DK',
      'SJZ-JPTLJ',
      'SJZ-LJ-R',
      'SJZ-JPT',
      'SJZ-KZFS',
      'SJZ-KZFS-B'
    ]
  }
  doc.addNode(totalGroup)
  
  
  
  doc.callAfterComplete(doc => {
    doc.viewDocument.fitScene() //调整初始化视图摄像头与对象的距离
    doc.viewDocument.setViewPoint('LeftTopFront') //调整初始摄像头视角
    doc.viewDocument.setCameraControls({type:'orbit'}) //配置摄像头控件
})  

调整模型的位姿

'use strict'
doc.loadResource('TuoVisual', 'https://res.tuocad.com/uploads/5fc78f56eb6bac000c3b4c22/5fc78f57eb6bac000c3b4c23.TuoVisual', (info) => {              
  doc.setOriginState() //定义文档初始状态
  
  //配置位姿矩阵
  let scale = 0.01
  let utils = doc.getUtils()
  let m0 = new utils.THREE.Matrix4()
  let s = new utils.THREE.Vector3(scale, scale, scale)
  m0.scale(s)
  let m1 = new utils.THREE.Matrix4()
  m1.makeRotationX(Math.PI/2)
  let m2 = new utils.THREE.Matrix4()
  m2.makeRotationY(Math.PI/2)
  let m3 = new utils.THREE.Matrix4()
  m3.makeTranslation(0, -10, 0)
  m0.premultiply(m1).premultiply(m2).premultiply(m3)
  
  //统一组织结构
  let totalGroup = {
    type: 'group',
    name: 'totalGroup',
    children: [
      'SJZ-HG1_ASM', 
      'SJZ-X', 
      'SJZ-X001', 
      'SJZ-X002',
      'SJZ-X003',
      'SJZ-DINGB',
      'SJZ-DK',
      'SJZ-JPTLJ',
      'SJZ-LJ-R',
      'SJZ-JPT',
      'SJZ-KZFS',
      'SJZ-KZFS-B'
    ],
    matrix: m0.toArray()
  }
  doc.addNode(totalGroup)
  
  
  doc.callAfterComplete(doc => {
    doc.viewDocument.fitScene() //调整初始化视图摄像头与对象的距离
    doc.viewDocument.setViewPoint('LeftTopFront') //调整初始摄像头视角
    doc.viewDocument.setCameraControls({type:'orbit'}) //配置摄像头控件
})  

添加地面对象

'use strict'
doc.loadResource('TuoVisual', 'https://res.tuocad.com/uploads/5fc78f56eb6bac000c3b4c22/5fc78f57eb6bac000c3b4c23.TuoVisual', (info) => {              
  doc.setOriginState() //定义文档初始状态
  
  //配置位姿矩阵
  let scale = 0.01
  let utils = doc.getUtils()
  let m0 = new utils.THREE.Matrix4()
  let s = new utils.THREE.Vector3(scale, scale, scale)
  m0.scale(s)
  let m1 = new utils.THREE.Matrix4()
  m1.makeRotationX(Math.PI/2)
  let m2 = new utils.THREE.Matrix4()
  m2.makeRotationY(Math.PI/2)
  let m3 = new utils.THREE.Matrix4()
  m3.makeTranslation(0, -10, 0)
  m0.premultiply(m1).premultiply(m2).premultiply(m3)
  
  //统一组织结构
  let totalGroup = {
    type: 'group',
    name: 'totalGroup',
    children: [
      'SJZ-HG1_ASM', 
      'SJZ-X', 
      'SJZ-X001', 
      'SJZ-X002',
      'SJZ-X003',
      'SJZ-DINGB',
      'SJZ-DK',
      'SJZ-JPTLJ',
      'SJZ-LJ-R',
      'SJZ-JPT',
      'SJZ-KZFS',
      'SJZ-KZFS-B'
    ],
    matrix: m0.toArray()
  }
  doc.addNode(totalGroup)
  
  //创建地面
  let floor = {
    type: 'object',
    name: 'floor',
    build_description: {
      type: 'LoopBack',
      data: {
        type: 'floor',
        width: 500,
        height: 500,
        color: 0xffffff
      }
    }
  }
  doc.addNode(floor)
  
  
  doc.callAfterComplete(doc => {
    doc.viewDocument.fitScene() //调整初始化视图摄像头与对象的距离
    doc.viewDocument.setViewPoint('LeftTopFront') //调整初始摄像头视角
    doc.viewDocument.setCameraControls({type:'orbit'}) //配置摄像头控件
})  

导出3D对象准备烘培

在blender中进行烘培

上传烘培结果TuoTexture资源

应用TuoTexture资源

....
  
  doc.callAfterComplete(doc => {
    doc.viewDocument.fitScene() //调整初始化视图摄像头与对象的距离
    doc.viewDocument.setViewPoint('LeftTopFront') //调整初始摄像头视角
    doc.viewDocument.setCameraControls({type:'orbit'}) //配置摄像头控件
    doc.viewDocument.loadTuoTexture('https://res.tuocad.com/uploads/5fd0d409750cff000ce05251/desk.bin')  //装载TuoTexture资源
})  

应用环境纹理

...
  
  
  doc.callAfterComplete(doc => {
    doc.viewDocument.fitScene() //调整初始化视图摄像头与对象的距离
    doc.viewDocument.setViewPoint('LeftTopFront') //调整初始摄像头视角
    doc.viewDocument.setCameraControls({type:'orbit'}) //配置摄像头控件
    doc.viewDocument.loadTuoTexture('https://res.tuocad.com/uploads/5fd0d409750cff000ce05251/desk.bin')  //装载TuoTexture资源
    doc.viewDocument.loadSkyBox('https://res.tuocad.com/uploads/aaf76ccb-5373-4656-89c3-8dbb35f8e7ab/',  //装载环境资源
    ['px.jpeg', 'nx.jpeg', 'py.jpeg', 'ny.jpeg', 'pz.jpeg', 'nz.jpeg'])
  })
})  

概述

tuo-fair-frontend是tuo-fair项目的3D建模与资源管理客户端。tuo-fair-frontend项目的定位是创建资源和管理资源。在tuo-fair系统中定义了两类资源,一种是文档资源,一种是材料资源。tuo-fair-frontend项目的初衷是向本公司的工作人员提供上传和管理材料资源的接口,并且为工作人员提供创建,编辑和管理文档资源工具。