ARTICLE AD BOX
I'm trying to set up a very basic scene and load one obj into it. However, I keep getting this error:
Uncaught TypeError: The specifier “three” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”. OBJLoader.js:17:8I don't think I'm supposed to have to adjust the base code of the three.js libraries, so I'm assuming I'm setting up the environment wrong. Here is the code, which I got from a basic tutorial... I can't figure out what I'm doing wrong, as every tutorial I find, basically matches what I'm doing.
HTML file:
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Three.js Learning Environment</title> <meta name="title" content="Three.js Learning Environment" /> <meta name="googlebot" content="noindex" /> <meta name="robots" content="noindex" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="pragma" content="no-cache" /> <style> #test-env { border: 1px solid #666; margin: auto; padding: 0px; } </style> </head> <body> <canvas id="test-env" class="basic-canvas"></canvas> <script type="module" src="three-js-test.js"></script> </body> </html>JS file ( i have the latest three.js build downloaded set up on my server.
import * as THREE from 'https://10.1.10.101/work-shop/three.js/build/three.module.js'; import { OrbitControls } from 'https://10.1.10.101/work-shop/three.js/examples/jsm/controls/OrbitControls.js'; import { OBJLoader } from 'https://10.1.10.101/work-shop/three.js/examples/jsm/loaders/OBJLoader.js'; const scene = new THREE.scene(); const camera = new THREE.PerspectiveCamera(75, (window.innerWidth/window.innerHeight), 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const light = new THREE.AmbientLight(oxffffff, 1); scene.add(light); const loader = new OBJLoader(); loader.load( 'https://10.1.10.101/work-shop/base_assets/obj/Human/Characters/footman.obj', function( object ) { scene.add(object); }, function( xhr ) { console.log((xhr.loaded/xhr.total*100)+"% loaded."); }, function( error ) { console.error("An error happened", error); } ); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); };