Question

[mirker21]

Hello, ClassOutside!

For some reason the npm run start-dev command is not found. Also the path to the json file kept showing as incorrect. Would it be fine if I tweaked the code to get around this issue? I will credit you in the README of my project, I just need to know if doing this is acceptable.

Thank you!

[ClassOutside]

Hi mirker21.

The "start-dev" command should be found in the file named "package.json". I have attached a link below: https://github.com/ClassOutside/Blender_Path_To_ThreeJS/blob/main/package.json

When running the command "npm run start-dev" from a terminal window, it is important that the terminal is in the same directory as the file named "package.json". I just downloaded the repository, opened a terminal to this directory, and I was able to successfully run "npm run start-dev".

When you run this command, have you confirmed that your terminal is in the same directory as the package.json?

You may be able to check what files are in the current directory by entering the command "ls" in the terminal. Sometimes I find my terminal in the root of the extracted zip folder, instead of the folder with the package.json. This happens when the directory structure is similar to the one below:

• Blender_Path_To_ThreeJS-main
• • • Blender_Path_To_ThreeJS-main
• • • • • package.json
• • • • • README.md
• • • • • src
• • • • • dist

Please, let me know the above information was helpful. If your issue persists, and you believe you have found a solution with tweaking the code, please create a pull request and I will take a look.

[mirker21]

When I entered pwd, it said: /Users/user1/Downloads/Blender_Path_To_ThreeJS-main, which is the name of the project folder I downloaded.

I was also in the same directory, and when I entered ls, it said:

README.md node_modules package.json webpack.configure.js dist package-lock.json src

I thought these were good things to check for, but I unfortunately still got the same result from entering npm run start-dev:

start-dev start cmd /k npm run nodemon-watch & start cmd /k npm run webpack-watch

sh: start: command not found sh: start: command not found

Maybe if I added npx before nodemon-watch?

My revised one only includes two files in the folder, CurveMethods.js and curve-data.json. I did not include the express server or the three js script in the revison, nor the helpers. At the top, CurveMethods.js would import what I pasted in curve-data.json, without using the LoadJSON function. After the curve was created, I console.logged it in the pretty JSON format in the terminal so I could copy the curve data. I started it using node CurveMethods.js.

[ClassOutside]

After reviewing the package.json I believe part of the issue may be related to how Windows and Unix based operating systems handle console commands. If you are on MacOS or a distribution of Linux, I have one more thing that might be worth trying.

The below scripts object may be better suited for a Linux environment. If you replace the scripts object in package.json with what I provided below, "scripts": { "nodemon-watch": "nodemon ./src/app.js", "webpack-watch": "webpack --watch --config ./webpack.configure.js", "start-dev": "npm run nodemon-watch & npm run webpack-watch" }

You certainly can try adding npx before nodemon-watch. I believe the issue may at least be partially separate. I do not believe the command 'cmd /k npm run nodemon-watch' is valid in Unix.

[mirker21]

So now the server is running, however I get a white background and in the console I get some MIME type errors:

[ClassOutside]

I have been able to create a similar error. I may recommend checking that the scenePath and curvePath variables found in mainView.js are set properly. The names are case sensitive and must exactly match the values found in the ./src/models folder.

Would you please confirm that the files are there, with the correct extensions, and match the variables in mainView.js?

[mirker21]

I can't seem to find scene.gltf, and I did notice that I should have named my exported json file 'curvePath'. At the moment, it is still showing the same errors.

I don't know if this is correct, but should the scenePath and curvePath start with '../../dist/src/models' instead of './src/models'?

[ClassOutside]

The scene.gltf file is a 3D model to represent the scene. Are you aware of the video that goes along with this project?

I have linked it below. In this video, I walk through steps to set up the 3D scene in blender. After setting up the scene it should be exported as scene.gltf, and placed in the ./src/models folder. This repository is set up to demonstrate importing a spline to threeJS, and uses that spline as a path within a 3D environment. The demonstration currently requires the scene.gltf file.

https://www.youtube.com/watch?v=jzUz_9_qvCM

Are you looking to follow along with the demonstration, or use the features in a separate project?

[mirker21]

Yes, I was following along with the video. Thank you for pointing that out, I had assumed that the scene.gltf was already somewhere in the files upon downloading it. I should have looked a little more closely at that.

I still get the blank window and the MIME type errors though.

[ClassOutside]

I am glad that solved part of the problem. I do not recall the MIME type errors affecting the website's visibility. Does the blank window have a color?

If the scene does not have a light in it, the camera may be all black and cause the appearance of a blank screen. If the light in it is too bright, the scene may be overexposed and cause the appearance of a blank white screen. It can be helpful to view the scene on threejs.org/editor, and add any lights there to make sure it will be visible when rendered by the JavaScript.

The video walks through this at around the 1:34 mark: [https://youtu.be/jzUz_9_qvCM?si=zmeTSckEbsDmh5bm&t=94](Link to video).

I have a separate video that walks through the process to import models from Blender to ThreeJS. If this is the issue, reviewing the steps in this video may be helpful: [https://www.youtube.com/watch?v=_QmhpmZVZIU&t=0s](Import Blender Scene to ThreeJS).

[mirker21]

So far, the original, unchanged downloaded project's display is a blank white window. I tried changing the color of the background of the scene to red, and adding a light, but no luck:

    scene.background = new THREE.Color(0xFF0000);
    const light = new THREE.PointLight( 0xff0000, 1, 100 );
    light.position.set( 50, 50, 50 );
    scene.add( light );

Would it be fine if I had used a bezier curve instead of a nurbs curve and then converted that to a mesh in Blender, and that I exported the scene as a gltf?

In my revised version of the project, it had no issues with converting the exported JSON file to a catmullromcurve3. Other than that, what I have seems to be correct. Here is a link of my repo containing what I tried in the original downloaded project: https://github.com/mirker21/Class-Outside-Blender_Path_To_ThreeJS-Help

If I am unable to figure out what might be wrong on my end, do I have permission to use the revised version of this project to convert the JSON to a curve, while still crediting you in the README?

Thank you so much for your help and patience on this issue.

[ClassOutside]

One more thing comes to mind at the moment. When exporting the scene in blender, under the 'Include' drop down, "Cameras" and "Punctual Lights" should be selected. When I forgot this, I would get blank scenes. The project places the camera in the 3D space at the same location as the first camera exported in the gltf. If there is no camera in the gltf, the ThreeJS camera may not be in a proper position and cause the screen to appear blank.

I believe a bezier curve should work. Any curve that is converted to a mesh, and is essentially a string of vertices connected by edges, should work when exporting to a JSON.

If you use a revised version of this project I would appreciate the credit for what I have contributed.

I am glad I could help. I hope you are able to find the solutions you need to keep progressing with your project!

[mirker21]

Unfortunately, including the camera and light did not work, so I will just use the revised version instead.

I will definitely credit you. Thank you for all the thoroughly detailed videos you put out, as well as for taking the time to help me out with this issue. Keep up the awesome work!

[ClassOutside]

Your compliments are appreciated! Thank you :)