Orbit 3D object via three js editor

Questions
1

Hi, guys. I’m designer not so familiar with code in order to solve this problem. I would like be able to make a complete setup a scene within editor and export it as package ready to be integrated on site, but unfortunately I’m not enough experienced to make it via three js editor. I saw a bunch of tutorials with java script programming, avoiding editor and importing OrbitControls, FlyControl but it’s very time consuming and tricky to setup scene purely via code and then import these controls. Probably someone knows how to achieve this effect directly in editor? In order to have this “user-friendly” flexibility to setup scene, lights, materials and camera and just add this functionality for orbiting onMouse move events?

2

You can setup a comparable scene in the editor however changing the camera’s orientation according to the mouse position can not be configured. Meaning you have to write code for this.

If you are not familiar with coding at all, developing this relatively simple code will be a challenge. However, a developer with basic three.js skills should be capable to implement the above scene. Especially since a lot of code can be reused from the official examples. E.g. the interaction in the following demo is similar to the one demonstrated in your video: https://threejs.org/examples/webgl_materials_normalmap

3

thank you. I will try:)

4

I looked better at example which you suggested. Something works, but exactly that behavior I didn’t get:(

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshNormalMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

//mouse
var mouseX = 0;
var mouseY = 0;
var targetX = 0;
var targetY = 0;

function init() {
  
document.addEventListener( 'mousemove', onDocumentMouseMove, false );

}

function onDocumentMouseMove( event ) {

				mouseX = ( event.clientX - windowHalfX );
				mouseY = ( event.clientY - windowHalfY );

			}

function animate() {
requestAnimationFrame( animate );
//cube.rotation.x += 0.01;
//cube.rotation.y += 0.01;
renderer.render(scene, camera);


}
animate();
rotateCube();

function rotateCube() {

				targetX = mouseX * .001;
				targetY = mouseY * .001;

				if ( cube ) {

					cube.rotation.y += 0.05 * ( targetX - cube.rotation.y );
					cube.rotation.x += 0.05 * ( targetY - cube.rotation.x );

				}
	}