Hide Transform Controls at Center in Three.js

Question

Hide Transform Controls at Center in Three.js

Is there a way to hide the central controls of the three.js transform controls and only display the xyz arrows in the controller? I have highlighted the sections of the controller that I want to hide in the image below.

https://i.sstatic.net/eRz80.png

In my search, I came across the documentation mentioning that you can hide the axis individually like this. :

control.showX = false
control.showY = false
control.showZ = false

However, using this code hides the entire axis, whereas I specifically just want to remove the central part of the controls while keeping the axis arrows visible. Despite my efforts on Google, I haven't found anyone with a similar requirement.

Does anyone have a solution for hiding the area marked in red?

Thank you!

javascript three.js

Answer 1

Answer №1

If you want to conceal the central controls, use this code snippet:

const widget = control._widget.widget;

 ['XYZ', 'XY', 'YZ', 'XZ'].forEach(axis => {
   const element = widget.translate.getObjectByName(axis);
   element.visible = false;
   element.layers.disable(0);
 });

Answer 2

If you want to conceal the central controls, use this code snippet:

const widget = control._widget.widget;

 ['XYZ', 'XY', 'YZ', 'XZ'].forEach(axis => {
   const element = widget.translate.getObjectByName(axis);
   element.visible = false;
   element.layers.disable(0);
 });

Answer 3

Answer №2

The functionality you're looking for may not be part of the tool itself, however, a workaround would be to manually insert the .js file into your application and customize it as needed. For instance, the XY, YZ, XZ controls can be found on line 886 within the code snippet, allowing you to disable them by commenting out those sections.

Additionally, remember to adjust the import statement at the beginning of the TransformControls file to:

import { ... } from 'three';

Instead of the lengthier version like this:

import { ... } from '../../../build/three.module.js';

Answer 4

The functionality you're looking for may not be part of the tool itself, however, a workaround would be to manually insert the .js file into your application and customize it as needed. For instance, the XY, YZ, XZ controls can be found on line 886 within the code snippet, allowing you to disable them by commenting out those sections.

Additionally, remember to adjust the import statement at the beginning of the TransformControls file to:

import { ... } from 'three';

Instead of the lengthier version like this:

import { ... } from '../../../build/three.module.js';

Hide Transform Controls at Center in Three.js

Answer №1

Answer №2

Similar questions

The save changes feature is not effectively syncing with the database

How can I efficiently update Vue data externally?

Combining various data types within a single field in BigQuery

Issue with the Ajax auto-complete feature in Internet Explorer

Divergence between two distinctive occurrences in Google Analytics

Monitoring the actions that occur when my button is clicked using Firefox and Javascript

output the array utilizing map function results in undefined

What is the Vue.js alternative to using appendChild for dynamically inserting new elements or components?

Guide to setting up CKeditor

Issue with fulfilling Ajax promises

I'm looking to showcase the list in a navigation bar by clicking on the hamburger menu. I want to include the 'home' and 'about' text specifically

An error occurred as the requested resource does not have the necessary 'Access-Control-Allow-Origin' header. The response code received was 403

Ensuring a form is required using ng-validate

Using Webpack 4 to import SCSS files with aliases

Could you provide instructions on how to change mjs files into js format?

Can TrackballControls be used to spin an object around?

What are the benefits of using `observer` over `inject` when passing data to a React component in MobX?

What is the process for generating SDF-Icons (Mapbox's specialized icons) from PNG files?

Using regular JavaScript with code inside ng-view in AngularJS involves incorporating event listeners and manipulations that can interact

Exploring the relationship between React component inheritance and asynchronous requests