How to add camera controls to an app created with the editor?

Questions
1

Hi, I am using the following app.json code for my app.

var loader = new THREE.FileLoader();
loader.load( 'app.json', function ( text ) {
	var player = new APP.Player();
	player.load( JSON.parse( text ) );
	player.setSize( window.innerWidth, window.innerHeight );
	player.play();
	document.body.appendChild( player.dom );
	window.addEventListener( 'resize', function () {
	player.setSize( window.innerWidth, window.innerHeight );	
	} );
} );

This was generated by Three.js after I exported my model to GLTF.
How do I get to Zoom, Pan, Tilt my model in the browser. I have been looking and reading everything and nowhere have I found a way.
Can you point me in the right direction?

2

Go to your exported files and include OrbitControls into index.html. For example:

<script src="js/three.min.js"></script>
<script src="js/app.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Open app.js and add the following line under: this.setCamera( loader.parse( json.camera ) );.

var controls = new THREE.OrbitControls( camera, renderer.domElement );

I don’t know if there is a way to apply OrbitControls directly in the editor. In general it would be better if users don’t need to modify the exported source files.

3

Maybe useful:

4

Hi Murgen87, the first option did not work for me. Then I followed the 2nd option:

How do you add controls from inside the three.js editor

Now I can manipulate my model, Thank you for your time.

Regards,
Adonis Richards

5

Hi @Mugen87,

I am not a veteran in coding.

How can I create a walkthrough for my model?

I searched the web and I found the following:

https://threejs.org/examples/?q=spline#webgl_geometry_extrude_splines

This is exactly what I want for my walkthrough, that the animated camera journeys through my model.

Do you know of a explanation or course where I can gather knowledge in creating a spline, attaching a camera to it and create my walkthrough?

Following is a link to my model.

http://sonidarecording.com/3d_webjl/07.01-load-json-model.html

I did some research on the web, YouTube and concluded that I should study some WEBGL.

But now I am halfway through the book: WEBGL for beginners, I have not found what I am looking for.

I have shared the question on stackoverflow:

https://stackoverflow.com/questions/52184601/how-can-i-add-three-pathcontrols-to-existing-project-model-that-uses-app-json

without success.

Can you point me in the right direction?

Kind regards,

Adonis Richards

6

Unfortunately not. I think it’s best when you study the examples and the related code in the library.

You basically define a path with a curve or a sequence of curves. Then you sample this path in order to get new position values for your camera. By using camera.lookAt() you can ensure that the camera always looks to the model.

Simple demo: Edit fiddle - JSFiddle - Code Playground