Question 366834 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to solve CORS problem whith local html three.js?

I´ve been trying to make an sphere whith three.js with an image texture but without a server, i mean im just learning and i jjust want to use vs code but ether way this an local image or an https image online it gives this error:

Access to image at 'file:///C:/Users/***/...../***/sun.jpg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
GET file:///C:/Users/...../sun.jpg net::ERR_FAILED

And here the code im using:

const geometry = new THREE.SphereGeometry(5, 32, 32);
const cargador = new THREE.TextureLoader().load("sun.jpg");
const cargaTextura = new THREE.MeshBasicMaterial({
map: cargador
});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

im not a profesional programer so if someone can explain everthing it would be great
thanks for all help.

Tags:

2

Answers


  1. 0

    Browsers restrict loading files from the local file system.

    You have several options:

    1. You can serve the image using a web server like express, nginx…

    2. Use a cloud storage bucket and access it via URI

    3. You can convert the image to base64 or something and display it directly by doing new THREE.TextureLoader().load(yourBase64string)

    Login or Signup to reply.
  2. 0

    here you can try this to get you started, you’ll need the internet to load three.js in this model

    use the file button to select a file from your local harddrive

          
      function url_change(e){
          
          texture(e.target.value);
      }
      
      function file_change(e){
        
          var blob    = e.target.files[0];
          var url     = URL.createObjectURL(blob);
          texture(url);
      }
    body {
  display:flex;
  align-items:top;
  gap:20px;
}
input {
  font-size:16px;
  padding:5px;
  width:250px;
  margin-left:20px;
}
span {
  display:inline-block;
}
    <body>
  <span></span>
  <div>
        <input type=file onchange='file_change(event)'>
        <br>
        url<input onchange='url_change(event)'>
        <br>
        <input type=button value=mesh onclick='mesh(event)'>
  </div>
</body>

<script type=module>
      
      import * as THREE from 'https://esm.run/three';

      window.mesh=function(){
        
            var meshMaterial    = new THREE.MeshPhongMaterial({color:'lightblue',emissive:'blue',flatShading:true});
            ready(meshMaterial);
      
      }            
      
      window.texture=function(url){
        
            const cargador = new THREE.TextureLoader().load(url); 
            const cargaTextura = new THREE.MeshBasicMaterial({ map: cargador }); 
            ready(cargaTextura);
            
      }
      
      function ready(material){
        
            var scene           = new THREE.Scene();
            scene.background    = new THREE.Color('gray');
          
            var camera          = new THREE.PerspectiveCamera(75,1,1,50);
            camera.position.z   = 50;
          
            var renderer        = new THREE.WebGLRenderer();
            renderer.setSize(300,300);
            document.body.querySelector('span').replaceChildren(renderer.domElement);
          
            var lights          = new THREE.DirectionalLight('white',3);
            lights.position.set(75,75,200);
            scene.add(lights);
          
            //var geometry      = new THREE.BufferGeometry();
            const geometry      = new THREE.SphereGeometry(25, 32, 32); 
        
            const sphere = new THREE.Mesh(geometry,material); 
            scene.add(sphere);
      
      
            (function render() {
                    sphere.rotation.y  += 0.005;
                    renderer.render(scene,camera);
                    requestAnimationFrame(render);
            })();

      }//setup
      
      mesh();
      
</script>

    you can paste a url into the text field and press enter

    or click the mesh button

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search