Utilizing external sources to add texture to 3D models in WebGL

Question

Utilizing external sources to add texture to 3D models in WebGL

After mastering the art of applying texture to my 3D-models in WebGL using .mtl files (and .obj files), the process works seamlessly when the images are saved on my local computer. Below is an excerpt from my .mtl file showcasing how the texture is applied:

newmtl Earth_MATERIAL
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.640000 0.640000 0.640000
Ks 0.000000 0.000000 0.000000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 1

map_Kd Earth.png

Although everything works smoothly on my local machine, the challenge arises when I aim to publish my simulation and need to reference the image source. I initially tried uploading the image to Dropbox and using the link, but encountered an issue:

...
map_Kd https://dl.dropbox.com/s/t4cm3vzsbx21crc/Earth.png?dl=0

The error message I received when attempting to run this code was:

Error: WebGL warning: texImage2D: Element is write-only, thus cannot be uploaded.

To load the texture and model, I rely on an MTLloader and OBJloader. The following are the loaders I'm utilizing:

MTLloader: link

OBJloader: link

In addition, I make use of the ThreeJS Library:

ThreeJS: link

UPDATE: Thanks to Jave, the problem has been resolved! For those interested, here is the outcome:

javascript 3d three.js webgl textures

Answer 1

Answer №1

The MTLLoader provides a convenient method called setTexturePath that allows you to specify the base path for loading textures. In cases where you are sourcing files from an external location like Dropbox, it may be necessary to also invoke setCrossOrigin(true). Below is a sample implementation demonstrating the use of these methods to load a texture.

Consider the following points:

It is common practice to store textures in the same directory as the mtl-file, or in a subdirectory for direct referencing (e.g., Earth.png or textures/Earth.png).
When using mipmaps, texture dimensions should be power of two (e.g., 2048 x 1024). Non-compliant images are automatically resized upon loading, so pre-sizing is recommended for efficiency.
Your texture is currently sized at 5689 x 2844 pixels, which is quite large. It would be advisable to reduce its size, as some devices may not support textures larger than 2048 x 2048.

const canvas = document.getElementById("canvas");
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 1, 10);
const renderer = new THREE.WebGLRenderer({ canvas });
const light = new THREE.AmbientLight();
scene.add(light);
camera.position.set(0, 0, 6);

const mesh = new THREE.Mesh(new THREE.SphereBufferGeometry( 1, 32, 32 ));
scene.add(mesh);

function update(){
  scene.rotation.y = 0.001 * performance.now();
  renderer.render(scene, camera);
  requestAnimationFrame(update);
}

update();

//The following code snippet generates a data-url from the div containing the mtl-data. While not essential, it enhances the example's similarity to file loading.
const data = document.getElementById("mtlplaceholder").textContent;
const dataurl = "data:text/plain;base64," + btoa(data);

const loader = new THREE.MTLLoader();

//To load texture files from a different folder than the mtl-file, setTexurePath must be invoked with the appropriate base path. Note that each texture needs to be available at this base url, which may not be the case with shared files from Dropbox.
//The complete URL is  https://dl.dropbox.com/s/t4cm3vzsbx21crc/Earth.png
loader.setTexturePath("https://dl.dropbox.com/s/t4cm3vzsbx21crc/");
//To enable cross-origin loading of textures, use setCrossOrigin(true):
loader.setCrossOrigin(true);
//Finally, load the mtl file (in this case, the "file" corresponds to the created dataurl):
loader.load(dataurl, res => {
  //MTLLoader.load creates a MTLLoader.MaterialCreator. To obtain the actual material, call create with the desired material name.
  //For OBJLoader users, utilize preload before calling objloader.setMaterials.
  const loadedMat = res.create("Earth_MATERIAL");
  //Assign the material to the mesh.
  mesh.material = loadedMat;
}, e => console.log("error", e));

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/53838a2/examples/js/loaders/MTLLoader.js"></script>

<canvas id="canvas" width="400" height="400"></canvas>

<div id="mtlplaceholder" style:"white-space:pre">
newmtl Earth_MATERIAL
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.640000 0.640000 0.640000
Ks 0.000000 0.000000 0.000000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 1

map_Kd Earth.png
</div>

Answer 2

