javascriptthree.jsobjloader

"THREE.OBJLoader is not a constructor" and "Unexpected token {" in OBJLoader and OrbitControls

I'm trying to display an OBJ 3D model as a wireframe that can be moved with OrbitControls using Three.js. I'm new with three.js, so I apologize if I'm missing something "obvious".

I've been able to get a cube to show as a wireframe with OrbitControls. In a different setup, I was able to display the OBJ 3D model as a wireframe. Therefore, the issue isn't related to the 3D model.

The issue happens when I try to mix both approaches together.

I've tried to go about this in two ways:

  1. I tried to insert the OBJLoader into the cube environment. (most promising)
  2. I tried to add OrbitControls into the working, but unmovable, wireframe OBJ environment. (didn't really work at all)

Most of the other answers focus on the order of scripts: yes, I have tried to move the three.min.js, OrbitControls.js, OBJLoader.js, and my main working model.js into order and disorder, in every possible way.

Here's my code:

<head>
    <style media="screen"> html, body { margin: 0; } #model_container { background-color: #333333; margin: 50px; } </style>
    <title>OBJ Wireframe</title>
    <script defer src="script/three/build/three.min.js"></script>
    <script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
    <script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>
    <script defer src="script/model.js"></script>
</head>
<body>
    <div id="model_container"></div>
</body>

const globalWidth = window.innerWidth - 100;
const globalHeight = window.innerHeight - 100;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, globalWidth / globalHeight, 0.1, 1000);
camera.position.x = 300;
camera.position.y = -6;
camera.position.z = 1;

const renderer = new THREE.WebGLRenderer({
   antialias: true,
   alpha: true
});
renderer.setClearColor( 0xffffff, 0);
renderer.setSize(globalWidth, globalHeight);

const canvas = document.getElementById("model_container");
canvas.appendChild( renderer.domElement );

const ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);

const loader = new THREE.OBJLoader();
loader.load("assets/castle.obj", function(object) {
   const geometry = object.children[0].geometry;
   THREE.GeometryUtils.center(geometry);
   const material = new THREE.MeshLambertMaterial({});
   const mesh = new THREE.Mesh(geometry, material);
   mesh.material.wireframe = true;
   scene.add(mesh);
})

const controls = new THREE.OrbitControls(camera);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed   = 0.1;
controls.target.set(0, 0, 0);

var animate = function () {
   requestAnimationFrame(animate);
   controls.update();
   renderer.render(scene, camera);
};
animate();

Here are the errors I can't fix after 3 days of searching and trying everything I could:

The errors seem to be rooted in the THREE.js files themselves, which I find very strange. I'm all out of ideas and documentation to go through.

I'm running this with MAMP, but have also tried uploading to a server to see if the issue is related to being local files or anything similar.

Solution 
  • <script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>

    It seems you are loading the files from the wrong path. Files from the jsm directory are ES6 modules which are imported via ES6 import syntax. Try to include the files from the js directory:

    <script defer src="script/three/examples/js/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/js/loaders/OBJLoader.js"></script>

    three.js R106