@xuelangyun/3d-viewer

API

@xuelangyun/3d-viewer

viewer初始化

const viewer = new viewer();

API

参数		说明	用法
Connect		连接成功，服务端传来Connected的消息	viewer.Connect("ws://127.0.0.1:8081/",()=>{ //连接成功，服务端传来Connected的消息 });
Open		传入3D模型文件	viewer.Open("D:/demo.qm",1024,720,() => { //文件已打开 }, (url) => { //服务端发来拉流地址 let jsmpeg = new JSMpeg.Player(url, { canvas: canvas //需要绘制的画布 }); });

Mouse / 鼠标操作

/**
  * @param {number} x - X坐标
  * @param {number} y - Y坐标
  * @param {MouseButtons} mouseButton - 鼠标按钮
  * @param {number} delta - 鼠标滚轮偏移值
*/
export declare enum MouseButtons {
  /**
    * 鼠标左键
  */
  Left = 0,
  /**
    * 鼠标右键
  */
  Right = 1,
  /**
  * 鼠标中键
  */
  Middle = 2
}

参数		说明	用法
Mouse.Down		鼠标按下	viewer.Mouse.Down(x,y,MouseButtons.Left)
Mouse.Move		鼠标移动	viewer.Mouse.Move(x,y,MouseButtons.Left)
Mouse.Up		鼠标弹起	viewer.Mouse.Up(x,y,MouseButtons.Left)
Mouse.Wheel		鼠标弹起	viewer.Mouse.Wheel(x,y,delta)

Assembly / 获取装配树

viewer.Assembly.Get((root:IAssemblyNode) => {
    //root：根节点
    console.log(root)
});

View / 获取视图

viewer.View.Get((data:{
        Views: string[];
        Size: string;
    }) => {
    //data:视图数据
    console.log(data)
});

viewer.View.Activate("前视图")

ActivedView / 激活视图

//设置缩放乘系数
Viewer.ActivedView.SetScaleRatio(1.1)
//设置缩放系数
Viewer.ActivedView.SetScale(10)
//获取缩放系数
Viewer.ActivedView.GetScale((data)=>{
    console.log(`当前缩放值为${data.Value}`)
})
//全局居中
Viewer.ActivedView.FitAll(0.1)
//居中指定对象
Viewer.ActivedView.FitCenter(["0-0-1"],0.1)

Exploding / 爆炸图

//开启三轴爆炸
Viewer.Exploding.SwicthAxis([true,true,true])
//设置爆炸进度
Viewer.Exploding.Value(0.6)

Selection / 选择

参数		说明
ISelectionMode		export enum ISelectionMode { /** * 顶点 */ Vertex = "Vertex", /** * 边界 */ Edge = "Edge", /** * 面 */ Face = "Face", /** * 形状 */ Shape = "Shape" }

Measure / 测量

const firstIndex = 0; //第一个点的索引
const secondIndex = 1; //第二个点的索引
Viewer.Measure.PointToPoint(firstIndex,secondIndex,(data)=>{
  console.log(`点与点之间的距离为：${data.Value}`)
})
//恢复选择模式为Shape
Viewer.Selection.SetMode(ISelectionMode.Shape);

ClipPlane / 剖切视图

//显示剖切视图
Viewer.ClipPlane.Show();
//隐藏剖切试图
Viewer.ClipPlane.Hide();

📦 Install

npm install @xuelangyun/3d-viewer

🔨 Usage

import React, { useEffect, useRef, useState } from 'react';
import { INode, Viewer, ISelectionMode, IAssemblyNode } from '@xuelangyun/3d-viewer';

const App: React.FC = () => {
  const viewer = new Viewer();
  const width = 1024;
  const height = 720;
  viewer.Connect("ws://127.0.0.1:8081/",()=>{
      //连接成功，服务端传来Connected的消息
    });
  viewer.Open("D:/demo.qm",width,height,() => {
      //文件已打开
    }, (url) => {
      //服务端发来拉流地址
    let jsmpeg = new JSMpeg.Player(url, {
        canvas: canvas //需要绘制的画布
    });
  });
}