The MTLLoader provides a convenient method called setTexturePath that allows you to specify the base path for loading textures. In cases where you are sourcing files from an external location like Dropbox, it may be necessary to also invoke setCrossOrigin(true). Below is a sample implementation demonstrating the use of these methods to load a texture.

Consider the following points:

It is common practice to store textures in the same directory as the mtl-file, or in a subdirectory for direct referencing (e.g., Earth.png or textures/Earth.png).
When using mipmaps, texture dimensions should be power of two (e.g., 2048 x 1024). Non-compliant images are automatically resized upon loading, so pre-sizing is recommended for efficiency.
Your texture is currently sized at 5689 x 2844 pixels, which is quite large. It would be advisable to reduce its size, as some devices may not support textures larger than 2048 x 2048.

const canvas = document.getElementById("canvas");
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 1, 10);
const renderer = new THREE.WebGLRenderer({ canvas });
const light = new THREE.AmbientLight();
scene.add(light);
camera.position.set(0, 0, 6);

const mesh = new THREE.Mesh(new THREE.SphereBufferGeometry( 1, 32, 32 ));
scene.add(mesh);

function update(){
  scene.rotation.y = 0.001 * performance.now();
  renderer.render(scene, camera);
  requestAnimationFrame(update);
}

update();

//The following code snippet generates a data-url from the div containing the mtl-data. While not essential, it enhances the example's similarity to file loading.
const data = document.getElementById("mtlplaceholder").textContent;
const dataurl = "data:text/plain;base64," + btoa(data);

const loader = new THREE.MTLLoader();

//To load texture files from a different folder than the mtl-file, setTexurePath must be invoked with the appropriate base path. Note that each texture needs to be available at this base url, which may not be the case with shared files from Dropbox.
//The complete URL is  https://dl.dropbox.com/s/t4cm3vzsbx21crc/Earth.png
loader.setTexturePath("https://dl.dropbox.com/s/t4cm3vzsbx21crc/");
//To enable cross-origin loading of textures, use setCrossOrigin(true):
loader.setCrossOrigin(true);
//Finally, load the mtl file (in this case, the "file" corresponds to the created dataurl):
loader.load(dataurl, res => {
  //MTLLoader.load creates a MTLLoader.MaterialCreator. To obtain the actual material, call create with the desired material name.
  //For OBJLoader users, utilize preload before calling objloader.setMaterials.
  const loadedMat = res.create("Earth_MATERIAL");
  //Assign the material to the mesh.
  mesh.material = loadedMat;
}, e => console.log("error", e));

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/53838a2/examples/js/loaders/MTLLoader.js"></script>

<canvas id="canvas" width="400" height="400"></canvas>

<div id="mtlplaceholder" style:"white-space:pre">
newmtl Earth_MATERIAL
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.640000 0.640000 0.640000
Ks 0.000000 0.000000 0.000000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 1

map_Kd Earth.png
</div>

Utilizing external sources to add texture to 3D models in WebGL

Answer №1

Similar questions

Customize the border width and color of a specific column in HighCharts based on dynamic data

Eliminate the Div Attribute once the radio button is activated

Dynamic image sources in reusable Gatsby-Image Component

The art of concealing and compressing JavaScript code

I'm not satisfied with the value of the ReactJs state after the change

You cannot use the "this" keyword outside of a class body

Is it possible to remove Sprites from a three.js scene?

Combine theme configuration options within Material-UI

What could be causing the React-Router-Dom Outlet to not show the component?

To enable RTL in TextField, please note that the JssProvider is only available in "react-jss/src/JssProvider" and not in "react-jss/lib/JssProvider"

Retrieve data within an object.map() function, returning after the mapping process has been completed

What is the best way to execute two asynchronous calls sequentially in JavaScript?

Encountering unexpected fetch requests to JSON files when using getStaticProps/getStaticPaths

Is there a way to send the image object to the onclick function as it is being assigned?

Tips for creating a functional null option using the select ng-options feature

"Utilizing JSON information to create visually appealing graphs and charts

Guide to personalizing the ngxDaterangepickerMd calendaring component

When using Javascript, an error is being thrown when attempting to select a nested element, stating that it is not a function

I encountered an error when attempting to integrate Node.js with my terminal in the text editor - permission was denied

Utilizing the <webview> functions within Electron: A comprehensive guide