Hello, I’m trying to load this OBJ file and MTL file along with these texture files (1, 2) all using CDN links so I can eventually install this on a Webflow website, which doesn’t support local hosting.
I am new to ThreeJS so please excuse my ignorance as I am trying to learn how to do this. I have read the documentation, but I am stuck now and am hoping someone on this forum knows the answer.
I looked at this example from the ThreeJS website to try to learn how to load these files. I used the example to create this JSFiddle. But I can’t see the model.
I also looked at this example on codepen. These JPG files ar referenced in the MTL file:
The textures are located in the same directory like the MTL file. If MTLLoader processed the MTL file and encounters the texture entries, it will automatically load them from the backend via TextureLoader.
BTW: If you can control the type of 3D asset you are going to load, consider to use glTF. Latest Blender versions have built-in support for exporting glTF. Using this format makes the loading process faster and less complicated.
Following up with what happened: I tried using GLTF for the model, but I was having issues with displaying the glass properly. GLTF doesn’t seem to play nicely with transparent materials. So I stuck with OBJ and MTL. You can see it working here: https://codepen.io/byaliabbas/pen/XWNRdmR
And working on Webflow here: Flavors
The OBJ file is large, but it does the job.
I hosted the OBJ and MTL files on the client’s Godaddy account using cPanel. I was getting cross origin errors when trying to load the OBJ and MTL files in the Javascript. In order to fix this, I needed to add a .htaccess file in the directory of the OBJ and MTL file, and the texture files. Inside the .htaccess file I added this:
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} off RewriteCond %{HTTP_HOST} ^(www\.)?files\.theflobrand\.com$ [NC] RewriteRule ^(.*)$ https://files.theflobrand.com/$1 [L,R=301] </IfModule> Header set Access-Control-Allow-Origin "*"
