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!