使用miniocc.js步骤

1.添加库依赖

• 使用如下命令引入miniocc库

  npm install --save miniocc

2.使用例子，创建一个立方体

搭建一个vue的项目（具体步骤自行百度），在App.vue中写下如下代码 :

import { InitializeScene } from './initialize_scene'
import { onMounted } from 'vue'
import * as THREE from 'three';
import { getProducer } from 'miniocc'  // 获得miniocc抽象工厂实例

export default {
  name: 'App',
  setup() {
    onMounted(()=>{
        const scene = InitializeScene();
        getProducer(true).then((producer) => {
          // 获取Geometry构造器
          let geometryBuilder = producer.getGeometryBuilder();
          // 获取Shape构造器
          let shapeBuilder = producer.getShapeBuilder();
          // 获取Mesh数据构造器
          let meshBuilder = producer.getMeshBuilder();
          // 获取Box左上和右下的两个坐标点
          let p1 = geometryBuilder.buildPoint3D(0,0,0);
          let p2 = geometryBuilder.buildPoint3D(10,10,10);
          // 构建Box
          let box = shapeBuilder.buildBox(p1,p2);
          // 释放资源
          p1.dispose();
          p2.dispose();
          // 构造Three.js所需的Mesh顶点数据
          let vertices = metaDataBuilder.toMesh(box);
          const geometry = new THREE.BufferGeometry();
          geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
          let material = new THREE.MeshBasicMaterial({
                color: new THREE.Color("pink")
          });
          let object = new THREE.Mesh(geometry,material);
          scene.add(object);
          // 释放资源
          box.dispose();
        }).catch(error => {
          console.log(error);
        });
    });
  },
}

initialize_scene.js中的代码如下：

import {AmbientLight,DirectionalLight,PerspectiveCamera,Scene,WebGLRenderer} from'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const InitializeScene = ()=> {
    let scene = new Scene();
    let camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    let renderer = new WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild( renderer.domElement );
    const light = new AmbientLight(0x404040);
    scene.add(light);
    const directionalLight = new DirectionalLight(0xffffff, 0.5);
    directionalLight.position.set(0.5, 0.5, 0.5);
    scene.add(directionalLight);
    camera.position.set(0, 50, 100);
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.screenSpacePanning = true;
    controls.target.set(0, 50, 0);
    controls.update();
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
    return scene;
}
export { InitializeScene }

构建的立方体如下所示：

Release V1.0.4

• 新增函数

  // 获取形体构造器
  getShapeBuilder():ShapeBuilder;
  // 获取拓扑构造器
  getTopographyBuilder():TopographyBuilder;
  // 获取几何体构造器
  getGeometryBuilder():GeometryBuilder;
  // 获取Mesh构造器
  getMeshBuilder():MetaDataBuilder;

Release V1.0.10

• 新增列表
• MathUtils类
• 角度转弧度函数

static angleToRadian(angle:number):number;

• 弧度转角度函数

static radianToAngle(radian:number):number;

• Quaternion类
• 资源释放函数

dispose():void;

• 修改列表
• Face类
• 沿管道生成形体函数

pipe(curve:Curve):Shape;

• Wire类
• 沿管道生成形体函数

pipe(curve:Curve):Shape;

• Shape类
• 平移函数

translate(vector:Vector3D):this;

• 缩放函数

scale(point:Point3D,scaling:number):this;

• 旋转函数1

rotateAlongAxis(axis:Axis,angle:number):this;

• 旋转函数2

rotate(quaternion:Quaternion):this;

• GeometryBuilder类
• 生成四元角函数

buildQuaternion(x:number,y:number,z:number,w:number):Quaternion;

• 其它
• 提供两个开发版本和生产版本的miniocc，通过在getProducer函数调用中传入true or false 来做控制。 原函数：

getProducer():Promise<BuilderProducer>;

修改后：

getProducer(debug:boolean = false):Promise<BuidlerProducer>;