Among the various protocols like http://, https://, the file protocol, file:// also exists, but with additional restrictions.
When you tried to reference a file like sun.jpg, the browser considered it a relative URL and looked at the base URL of the document for resolution. Since it was from the file:// protocol, certain restrictions were applied, such as the inability to read local files. The error message provided may be slightly misleading.
Browsers offer two native methods for accessing local files: using the file input tag or drag-and-drop feature. Both options require user interaction. If these methods fail, you might need a browser extension with an executable or set up a HTTP server.
By utilizing the file input tag, you can select specific files for access, generate internal URLs for them, and use them just like any other URL in your code.
<!-- Sample HTML -->
<html>
<head>
<style>
body {
margin : 40px;
font-family : arial;
}
/* CSS styles omitted for brevity */
</style>
</head>
<body>
/* A simple HTML structure for file handling - omitted for brevity */
</body>
<script type="module">
// JavaScript code for Three.js functionality
</script>
</html>
Access this JSBin link for related content.
If constantly selecting files becomes tedious, you can use a script mentioned above that enables persistent storage of files in localStorage. However, there is a limit of around 5MB.
The provided script allows you to persistently store selected files using localStorage for easy access across pages and page reloads within the file:// protocol.
In terms of CORS regulations, the file:// protocol follows similar policies to others. For successful data access by JavaScript, responses must contain the correct CORS headers defined through Access-Control-Allow-Origin:* when under file:// protocol due to null document.domain status.
.
- Check out a similar example here
- View an image sample here
- Browse Mr.doob's work here
- Explore Matter.js along with three.js here
For more insights into servers:
- Try stackblitz
- Get help on setting up a local web server in Visual Studio Code on Stack Overflow
- Discover the basics of Node.js here
Join the Javascript chat on Stack Overflow
Have a great time!
.
Find another relevant answer I provided on Stack Overflow here.
To get started, try the following with internet access for loading Three.js model:
Use the file button to choose a file from your local drive
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 for further actions.