@2shapes/editcontrol 中文文档教程

Question

BabylonJS-EditControl

用于 BabylonJS（3D HTML Webgl 框架）应用程序的编辑控件。

About

所有 3d 编辑器都提供一个小部件，也称为变换控件，用于在编辑器中平移、旋转或缩放 3d 对象。
这个 EditControl 类似于那些小部件。
您可以将其嵌入您的 Babylonjs 应用程序以提供相同的功能。
它目前支持

• Translate
• Translate Snap
• Rotate
• Rotate Snap
• Scale
• Scale Snap
• Local or Global Translation and Rotation. (Scaling only in local axis)
• Create multiple instances in the same scene with each instance attached to a different mesh
• Scale size of control
• undo, redo

有关已知问题、缺点和计划改进的列表，请参阅 https://github.com/ ssatguru/BabylonJS-EditControl/issues

Quick start

1) 添加以下依赖项

<script src="https://code.jquery.com/pep/0.4.2/pep.js"></script>
<!-- add "earcut.min.js" as show below if using babylonjs 3.2 and above -->
<script src="https://cdn.babylonjs.com/earcut.min.js"></script>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="EditControl.js"></script>

INSTALL

您可以从 npm 安装它

npm install @2shapes/editcontrol

请注意，即使它在 npm 中可用，它也没有打包为节点模块或任何其他类型的模块。
现在，为了保持简单并避免依赖模块系统，该应用程序被打包为一个简单的 javascript“命名空间”应用程序。
换句话说，使用“script”标签加载它并使用全局名称“org.ssatguru.babylonjs.component.EditControl”引用它。 不同的模块系统提供了处理非模块的方法。 以下是如何使用 web pack 中的编辑控件。

webpack

因为 EditControl 不是模块，所以它不导出/导入任何内容。
webpack 提供了“exports-loader”和“imports-loader”来为这些应用添加导出和导入。
这就是你在 webpack 中使用它的方式，当然

var EditControl=require("exports-loader?org.ssatguru.babylonjs.component.EditControl!imports-loader?BABYLON=babylonjs!babylonjs-editcontrol/dist/EditControl");

，你必须 npm install 以下
出口装载机
进口装载机
巴比伦
babylonjs-editcontrol

API

To Instantiate

// TypeScript
const EditControl = require('exports-loader?org.ssatguru.babylonjs.component.EditControl!imports-loader?BABYLON=babylonjs!babylonjs-editcontrol/dist/EditControl');
let editControl:any = new EditControl(mesh,camera, canvas, 0.75, true,0.02);

这将编辑控件定位在网格枢轴位置并显示 x、y、z 轴。
需要五个参数

• mesh - the mesh to control using the editcontrol
• camera - active camera
• canvas - the mesh canvas
• scale - number. Optional. Default 1. Determines how small or large the editcontrol should appear.
• eulerian - true/false. Optional. Default false. True indicates that rotation of the mesh is in euler.If rotation is unresponsive then it is possible that the rotation may not have been initialized to either a eulerian or quaternion value.
• pickWidth - number. Optional. Default 0.02. Determines how close to an axis should the pointer get before we can pick it

What to do when doing scene.pick()

因为控件的网格实际上是可拾取的，所以您应该这样做以避免

editControl.makePickable(false);
const pickResult = this.scene.pick(x,y);
editControl.makePickable(true);

格

Get all the axis' end Meshes

editControl.getAxisEndMeshes();

拾取

Get all the axis' plane Meshes

editControl.getAxisPlaneMeshes();

Add click listener

editControl.addClickListener(($event) => void);

Add double click listener

editControl.addDoubleClickListener(({action: number, name: string}) => void);

To set the axis scale manually

editControl.setCustomAxisScale(num: number); // this will ignore the axis scale that editcontrol controls

To set a custom boundingBox length

网 对于更大的对象是虚拟的，editcontrol 不会检测到它。
可以提供自定义的 boundingBox 长度。

editControl.setCustomBoundingDimension(dimension: Vector3);
// original custom dimension is: bounding.minimum - bounding.maximum
editControl.unsetCusotmBoundingDimension();

To unset the axis scale manually

editControl.unsetCustomAxisScale();

To show Translation, Rotation or Scaling controls

editControl.enableTranslation();

editControl.enableRotation();
editControl.setRotGuideFull(true/false) //This makes the rotation guides 360 degree(true) or 90 degree(false) .90 degree  looks less cluttered.
editControl.returnEuler(true); // Optional. This will return rotation in euler instead of quaternion. Quaternion is the default.

editControl.enableScaling();

To hide Translation, Rotation or Scaling controls (just displays x,y,z axis)

editControl.disableTranslation();
editControl.disableRotation();
editControl.disableScaling();

