JSFiddle - React, Tailwind, and code Playground
HTML
<div id="info">
"W" translate | "E" rotate | "R" scale | "+/-" adjust size<br />
</div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body{
overflow: hidden;
margin: 0;
}
JavaScript
// TransformControl.js my scale func on line 296
const {
BoxGeometry,
BufferGeometry,
TorusGeometry,
SphereGeometry,
Color,
CylinderGeometry,
DoubleSide,
Euler,
Float32BufferAttribute,
Line,
LineBasicMaterial,
Matrix4,
Mesh,
MeshBasicMaterial,
Object3D,
OctahedronGeometry,
PlaneGeometry,
Quaternion,
Raycaster,
Vector3,
} = THREE;
const _raycaster = new Raycaster();
const _tempVector = new Vector3();
const _tempVector2 = new Vector3();
const _tempQuaternion = new Quaternion();
const _unit = {
X: new Vector3(1, 0, 0),
Y: new Vector3(0, 1, 0),
Z: new Vector3(0, 0, 1),
};
const _changeEvent = { type: "change" };
const _mouseDownEvent = { type: "mouseDown" };
const _mouseUpEvent = { type: "mouseUp", mode: null };
const _objectChangeEvent = { type: "objectChange" };
class TransformControls extends Object3D {
constructor(camera, domElement) {
super();
if (domElement === undefined) {
console.warn(
'THREE.TransformControls: The second parameter "domElement" is now mandatory.'
);
domElement = document;
}
this.visible = false;
this.domElement = domElement;
this.domElement.style.touchAction = "none"; // disable touch scroll
const _gizmo = new TransformControlsGizmo();
this._gizmo = _gizmo;
this.add(_gizmo);
const _plane = new TransformControlsPlane();
this._plane = _plane;
this.add(_plane);
const scope = this;
// Defined getter, setter and store for a property
function defineProperty(propName, defaultValue) {
let propValue = defaultValue;
Object.defineProperty(scope, propName, {
...