分类：tuo-fair-frontend使用手册

使用示例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项目的初衷是向本公司的工作人员提供上传和管理材料资源的接口，并且为工作人员提供创建，编辑和管理文档资源工具。