I looked everywhere before asking here - searching Google, StackOverflow, discourse.threejs.org, Youtube - I even tried asking YouChat.
But as they couldn’t resolve my issue, I’m asking you here.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tidally locked world game</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- CrazyGames SDK - only for deployment on CrazyGames -->
<script src="https://sdk.crazygames.com/crazygames-sdk-v1.js"></script>
</head>
<body>
<canvas id="game-canvas"></canvas>
<!-- Scripts -->
<script type="importmap">
{
'imports' :{
'three': './three/build/three.module.js'
}
}
</script>
<script src="script.js" type="module"></script>
</body>
</html>
JS
"use strict"
// Imports
import * as THREE from './three/build/three.module.js';
import {GLTFLoader} from './three/examples/jsm/loaders/GLTFLoader.js';
// Basic functions
function byId(id) {
return(document.getElementById(id))
};
// Setup
// vars
const fps = 60;
// three.js
const scene = new THREE.Scene();
// Add objects
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshStandardMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.05, 1000000000);
scene.add(camera);
const sun = new THREE.PointLight(0xf78f73, 1, 0, 0);
const ambientLight = new THREE.AmbientLight(0x101010);
scene.add(sun);
scene.add(ambientLight);
const planet = new THREE.Mesh(new THREE.SphereGeometry(10000000, 200, 100), new THREE.MeshStandardMaterial({color: 0xffc65c}));
scene.add(planet);
// Setup objects
sun.position.set(0, 5000000000, 0);
camera.position.set(0, 0, 20000000);
// Setup renderer
const renderer = new THREE.WebGLRenderer({canvas: byId('game-canvas')});
// Logic
function logic() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
};
let logicInterval = setInterval(logic, 1000 / fps);
// Render
function render() {
requestAnimationFrame(render);
renderer.setSize(byId('game-canvas').offsetWidth, byId('game-canvas').offsetHeight);
renderer.render(scene, camera);
};
render();
When I try to run this on my remotely hosted website (https://jackgreenearth.org/projects/alien-game/index), it comes up with the error
Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”. GLTFLoader.js:64:7
I’ve seen videos and guides, and even examples where it seemed others got this to work without modifying the GLTFLoader.js file, so it must be some really simple error I’ve made, but I can’t see it in my own code, and numerous searches have yielded nothing, so I turn to you to help.
Will you be the reason my code runs today?
If you can help me, please reply, thank you!
Oops, almost forgot to mention: I’m running this on Firefox 104.0.2 (64-bit) on Manjaro Linux.
Edit: Please help me, I’m at my wit’s end.
cheers you too, as a heads up, if you’re going to be loading gltf models you may want to use THREE.LoadingManager() and run your