JSFiddle - React, Tailwind, and code Playground
JavaScript
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
//
var TransformControls = function ( camera, domElement ) {
if ( domElement === undefined ) {
console.warn( 'THREE.TransformControls: The second parameter "domElement" is now mandatory.' );
domElement = document;
}
THREE.Object3D.call( this );
this.visible = false;
this.domElement = domElement;
var _gizmo = new TransformControlsGizmo();
this.add( _gizmo );
var _plane = new TransformControlsPlane();
this.add( _plane );
var scope = this;
// Define properties with getters/setter
// Setting the defined property will automatically trigger change event
// Defined properties are passed down to gizmo and plane
defineProperty( 'camera', camera );
defineProperty( 'object', undefined );
defineProperty( 'enabled', true );
defineProperty( 'axis', null );
defineProperty( 'mode', 'translate' );
defineProperty( 'translationSnap', null );
defineProperty( 'rotationSnap', null );
defineProperty( 'scaleSnap', null );
defineProperty( 'space', 'world' );
defineProperty( 'size', 1 );
defineProperty( 'dragging', false );
defineProperty( 'showX', true );
defineProperty( 'showY', true );
defineProperty( 'showZ', true );
var changeEvent = { type: 'change' };
var mouseDownEvent = { type: 'mouseDown' };
var mouseUpEvent = { type: 'mouseUp', mode: scope.mode };
var objectChangeEvent = { type: 'objectChange' };
// Reusable utility variables
var raycaster = new THREE.Raycaster();
function intersectObjectWithRay( object, raycaster, includeInvisible ) {
var allIntersections = raycaster.intersectObject( object, true );
for ( var i = 0; i < allIntersections.length; i ++ ) {
if ( allIntersections[ i ].object.visible || includeInvisible ) {
return allIntersections[ i ];
}
}
return false;
}
var _tempVector = new...