How to implement an axis helper/ viewCube 3D with threejs?

KiWiGiW · October 26, 2021, 3:16pm

Hi, I’m trying to implement something clickable thats rotates the scene to the clicked axis. Examples below.

Mugen87 · October 26, 2021, 4:17pm

Have you already tried to reuse the code from the editor? The relevant class is:

mrdoob/three.js/blob/105b07d3f9f30e6e8a4fe0014137c1a236523d46/editor/js/Viewport.ViewHelper.js

import { UIPanel } from './libs/ui.js';

import * as THREE from '../../build/three.module.js';

class ViewHelper extends THREE.Object3D {

	constructor( editorCamera, container ) {

		super();

		this.animating = false;
		this.controls = null;

		const panel = new UIPanel();
		panel.setId( 'viewHelper' );
		panel.setPosition( 'absolute' );
		panel.setRight( '0px' );
		panel.setBottom( '0px' );
		panel.setHeight( '128px' );
		panel.setWidth( '128px' );

This file has been truncated. show original

KiWiGiW · October 27, 2021, 10:23am

Hi @Mugen87, thank you for the reply. Is there any guide to implement this ViewHelper?

Mugen87 · October 27, 2021, 10:29am

No, there isn’t, sorry. You have to study the code and figure out an integration by yourself.

KiWiGiW · October 27, 2021, 10:31am

Ok, thank you for your help @Mugen87 .

Swapnil · October 27, 2021, 6:18pm

I have seen the first image been implemented and I guess it’s copied from the blender. Try this GitHub - Fennec-hub/ThreeOrbitControlsGizmo: Blender like orientation gizmo for Three.js OrbitControls. Here is the live demo for it - Demo - Three Orbit Controls Gizmo
Do let me know if you are able to integrate. It took me around 30 minutes to find this😉.

KiWiGiW · October 28, 2021, 8:31am

This looks interesting, thank you very much @Swapnil !!!

KiWiGiW · October 28, 2021, 2:11pm

Yes it was very easy to integrate, thank you!

a627247084 · May 24, 2022, 6:08pm

When the camera is set to up(0,0,1), how should I set the rotation in the helper

Mugen87 · May 25, 2022, 7:39am

I’m not sure about that. Like some other code in the repository, ViewHelper assume +Y up. The editor itself does not allow to change the default up direction.

a627247084 · May 25, 2022, 11:14am

I think it should be my question, it should be the reason for using Spherical in EditorControls.js, it is Z up by default