I have 0 expriance with three.js and I don’t know what I’m doing but I’ve been trying incredibly hard to import an object loader and the firstpersoncontrols into my project.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Maze</title>
<script src="https://three.js.org/build/three.js"></script>
<script type="module">
// SOMGOLIE EJINKEONYE COSC3306 ASSIGNMENT 2
// Import the Three.js module
import * as THREE from 'https://unpkg.com/three@0.111.0/build/three.module.js';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
window.onload = function() { // one big function for all our JavaScript code
//Define the WebGL renderer:
var renderer = new THREE.WebGLRenderer(); // Specify the use of WebGL
renderer.setSize(1520, 750); // Scene size (Width, Height)
document.body.appendChild(renderer.domElement);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
//Initialize (create) the scene:
var scene = new THREE.Scene();
//THE CAMERA
var camera = new THREE.PerspectiveCamera(
35, // Field of view
800 / 600, // Aspect ratio
0.1, // Near plane
10000 // Far plane
);
camera.position.x= 0; //default value anyway
camera.position.y= 0; //default value anyway
camera.position.z = 100; //We move the camera backwards to see all the scene
camera.lookAt(scene.position);
// creating the terrain
var terrainGeometry = new THREE.PlaneGeometry(600, 620, 199, 199);
var terrainMaterial = new THREE.MeshLambertMaterial({ color: "brown" }); // Brown color
var terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
terrain.castShadow=false;
terrain.receiveShadow=true;
terrain.rotation.x +=250
terrain.position.y -=15
scene.add(terrain);
//lights
var pointLight = new THREE.PointLight(0xFFFFFF);
// set the light position:
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 100;
// add the light to the scene:
scene.add(pointLight);
//the skydome
var geometry =new THREE.SphereGeometry(100,60,80);
var texture = new THREE.TextureLoader().load('bluesky.png');
var material = new THREE.MeshBasicMaterial({map:texture});
material.side =THREE.BackSide;
var skydome = new THREE.Mesh(geometry,material);
var geometry = new THREE.BoxGeometry( 6, 16, 6 );
//It defines colour green:
var texture2 = new THREE.TextureLoader().load('check.jpg');
var material = new THREE.MeshLambertMaterial( {map:texture2} );
var cube = new THREE.Mesh(geometry,material);
cube.castShadow=true;
cube.receiveShadow=false;
cube.translateX(10);
cube.translateZ(70);
scene.add(cube);
var geometry = new THREE.BoxGeometry( 6, 16, 6 );
//It defines colour green:
var texture2 = new THREE.TextureLoader().load('check.jpg');
var material = new THREE.MeshLambertMaterial( {map:texture2} );
var cube2 = new THREE.Mesh(geometry,material);
cube2.castShadow=true;
cube2.receiveShadow=true;
cube2.translateX(-10);
cube2.translateZ(70);
scene.add(cube2);
var geometry = new THREE.BoxGeometry( 16, 16, 16 );
//It defines colour green:
var texture2 = new THREE.TextureLoader().load('check.jpg');
var material = new THREE.MeshLambertMaterial( {map:texture2} );
var cube3 = new THREE.Mesh(geometry,material);
cube3.castShadow=true;
cube3.receiveShadow=true;
cube3.translateX(5);
cube3.translateZ(50);
scene.add(cube3);
// adding the skydome
scene.add( skydome );
//the fog 0.007 is the intensity
const light = new THREE.SpotLight( 0xffffff );
light.castShadow = true; // default false
//Set up shadow properties for the light
light.shadow.mapSize.width = 12; // default
light.shadow.mapSize.height = 12; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 50; // default
light.shadow.focus = 1; // default
scene.add( light );
const spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( 100, 1000, 100 ); spotLight.map = new THREE.TextureLoader().load( "https://threejs.org/examples/#webgl_lights_spotlights" ); spotLight.castShadow = true; spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024; spotLight.shadow.camera.near = 500; spotLight.shadow.camera.far = 4000; spotLight.shadow.camera.fov = 30; scene.add( spotLight );
//render the skydome
function render(){
requestAnimationFrame(render);
renderer.render( scene, camera );
}
render();
}; // onload function
</script>
</head>
<body></body>
</html>
it gives me this error:
Uncaught TypeError: The specifier “three/examples/jsm/loaders/OBJLoader.js” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “…/” or “/”.
GET http://localhost:8080/favicon.ico
[HTTP/1.1 404 Not Found 0ms]
if I change the path to:
import { OBJLoader } from '../node_modules/three/examples/jsm/loaders/OBJLoader.js';
the error becomes this:
this is the folder where I keep everything:
I’m required to use notepad++ and a webserver called serverz, I’m also using firefox
any way I can get ObjLoader to import??
