If I run the script, the console displays me "THREE.OrbitControls is not a constructor".
What did I wrong? I used the same code from a manual.
var controls;
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
//Hier wird die Größe des Fensters manipuliert!
renderer.setSize(window.innerWidth - 20, window.innerHeight - 20);
};
var animate = function () {
requestAnimationFrame( animate );
controls.update();
};
var geometry1 = new THREE.BoxGeometry( 10, 10, 10);
var material = new THREE.MeshPhongMaterial( {specular: "#fdfb57", color: "#d8d613", emissive: "#6b6a0d", side: THREE.DoubleSide} );
var box = new THREE.Mesh(geometry1, material);
scene.add(box);
camera.position.z = 50;
render();
animate();
You must explicitly include OrbitControls in your application. For example:
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims#1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three/build/three.module.js",
"three/addons/": "https://unpkg.com/three/examples/jsm/"
}
}
</script>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
Also, read the comments in the three.js OrbitControls example carefully so you understand when to use
controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
and when to use
controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
https://github.com/mrdoob/three.js/blob/dev/examples/misc_controls_orbit.html
three.js r.147
I had the same issue with a webpack build of the three library
var THREE = require('three')
THREE.OrbitControls === undefined // true
Solution, install a 3rd party orbit control
npm install three-orbit-controls
details here: https://github.com/mattdesl/three-orbit-controls
then change the above code fragment to
var THREE = require('three')
var OrbitControls = require('three-orbit-controls')(THREE)
OrbitControls === undefined // false
ok, not the best example, but when applied in place of THREE.OrbitControls, it works just fine ;)
https://github.com/nicolaspanel/three-orbitcontrols-ts :
npm install --save three-orbitcontrols-ts
import { OrbitControls } from 'three-orbitcontrols-ts'
orbitcontrols should be installed separately in angular, this issue bothers me for several days.
I have a same problem too, it's because you put in wrong line.
you need to put it under of this line
document.body.appendChild( renderer.domElement );
then you add orbit controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', posUpdate );
controls.update();
if it wasn't work, add the script file download here
<script src="OrbitControls.js"></script>
I faced similar issue and after lot of research, the below thing worked
In your HTML the order matters when adding OrbitControls as it needs certain things from Three.js.
It should be
<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
Related
I hope that there are some experienced people on this platform who'd be willing to help me with my three.js problem.
My current problem is this, I can't seem to properly run the three.js library on my localhost, all I get is a white screen.
My files:
My Javascript code:
import * as THREE from 'three.js-master/three.js';
import { OrbitControls } from "three.js-master/examples/OrbitControls.js";
const scene = new THREE.Scene(); //generate scene
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); //generate camera
const renderer = new THREE.WebGLRenderer(); //launch renderer using WebGl
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
const controls = new OrbitControls( camera, renderer.domElement );
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.05;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
And my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>EMBÄR</title>
<link src="style.css" type="stylesheet">
</head>
<body>
<script src = "three.js" type="module"></script>
<script src="Main.js" type="module"> </script>
</body>
</html>
Now, this just gives a white screen all the time, but I've managed to use the link:
https://unpkg.com/three/build/three.module.js (instead of three.js-master/three.js) in combination with:
https://cdn.jsdelivr.net/npm/three#0.114/examples/jsm/controls/OrbitControls.js (instead of three.js-master/examples/OrbitControls.js)
to successfully run the script, but this really isn't a solution, since I had to search for days to find these links, and it surely isn't efficient if I want to include more modules besides these.
It'd be awesome if someone knew the answer, but please, don't feel pressured to do a lot of research.
Your HTML should look like so:
<!DOCTYPE html>
<html>
<head>
<title>EMBÄR</title>
<link src="style.css" type="stylesheet">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims#1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "./three.js-master/build/three.module.js",
"three/addons/": "./three.js-master/examples/jsm/"
}
}
</script>
<script src="Main.js" type="module"> </script>
</head>
<body>
</body>
</html>
In your Main.js file, use the following imports:
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
The imports in your JS should look exactly like the ones from the official examples. The only thing that differs is the import map. In your case, you refer to your locally hosted version of the three.js repo. Keep in mind to always use the module.js version of three.js. Not the UMD build.
You find more information about the setup/installation of three.js in this guide.
i am trying to learn how to use modules. I thought I would start with the simplest possible but already then I have the problem that it doesn't want to run. I have to overlook something important but I just don't see what.
Including "three.module.js" or executing the script as "module" does not work.
Does anyone have a working example?
I got this example from:
https://threejs.org/examples/webgl_geometry_cube
Why doesn't that work if I do it locally
<script type="module">
import * as THREE from "lib/three.module.js";
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
</script>
Ok i have researched intensively for the last two days. "export / import" only works via http and not with local directories. So you have to set up your own server. The alternative that I am currently using is a bundler. Parcel is not compatible with my tablet but webpack works very well. To do this, I first had to install a terminal. I chose termux. Then I installed node.js (v12.18.3) via termux and then webpack. At first it seemed like a big effort to me, but after you've done it all once, it doesn't seem that bad anymore. Important point! Termux must be configured in the app manager on android in order to have access to the sdcard in the device. By default, access is forbidden and the command line then shows "permission denied" if you want to access the internal memory with "cd /sdcard/".
I created the project normaly with an editor, you don't need the terminal for that. termux is then only required to run webpack with "npx webpack" after going to the project directory in termux.
My first example:
//path-structure
webpack-demo
|
|_page.html
|_webpack.config.js
|_src
|_index.js
|_bar.js
//page.html
<!doctype html>
<html>
<head> </head>
<body>
<div id="message"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
//webpack.config.js
const path = require('path');
module.exports = {
//mode: 'development',
mode: 'production',
entry: './src/index.js',
output: { path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js' }
};
//index.js
import bar from './bar';
bar();
//bar.js
export default function bar() {
document.getElementById("message").innerHTML = "Hello World";
}
Software source:
termux: install from google play
node.js: https://nodejs.org/en/download/package-manager/
webpack: https://webpack.js.org/guides/installation/
now I am satisfied, because now I can write properly structured javascript code 😁
So I decided to see if I could import a DirectX Model and found this XLoader. However I can't seem to initialize it at all. Now, I am the kind of guy who likes to link directly to the library so that whenever there is an update I don't have to re-download and re-upload. My test code looks like this:
<html>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script type="module" src="https://threejs.org/examples/jsm/loaders/XLoader.js"></script>
<script>
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(75, window.innerWidth / window.innerHeight, 0.001, 10000 );
var manager = new THREE.LoadingManager();
var Texloader = new THREE.TextureLoader();
var loader = new THREE.XLoader(manager, Texloader);
loader.load(['FrigateHull.x'], function (object) {
console.log(object);
},function (xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}},
function (xhr) {
console.log(xhr);
});
</script>
</body>
</html>
The error I am getting from this setup is this:
TypeError: THREE.XLoader is not a constructor
I have also tried the import method as described in the examples but still same error. I have also downloaded the git to the server and tried linking to that, but it said something about global is undefined.
What am I missing, or is there another DirectX Model Loader out there I could try?
Should be like this:
<script src="https://threejs.org/build/three.js"></script>
<script type="module">
import { XLoader } from "https://threejs.org/examples/jsm/loaders/XLoader.js";
// ....
var loader = new XLoader(manager, Texloader);
// ....
</script>
Although the TypeError: THREE.XLoader is not a constructor exception is resolved, there are still other problems.
Let's look at the source code of XLoader.js:
import {
AnimationClip,
AnimationMixer,
Bone,
BufferGeometry,
FileLoader,
Float32BufferAttribute,
FrontSide,
Loader,
LoaderUtils,
Matrix4,
Mesh,
MeshPhongMaterial,
Quaternion,
Skeleton,
SkinnedMesh,
TextureLoader,
Uint16BufferAttribute,
Vector2,
Vector3
} from "../../../build/three.module.js";
// ...
We don't have ../../../build/three.module.js code.
It is recommended that you clone the repository of three.js, and then npm install → npm start to start the project, instead of viewing it directly in the browser, which involves a lot of import and export of modules depends on front-end construction tools.
So I'm trying to load a GLTF file and I am receiving this error:
I don't know why it can't locate and open the file. Do I have to set up a local server?
I looked up other examples online and this one includes a DRACOLoader. Admittedly, I don't know what this is for and was wondering if I need to implement this in order for it to load.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<title>Website first attempt</title>
<style>
body { margin: 0;
background: linear-gradient(to bottom, #33ccff 0%, #ffffff 20%);}
canvas { display: block; }
</style>
</head>
<body>
<!-- <script type = "module" src="build/myScript.js"></script>-->
<script type = "module">
import * as THREE from '../build/three.module.js';
import { GLTFLoader } from '../build/GLTFLoader.js';
let scene, camera, renderer, hlight;
function init () {
//scene
scene = new THREE.Scene();
//camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth/ window.innerHeight, 1, 5000);
//light
hlight = new THREE.AmbientLight (0x404040, 100);
scene.add(hlight);
//render
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor( 0x000000, 0 );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//3d
let loader = new GLTFLoader();
loader.load('assets/londonmap.gltf', function(gltf){
scene.add(gltf.scene);
})
}
function onWindowResize () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
function animate () {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render( scene, camera );
}
init ();
animate();
</script>
</body>
</html>
DracoLoader is only necessary if the glTF asset was compressed with the same-named compression algorithm.
A HTTP 404 means that it was not possible to load the file (in your case assets/londonmap.gltf) from the given path. So you have to make sure that the asset is actually present in the respective directory.
And yes, it's highly recommended to work with a local web server. Especially to avoid any security related browser issues. The project actually provides a small guide about this topic: How to run things locally.
I have a page based on this example, and using the relevant lines from the webgl_material_bumpmap example for implementing a loading progress Dom Element.
The page is (temporarily) here. If what I have included below is not enough information, please see the source for this page.
My problem is that the Loading text block does not disappear when the model is loaded.
I show it using:
function installModel(file) {
if (model) {**strong text**
scene.remove(model);
}
render();
var loader = new THREE.JSONLoader(true);
loader.load("obj/" + file, modelLoadedCallback);
document.body.appendChild( loader.statusDomElement );
}
The init function (without the error handling stuff) is
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, theCanvas.width/theCanvas.height, 0.1, 100);
camera.position.z = 30;
camera.lookAt( scene.position );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.damping = 0.3;
controls.addEventListener( 'change', render );
createWorld();
installModel("room1.json");
render();
loader.statusDomElement.style.display = "none";
}
Why does the Loading text remain visible?
You probably need to add:
loader.statusDomElement.style.display = "none";
in your callback function modelLoadedCallback() after you print to the console.
I worked it out.
I had to add another div element called "prog"
then
var show
function show() {
document.getElementById("prog").style.display = "inline";
}
and
var loader = new THREE.JSONLoader(true);
document.getElementById("prog").appendChild(loader.statusDomElement );
loader.load("obj/" + file, modelLoadedCallback);