Rotate view with mouse in Published from Three.js editor

Questions
,
1

Hello
I’m new here.
I am struggling with 3d object rotating way which published three.js editor.
Tried search every way but increased confusing.
My process is simple.

  1. import glb file in Three.js editor.
  2. add lighting, material.
  3. publish in html to view rotating with mouse.
    that’s it all.
    But can’t find to success this simple process. I tried import orbitcontrol.js and modify app.js etc…but never working.

Please point me what i miss and what should i do?
Thanks

2

Not 100% sure what you mean - is OrbitControls example what you’re looking for? :thinking: (code’s in the bottom right, you have to create new OrbitControls(camera, renderer.domElement), like here, otherwise it won’t work)

3

Basically it’s same as your sample. but my process is from “three.js editor” made result. Did you made sample with three.js editor? searching for this, and someone told that Orbitcontrol is no available and use another way. follow is my html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
		<meta charset="utf-8">
		<meta name="generator" content="Three.js Editor">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: sans-serif;
				font-size: 11px;
				background-color: #000;
				margin: 0px;
			}
			canvas {
				display: block;
			}
		</style>
	</head>
	<body ontouchstart="">
		<script type="module">

			import * as THREE from './js/three.module.js';
			import { APP } from './js/app.js';
			import { VRButton } from './js/VRButton.js';

			window.THREE = THREE; // Used by APP Scripts.
			window.VRButton = VRButton; // Used by APP Scripts.

			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 );

				} );

			} );



		</script>
	</body>
</html>
4

Anyone have success orbit camera or object published from three.js editor?

5

It is not clear what you like to do. You need something like the orbitcontrol to rotate the view.

6

Hi
My goal is simple

  1. import 3d file to three.js editor.
  2. add material, lighting.
  3. publish for web and want to rotate object on web.

that’s all.

Tried orbitcontrol.js, app.js index.html modification way but no luck.
I just wonder anyone who use three.js editor workflow success orbit object.
please let me know what should i more clearly.

7

I dont understand what you mean with three.js “editor” workflow.

You need to import orbitcontrol the same way you import three (you need the orbitcontrol.js in the same place as three-module.js) and than you need to use it like @mjurczyk told you in the post above.

Post you code how you tried orbitcontrol bevor.

1 Like
8

Add line 56 from this codepen for example. Feel free to copy-paste it 1:1, into app.js, in any place that already has camera and renderer defined. That’s kinda literally all you need.

9

Thanks reply I mean editor in three.js site. three.js editor
importing looks not work with this workflow at this time.
thanks again for try help

10

Thanks for reply and try help.I tried but it looks something i miss.
thanks again

11

I still dont get it. The editor is no “workflow”. It is just an example and a tool to test your 3d-files.

What is your " workflow" using this site?

12

There you go:
published.zip (242.7 KB)

(TBH, if you think publishing from editor will save you some time versus just writing the code, you’re wrong - they dont really maintain this workflow for many years - as is evident by the person above having no idea about it :sweat_smile:)

13

I means just working way. thanks

14

Thanks. your file works now. and appreciates advice. i think traditional way should be my workflow because looks get advice for another huddle. Thanks again!