three.pivot.js 3D模型旋转轴心设置工具

PCA

1. 产品简介（three.pivot.js）

基于three.js设置3D模型旋转轴心工具库，类似于Babylon.js中的Pivots功能。在three.js中，模型的旋转始终是围绕自己的原点进行旋转的，使用该工具可以重新设置模型的旋转轴心，辅助3D开发快速实现特殊的旋转需求。

2. 使用说明

2.1. 使用环境要求

three 120 版本及以上

2.2 安装

esm方式

import ThreePiovt from './three.pivot.js';

umd方式

<script type="module" src="/three.pivot.js"></script>

2.3 使用

import ThreePivot from './three.pivot.js';

// set mesh pivot
ThreePivot.setPivotPoint(mesh, new THREE.Vector(-0.5,-0.5,-0.5));

2.4 API说明

设置模型旋转轴心（静态方法）

setPivotPoint(mesh: THREE.Object3D, pivotPoint: THREE.Vector)

参数

mesh: THREE.Object3D

目标3d对象

pivotPoint: THREE.Vector

旋转轴心

3. demo

代码示例

import * as THREE from 'three'
import ThreePiovt from './three.pivot.js';

.... 省略 render 代码

 /**
   创建旋转立方体 cubeRota， 并且应用 three.pivot对立方体设置旋转轴心
  **/
  createBox() {
      // 创建参考立方体 位于原点位置
      const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
    const cube = new THREE.Mesh(geometry, material);
    this.scene.add(cube)
    
    // 创建旋转立方体 
    const geometryRota = geometry.clone();
    const cubeMeaterial = new THREE.MeshStandardMaterial({color: 0xff0000})
    const cubeRota = new THREE.Mesh(geometryRota, cubeMeaterial);
    cubeRota.name = 'cubeRota'
    this.cubeRota = cubeRota;
    this.scene.add(cubeRota);
    
    // 设置旋转轴心
    const pivotPosition = new THREE.Vector3(-0.5,-0.5,-0.5);
    ThreePivot.setPivotPoint(cubeRota,pivotPosition);
  }


 /** 
     在animate函数中动态的调整立方体沿y轴的旋转角度
 **/
 animate() {
     
     this.angle += Math.PI / 180;
     this.cubeRota.rotation.y = this.angle
     
    requestAnimationFrame(this.animate);
    if (this.stats) this.stats.update();
    if (this.controls) this.controls.update();
    this.renderer.render(this.scene, this.camera);
  }

运行效果, 左侧为未设置旋转轴心，绕原点进行旋转，右侧为设置旋转轴心为（-0.5，-0,5， -0.5）绕y轴旋转效果。

PCA PCA

4. 证书与授权

This software is provided by 中交简石数字科技(苏州)有限公司 (hereinafter referred to as "Licensor") under the following terms and conditions:

Grant of License: Licensor hereby grants to you a non-exclusive, non-transferable license to use this software on one computer for your own personal or internal business purposes.
Use Restrictions: You may not copy, modify, reverse engineer, decompile, disassemble, or otherwise attempt to discover the source code of this software. You may not sublicense, assign, rent, loan, sell, or transfer any rights in or to this software except with the express written consent of Licensor.
No Export: You may not export this software to any country or region without the prior written permission of Licensor.
Term and Termination: This license will remain in effect until terminated. You may terminate it at any time by destroying all copies of this software. It will also automatically terminate if you fail to comply with any term or condition of this agreement. Upon termination, you must destroy all copies of this software.
Limited Warranty: Licensor warrants that the software will perform in substantial accordance with its accompanying documentation for a period of ninety (90) days from the date of delivery. If the software does not perform substantially in accordance with such documentation, Licensor will, at its option, either replace the software or refund the license fee paid by you.

three.pivot.js 3D模型旋转轴心设置工具 - NSDT