# Rotate view with mouse in Published from Three.js editor

**URL:** <https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590>\
**Category:** Questions\
**Tags:** rotation, orbit-controls\
**Created:** [August 3, 2023, 7:29am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590 "2023-08-03T07:29:43Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![macreal](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@macreal](https://discourse.threejs.org/u/macreal)\
**Post date:** [August 3, 2023, 7:29am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/1 "2023-08-03T07:29:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 3, 2023, 6:25pm UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/2 "2023-08-03T18:25:13Z")

</div>

Not 100% sure what you mean - is [OrbitControls](https://threejs.org/examples/?q=Orbit#misc_controls_orbit) example what you’re looking for? 🤔 (code’s in the bottom right, you have to create `new OrbitControls(camera, renderer.domElement)`, like [here](https://github.com/mrdoob/three.js/blob/b447ff2911cbefcd650df5a18a905e7df882fc78/examples/misc_controls_orbit.html#L66), otherwise it won’t work)

---

<div class="post-metadata">

**Author:** ![macreal](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@macreal](https://discourse.threejs.org/u/macreal)\
**Post date:** [August 4, 2023, 2:52am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/3 "2023-08-04T02:52:04Z")

</div>

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.

```javascript
<!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>

```

---

<div class="post-metadata">

**Author:** ![macreal](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@macreal](https://discourse.threejs.org/u/macreal)\
**Post date:** [August 5, 2023, 8:29am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/4 "2023-08-05T08:29:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fleixi](https://avatars.discourse-cdn.com/v4/letter/f/3da27b/32.png) [@fleixi](https://discourse.threejs.org/u/fleixi)\
**Post date:** [August 5, 2023, 8:48am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/5 "2023-08-05T08:48:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![macreal](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@macreal](https://discourse.threejs.org/u/macreal)\
**Post date:** [August 5, 2023, 9:00am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/6 "2023-08-05T09:00:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fleixi](https://avatars.discourse-cdn.com/v4/letter/f/3da27b/32.png) [@fleixi](https://discourse.threejs.org/u/fleixi)\
**Post date:** [August 5, 2023, 9:33am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/7 "2023-08-05T09:33:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 5, 2023, 9:52am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/8 "2023-08-05T09:52:59Z")

</div>

Add [line 56 from this codepen for example](https://codepen.io/mjurczyk/pen/jOQaqpQ). 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.

---

<div class="post-metadata">

**Author:** ![macreal](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@macreal](https://discourse.threejs.org/u/macreal)\
**Post date:** [August 6, 2023, 6:41am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/9 "2023-08-06T06:41:14Z")

</div>

Thanks reply I mean editor in three.js site. [three.js editor](https://threejs.org/editor/)  
importing looks not work with this workflow at this time.  
thanks again for try help

---

<div class="post-metadata">

**Author:** ![macreal](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@macreal](https://discourse.threejs.org/u/macreal)\
**Post date:** [August 6, 2023, 6:42am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/10 "2023-08-06T06:42:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fleixi](https://avatars.discourse-cdn.com/v4/letter/f/3da27b/32.png) [@fleixi](https://discourse.threejs.org/u/fleixi)\
**Post date:** [August 6, 2023, 7:39am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/11 "2023-08-06T07:39:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [August 6, 2023, 8:36am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/12 "2023-08-06T08:36:12Z")

</div>

There you go:  
[published.zip](https://discourse.threejs.org/uploads/short-url/r1en1Ul7pdmsqzW3hFhHhwxgToP.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 😅)

---

<div class="post-metadata">

**Author:** ![macreal](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@macreal](https://discourse.threejs.org/u/macreal)\
**Post date:** [August 6, 2023, 10:58am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/13 "2023-08-06T10:58:01Z")

</div>

I means just working way. thanks

---

<div class="post-metadata">

**Author:** ![macreal](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@macreal](https://discourse.threejs.org/u/macreal)\
**Post date:** [August 6, 2023, 11:00am UTC](https://discourse.threejs.org/t/rotate-view-with-mouse-in-published-from-three-js-editor/54590/14 "2023-08-06T11:00:03Z")

</div>

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!