Final Build Doesnt load textures

[AlexKourganov]

This was used by Gary Simon for his threejs tutorial, everything works in local however when you build for production, the normalmap texture doesnt load. Webpack creates the textures folder however those files never loaded or used.

[ruboczkikrisztian]

This was used by Gary Simon for his threejs tutorial, everything works in local however when you build for production, the normalmap texture doesnt load. Webpack creates the textures folder however those files never loaded or used.

I have the same problem.everything loads in except the normalMap

[ruboczkikrisztian]

This was used by Gary Simon for his threejs tutorial, everything works in local however when you build for production, the normalmap texture doesnt load. Webpack creates the textures folder however those files never loaded or used.

There is a facebook three.js group where i asked my problem about this and they give me this advice:

"So when you create a production build you get a minified version of your code, from the conf I can see the images are stored in assets/images/. Create an account on https://www.netlify.com and drag and drop the dist folder after running npm run build."

And its working like a charm.

[max-programming]

The final build doesn't load texture because the texture image is not bundled by Webpack. I think we can solve this issue by simply changing the code from this to this:

// before
const normalTexture = textureLoader.load("/textures/NormalMap.png");

// after
import textureImg from "/textures/NormalMap.png";
const normalTexture = textureLoader.load(textureImg);

Idk if any loader by webpack is needed to bundle the png image because I am not familiar with Webpack.
I used Vite.js instead of Webpack

@AlexKourganov does this solve your issue?

[ruboczkikrisztian]

Thanks for the advice, I will definitely try it.
How does Vital.js work for you?
I have just heard about it and am very interested.

[max-programming]

Thanks for the advice, I will definitely try it.
How does Vital.js work for you?
I have just heard about it and am very interested.

Actually Vite.js is very fast. I have used it for sometime now and it's the greatest technology I have ever seen. If you want to set up this same project in Vite, here are the simple steps:

npm init @vitejs/app <app-name>
Select vanilla and then JavaScript
cd <app-name>
npm i
npm i three dat.gui

Then copy and paste the code in this repo, and then run npm run dev to start the dev server. Check the other scripts for building and serving.

You'll see the difference in the load time and refresh time compared to Webpack

[AeolusZane]

i met this problem also.and i solved it.
i think this is because your png\jpg resource cannot be access from your .js doc.And threejs's script need time to render, so put it under the canvas tag of your .html

u need to run a nodejs server on your local or server, and access index.html from your web by "localhost"。\

1.myserver.js
function createMyServer(port){
    let http = require('http');
    let url = require('url');
    let fs = require('fs');

    let server = http.createServer((req,res)=>{

    var pathname = url.parse(req.url).pathname;
    console.log("file:"+pathname.substring(1))
    fs.readFile(pathname.substring(1), function (err,data) {
        if(err){
            res.writeHead(404,{
                'Content-Type':'text/html;charset=utf-8'
            });
        }else{
            if(pathname.lastIndexOf('css') > -1){
                res.writeHead(200,{
                    'Content-Type':'text/css;charset=utf-8',
                    });
                    res.write(data);
            }else{
                res.writeHead(200,{
                    'Content-Type':'text/html;charset=utf-8',
                    });
                    res.write(data);
            }
        }
        res.end();
    });
    });
    

    server.listen(Number(port),'127.0.0.1', ()=>{
        console.log(`server run at port ${port}`)
    });
}

module.exports = createMyServer;

2.server.js
const server = require('./myServer')
server(8000);

3.index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>ThreeJS Starter</title>
    <link href="./main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container"><canvas class="webgl"></canvas>
        <h1>My moutain</h1>
        <p>爬山是一项运动，既可以锻炼身体，又可以陶冶人们的情操。</p>
        <p>爬山作为一种户外运动，对身体的有利因素是多方面的。它既是有氧运动，又有力量练习的成分，而且运动量、运动强度可以根据自己的体力、身体素质进行调节。</p><button>Go Biking</button>
    </div>
</body>
    <script src='./bundle.js'></script>
</html>

run node server.js to run a server and visit the site "localhost:8000/index.html"

[pareshpandit]

Three.js Starter - working fork @ Vite

Was having similar issues with the boilerplate/starter owing to webpack.
I have been using Vite for similar purposes recently, and thought of just forking+replicating this super repo in Vite.

Works buttery smooth; have tested the 'build' as well, and have updated the code to make it build right with './' instead of its default '/'.

It was so frustrating to not be able to move ahead with Gary's awesome tutorial content, owing to this roadblock, which just wouldn't move. [I am hoping that it is okay to share this; if not, kindly do advise, and I shall remove it.]

If someone in the noob boat (such as me), or otherwise, wants to use the fork, it's now at:
https://github.com/pareshpandit/threejs-vite-starter

Cheers! :)