To check if Translation, Rotation or Scaling is enabled

editControl.isTranslationEnabled();
editControl.isRotationEnabled();
editControl.isScalingEnabled();

To turn on/off local/ global mode

editControl.setLocal(boolean true/false);

To check if local/ global mode

editControl.isLocal();

To turn on/off translation, rotation or scale snapping

editControl.setTransSnap(boolean true/false);
editControl.setRotSnap(boolean true/false);
editControl.setScaleSnap(boolean true/false);

To set translation, rotation or scale snap values

editControl.setTransSnapValue(number n in meters);
editControl.setRotSnapValue(number n in radians);
editControl.setScaleSnapValue(number n a factor by which scale should increase);

To bound translation, rotation or scaling

这限制了最小值和最大值之间的平移、旋转、缩放

setTransBounds(min?: Vector3,max?: Vector3) ;
setRotBounds(min?: Vector3,max?: Vector3);
setScaleBounds(min?: Vector3,max?: Vector3);

removeTransBounds();
removeRotBounds();
removeScaleBounds();

注意：旋转边界尚未实现。 这是在 TODO 列表中。

To undo or redo

editControl.undo();
editControl.redo();

To set undo count

默认情况下，最多 10 次撤消

editControl.setUndoCount(number count);

To check if user editing (moving,translating or scaling object)

editControl.isEditing();

如果正在编辑过程中使用则

To check if the pointer is over the edit control

editControl.isPointeOver();

返回 true 如果指针位于编辑控件上则返回 true

To be called back whenever the user starts, takes or ends an action

editControl.addActionStartListener(function(number actionType));
editControl.addActionListener(function(number actionType));
editControl.addActionEndListener(function(number actionType));

这些中的每一个都将一个函数作为参数。
当用户开始平移、旋转或缩放网格时，将调用 ActionStartListener
当用户平移、旋转或缩放网格时，将调用 ActionListener
当用户结束平移、旋转或缩放网格

时将调用 ActionEndListener 调用时，这些侦听器将传递一个数字，该数字指示用户正在采取的操作。
此数字将具有以下值之一
0 - ActionType.TRANS，翻译
1 - ActioneType.ROT，旋转
2 - ActioneType.SCALE, Scaling

要删除监听

editControl.removeActionStartListener();
editControl.removeActionListener();
editControl.removeActionEndListener();
editControl.removeAllActionListeners() // to remove all;

To refresh mesh Bounding Info.

器， EditControl 使用网格边界信息为小型和大型网格提供相同的平滑缩放体验。 烘焙网格时，边界信息会发生变化。 如果您烘焙了网格的变换，请使用此方法刷新边界信息。

editControl.refreshBoundingInfo();

To get position and rotaion of EditControl

editControl.getPosition();//returns Vector3
editControl.getRotationQuaternion(): //returns rotation in quaternion

EditControl 的位置和旋转将与其附加到的网格相同

To show/hide EditControl

editControl.hide();
editControl.isHidden(); //turns true or false
editControl.show();

To set visibililty (transparency)

editControl.setVisibility(v:number);

。默认情况下，可见性设置为 0.75

To switch edit control to another mesh

editControl.switchTo(Mesh mesh, optional boolean isEuler );

这将快速从一个网格移除控制并将其附加到另一个网格。

保持平移、旋转、缩放模式。

mesh : 控件应该切换到的网格
isEuler : true/false, optional, default false, true表示mesh的旋转是欧拉的

To detach from the mesh and clean up resources.

editControl.detach();

Build

如果还没有安装，安装node js和typescript。
切换到项目文件夹。
运行“npm install”一次，以安装所有依赖项（目前，这些依赖项是 babylonjs 和 uglify）。
随时建造
运行“npm run compile”——这将编译 typescript 文件并将 javascript 文件存储在“dist”文件夹中。
运行“npm run min”——这将缩小 javascript 文件并将缩小版本存储在“dist”文件夹中。
运行“npm run build”——这将编译和缩小。 使用“test.html”来测试您的更改。

Note:

原始版本是用 Java 编写的，然后使用 JSweet 转译为 TypeScript/JavaScript。
它最初是用 Java 编写的，因为当时我对 TypeScript 语言及其生态系统不是很满意。
随着时间的推移，我对它越来越适应了。
因此，新版本是用 TypeScript 编写的。
它基于 JSweet 生成的初始 TypeScript 代码。
移植到 TypeScript 很容易，因为 JSweet 生成了良好的人类可读 TypeScript，允许人们随时切换到 TypeScript。
对于那些感兴趣的人，旧的 java 版本仍然可以在 https://github.com/ssatguru/BabylonJS-EditControl.java< /a>