Three.js Texture loading

Question

I am starting during this days with Three.js and it's very cool. Now i would like to load a texture and apply it to a simple sphere. My problem is that when i open the browser page i get this error. I don't know how to solve this problem.

Code

window.onload = Init;

var scene;
var camera;
var renderer;


function render() {
   renderer.render(scene, camera);
   requestAnimationFrame(render);
}




function Init() {
   scene = new THREE.Scene();
   camera = new THREE.PerspectiveCamera(75, window.innerWidth /window.innerHeight, 0.1, 1000);
   renderer = new THREE.WebGLRenderer();



  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xeeeeee, 1);

  camera.position.set(15, 13, 12);
  camera.lookAt(scene.position);

  var cubeGeometry = new THREE.SphereGeometry(5, 30, 30);




  var loader = new THREE.TextureLoader();
  loader.load("texture/earth.jpg", function(texture) {
      var material = new THREE.MeshLambertMaterial({ map: texture });
      var sphere = new THREE.SphereGeometry(5, 30, 30);
      var mesh = new THREE.Mesh(sphere, material);
      scene.add(mesh);
  });
  var light = new THREE.SpotLight(0xffffff);
  light.position.set(10, 20, 20);
  scene.add(light);


  document.body.appendChild(renderer.domElement);

  render();
}

Answer 1

Three.js is attempting to load the image from the filesystem, as evidenced by the file:// URL in your screenshot. This is prohibited by default in modern browsers, though there are a couple ways around it:

• (Recommended) Run your code from a local HTTP server. If you have Python installed, run python -m SimpleHTTPServer from the directory of your project to spin up a simple server.
• (Not recommended) Launch a web browser with local file access enabled (e.g. --allow-file-access-from-files in Chromium). This is highly insecure, do not surf around in a browser with with this setting active.

Answer 2

I have a set of .fbx objects that I'm trying to load through FBXLoader on a WebXR App.

window.fbxLoader.load("http://localhost:8887/assets/modelate_FBX/Vaza%208067134/Vaza 8067134.fbx", function( object ) {
    const flower = this.scene.children.find(c => c.name === 'sunflower');
    window.sunflower = this.scene;
});

The problem is that whenever i try running the app, I get the following console error:

undefined:1 GET http://localhost:8887/assets/modelate_FBX/Vaza%208067134/undefined 404 (Not Found)

I am pretty sure the object path is right, as I previously managed to render GLtf files. But I need to render the FBX aswell.

I'm expecting the need to define a path for the texture models. But to be honest I'm kinda lost.