CODEWITHSUNDEEP
javascripthtmlthree.js
Kyle Thomas David
Kyle Thomas David

Reputation: 11

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

first, thanks for your help and patience! Demo imageI am fairly new to coding and have been working with the examples available for download from three.js. I am able to create a very basic scene, load my mesh/lights, controls and so on and everything is working great.

However, I have been also trying to publish a scene from the browser editor (https://threejs.org/editor/) and I can't figure out how to add orbiting controls to the camera? After I publish the scene, I get an .html, .json and a couple javascript files app.js + three.min.js. If someone could help me out or point me in the right direction where to place the orbit controls within the app.js file or if there is a tab or something I am missing in the editor? Even where to add the script within the browser editor it would be awesome!

I am a bit stumped because it seems as though the html from the editor in my browser is set up differently from the htmls in the examples I have been working with.

Upvotes: 1

Views: 8380

Answers (5)

subcoder
subcoder

Reputation: 654

THREE is sealed(or extensibility prevented) so original OrbitControls script cannot be added to it. So, use following gist to load OrbitControls in Three.js editor.

https://gist.github.com/expressiveco/030e6bfa4cdfc39735824b8c743d6223#file-orbitcontrols-js

Usage: Load it with following (I used githack.com to use gist as a script.)

function loadOrbitControls()
{
    var orbitcontrols = document.createElement('script');
    var controls = null;
    // Original OrbitControls: "https://threejs.org/examples/js/controls/OrbitControls.js";
    // Modified OrbitControls : https://gist.githubusercontent.com/expressiveco/030e6bfa4cdfc39735824b8c743d6223/raw/dd5df633e4cd3e774f032ee640290db8e22af2d8/OrbitControls.js;
    orbitcontrols.src = "https://gist.githack.com/expressiveco/030e6bfa4cdfc39735824b8c743d6223/raw/dd5df633e4cd3e774f032ee640290db8e22af2d8/OrbitControls.js";
    orbitcontrols.onload = function () {
        if (!controls && MyTHREE.OrbitControls) controls = new MyTHREE.OrbitControls( camera, renderer.domElement );
    };
    document.head.appendChild(orbitcontrols);
}

Upvotes: 0

Sameer Kumar Jain
Sameer Kumar Jain

Reputation: 2135

As of August 2020 above answers are no longer valid. Since three.js is moved to ES6 and the editor now publishes files with the module, above solution won't work. Right now you have to download this to your js folder. Once you have it then you will need to edit it.

Open OrbitControls.js and replace this

import {
    EventDispatcher,
    MOUSE,
    Quaternion,
    Spherical,
    TOUCH,
    Vector2,
    Vector3
} from "../../../build/three.module.js";

with this

import {
    EventDispatcher,
    MOUSE,
    Quaternion,
    Spherical,
    TOUCH,
    Vector2,
    Vector3
} from "./three.module.js";

Now save this and open app.js and replace this

this.setCamera( loader.parse( json.camera ) );

with this

this.setCamera( loader.parse( json.camera ) );
var controls = new OrbitControls( camera, renderer.domElement );

Now open index.html and update it with the following code

import { OrbitControls } from './js/OrbitControls.js';
window.OrbitControls = OrbitControls;

Save index.html. Now if you reload the page you will get everything right

You can read more about here.

Upvotes: 3

Dean
Dean

Reputation: 21

Using the previous answer, the editor misbehaved badly. Instead I refactored his solution putting the following code in a script on the scene object,

var controls = null;
if (!controls && THREE.OrbitControls) controls = new THREE.OrbitControls ( camera );

This allowed the editor to work flawlessly even though there were no controls. Then when I published the scene, I added the additional script tag to index.html. The controls worked great when serving the published index.html locally.

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

    <script>.....

Upvotes: 0

Angus
Angus

Reputation: 361

I ended up creating a script on the scene object and dinamically loading an external OrbitControls from it.

This is the code I use.

var orbitcontrols = document.createElement('script');
var controls = null;
orbitcontrols.src = "https://threejs.org/examples/js/controls/OrbitControls.js";
orbitcontrols.onload = function () {
    if (!controls && THREE.OrbitControls) controls = new THREE.OrbitControls ( camera );
};
document.head.appendChild(orbitcontrols);

Unfortunately it's quite buggy on the editor (I can zoom in-out but not rotate) but it works beautifully once published. I didn't investigate much but I suspect it conflics with the editor's own controls.

Upvotes: 0

iiidefektiii
iiidefektiii

Reputation: 183

Edit: grab the OrbitControls.js and copy the code. Open your editor and select the scene object. Create a new script and past the OrbitControls code into it. Name it something like OrbitControls.

Create a new script on the scene object and paste this into it: (Make sure this script comes after the OrbitControls)

var controls;

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.enableZoom = false;

function update(event)
{
    controls.update();
}

function render() {
    renderer.render( scene, camera );
}

That should work. At least worked for me. Hope it helps!

EDIT: You could also download the three.js from the repository and it includes the editor. You can then add in your own js libraries through the html like you normally would.

Upvotes: 2

Related Questions