Hello, Sorry to ask such a basic question:
I just want to add simple orbit controls to a scene in the editor or in my script, but whenever I try it no longer renders.
I have tried adding this:
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
var controls = new OrbitControls( camera, renderer.domElement );
camera.position.set( 0, 20, 100 );
controls.update();
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
in my index.html, and also in the scene object in editor and neither would load.
sorry, thanks,
I know this is kinda backwards but I only just started to learn about html/js like last week and only know enough to barely copy paste my way through this program. I’m only trying to make orbit controls, this is my entire index.
<!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;
overflow: hidden;
}
</style>
</head>
<body ontouchstart="">
<script src="./js/HelioWebXRPolyfill.js"></script>
<script type="module">
import * as THREE from './js/three.module.js';
import { APP } from './js/app.js';
import { VRButton } from './js/VRButton.js';
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
var controls = new OrbitControls( camera, renderer.domElement );
camera.position.set( 0, 20, 100 );
controls.update();
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
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>
Hi, I just started experimenting with three.js and ran into the same problem. Luckily I’ve just figured out the solution and I thought to help you out.
FYI, I’ve used NPM to install three.js package and using Webpack to bundle all my dependencies.
The missing piece in this problem is the OrbitControls.js file which should have been included in the three.js package, but you have to download it separately.
Place the source in your ./js folder (or wherever you want, it doesn’t matter if you are bundling).
Check Import command path of source: OrbitControls.js source file imports few methods from three.js file, so you have to make sure that the path in the import command is accuratet. If not, change it to the correct path.
Now import OrbitControls.js after three.js.
Like this:
import * as THREE from ‘three’;
import {OrbitControls} from ‘./OrbitControls’;
That’s it! Now you have OrbitControls available when you call new OrbitControls().
With these minor adjustments, Lday’s code above should work fine.
I still think I need your help; I went deeply in to the structure from the “Publish” files of the Editor and found out differences between Lday’s code and mine.
I’have edited the HTML file to add a reference to OtbitControls.js. then i edited this file to make the correct reference to the three.module.js file.
I do not use NPM nor Webpack, I rely on the files from “Publish” menu in the Three’s Editor site. I upload test files on my FTP server.
The Editor now publishes and organizes files in a different way from Lday’s code: the function “Animate” is in the app.js file, not in the index.html. Its code is different too, it is referring to a lot of data coming from the app.json file in the root folder.
I tried several times to paste “var controls = new OrbitControls( camera, renderer.domElement );” and “controls.update();” where it seems to be corresponding but without any result. Checking the console in my web browser I get this:
OrbitControls.js:98 Uncaught TypeError: Cannot read property ‘position’ of undefined at new OrbitControls (OrbitControls.js:98) at new Player (app.js:10) at Object.onLoad (index.html:35) at XMLHttpRequest. (three.module.js:36471)
I hope you can help me in understanding how to edit the code.
If you have the chance try to upload a GLB file to the Three’s Editor then to Publish the result. Give a look at the files, they are different from Lday’s code.
Dude, you are an absolute legend. An actual example as an answer! Finally. Thank you so much. Most intelligent answer I’ve come across on three.js discussions.
!