Initial installation of demo code

Questions
1

I am planning to install the demo solution in a reactJS application. But, first, I just want to get the demo application working.

I am using MAMP as a localhost server.

Q1: I have added all the code to a single file - index,html - as per the instructions {“all our script goes here”). When I launch the server I get the title ok but nothing else. Do I have to split the script code out into a separate file? Do I need to have installed any other modules?

And, if you have installed this in a reactJS application I would also be interested to know how this is done…

2

You need to install three npm module (or have a local copy of three in some form) and include it before any javascript that uses three.js. Do you get any error messages in the browser console?

If you are completely unfamiliar with three, start without React. React requires either manual control over 3d context or usage of additional modules like react-three-fiber.

You can also take a look at this recent project from @drcmda. For what I saw it was created as a guide during a conference, so it should help!

1 Like
3

better dont mess around with mamp or whatever. just open your console and type:

npx create-react-app appName
cd appName
npm install three
npm start

this will give you everything, a dev server, hot reload, access to the npm eco system, it’s even production ready. node must be installed for this to work.

and since you are using react, i would also suggest using react-three-fiber which is the react way of expressing threejs. plain threejs has a lot of boilerplate and complex set up, no events, and conflicts with reacts principles (no mutation, no traversal, declarative instead of imperative). r3f will make learning threejs easier because you can jump right in without obstructions.

you can start with this demo for instance: https://codesandbox.io/s/rrppl0y8l4

1 Like
4

Wow, that looks great. I will give it a try this arvo… :slight_smile:

5

Hi mate. I have installed the demo in a new react app and it works fine. However, I do not understand the code! There is a file called scene.glb which, I assume, is the backdrop for the spinning cubes. But this file is not specifically referenced anywhere. I assume that this is a required file and if I want to change it I will have to create a new scene.glb file somewhere. I can’t find any documentation about this.

So, if I click on the scene.glb file the default editor is Windows Paint. If I create a new file in this app and name it scene.glb will that suffice?

I have three models to import - it is a shame that the demo app does not include an imported model…

Documentation in the opensource environment is abysmal :frowning:

6

GLB (glTF 2.0) files are 3D models. You can open it in Blender (via import. The same way, if you have your own 3D models, you can export them as .gltf / .glb using Blender.)

7

Ah ok. I have already exported the three models form Blender. So I think you are suggesting that I need to import the demo scene and modify it to contain my three models and then export the scene & models together? I will try that and see how far I get…

:slight_smile:

Lol - the imported scene doesn’t bear any resemblance to the animation scene… I will try just renaming one of my exported files to scene.glb… If that works I can output all three models and see what that does…

… that did nothing. It would seem that the scsne.glb file in the demo is never used - which I guess is why I couldn’t find a reference to it…

I have to add a loader. I follow the instructions and I get an error. It probably should say that, before you add a loader, you need to import THREE from somewhere. But this is opensource, so they leave that bit out…

And a ReactJS import statement is not the same as a JS import…

I am just spinning my wheels here… What a shame that these guys don’t provide a bulletproof implementation manual. The demo provides no guidance for implementing a solution with an imported model and the extensive documentation provides no guidance either. I am not even sure what threejs modules need to be imported after installation via npm.

It shouldn’t be this hard!

8

No no no, pls don’t :') I just wanted to explain what .glb files are. Explaining of react-three-fiber I must leave to @drcmda, I haven’t used it, but I’m pretty sure it does not require updating the scene with Blender in any way.

9

just a left over, you can delete it. in codesandbox you can click the fork button to create a new app based on the one you’re forking. must have created this box from a box that had a gltf model.

as for loading gltf in general, you need to know threejs and especially loaders, there’s no way around it. im not sure what you mean with react imports are not the same as js imports, there are no react imports. the import statement is a browser feature, threejs-loaders is a threejs feature, it is based on fetch requests, not imports.

in react loading a model is easy: https://codesandbox.io/s/r3f-ibl-envmap-simple-p5zf9 useLoader is a convenience hook around new XYZLoader().load(url, callback => ...)

if you want models in your scene and this stuff interests you check this tool out: https://github.com/react-spring/gltfjsx

1 Like
10

Thanks again. You have answered at least one of my questions - the.glb format works in this environment.

The rest of my questions now relate to how to prepare the models for export. from Blender. Is that something you are familiar with? I have 3 models, all text converted to mesh. Do I have to unwrap the UV as well? There was something about this in another tutorial but for an earlier version of Blender…

11

blender wouldnt show correct textures unless the model is properly unwrapped. you export w/ compression and youre good to go. the model in that demo is draco compressed from blender. you can use the box as a template since its properly set up already.

12

I don’t have a “compressed” option in Blender v2.82 - I can only select the format (GITF).

After unwrapping I have an unwrapped object and also a UV layout file in png format - do I need to import this second file into three.js as well?

Rapier

13

I am still not getting anywhere… After replacing the existing model in the code it looks like this:

function ArWing() {
const group = useRef();
const { nodes } = useLoader(GLTFLoader, “models/1_BigW5Wmesh.glb”);
useFrame(() => {
group.current.rotation.y += 0.004;
});
return (




);
}

The original code in the demo is:

function ArWing() {
const group = useRef();
const { nodes } = useLoader(GLTFLoader, “models/arwing.glb”);
useFrame(() => {
group.current.rotation.y += 0.004;
});
return (





);
}

I get a compile time error in reactJS:

TypeError: Cannot read property ‘geometry’ of undefined

ArWing

src/App.js:30

  27 | });
28 | return (
29 |   <group ref={group}>> 
30 |    <mesh visible geometry={nodes.Default.geometry}> (it doesn't like this line...
     | ^  
31 |     </mesh> 
 32 |   </group>  33 | );

The demo’s author rather blithely states that you can easily substitute his model for any other… I think nothing is easy in this environment! :slight_smile:

In this test I exported a single model. The UV unwrap looks ok - a “W” in 3D is quite a complex model though…

BigW_only_UV_mesh.glb (5.3 KB)

I have just been looking through the documentation. I see that I can generate 3D text right in threeJS.

https://threejs.org/examples/#webgl_geometry_text

I am assuming I can animate this text? If so I can abandon the blender model and use threeJS text.

Late afternoon in Sydney…

The model is working properly in https://gltf-viewer.donmccurdy.com and that is without UV. This post suggests that UC unwrapping is not require unless there are materials - I am not sure if that includes colours (which it does).

Comment in: blender.stackexchange.com/questions/183787/export-3d-text-for-threejs

This is how the model looks in donmcurdy.com:

Screen Shot 2020-06-24 at 4.23.42 pm
Screen Shot 2020-06-24 at 4.23.42 pm936×383 74.7 KB

Rapier

14

nodes contains the … well, nodes. they’re named. the monkey heads main mesh was named “Default”, your model for sure has a different structure. just console.log nodes and materials and you’ll see what’s in there. otherwise, use gltfjsx and it creates that graph for you.

you can also do

const { scene } = useLoader(...)
return <primitive object={scene} dispose={null} />

and be done with it, but that makes it harder if you want to change materials/properties. but for this react stuff, better use github discussions on the r3f repo, so that this forum can remain centred on threejs specific problems.

15

Thanks again. I used the “const { scene } = useLoader(…)
return ” approach and the model is now spinning quietly in the viewer :slight_smile: I don’t need to change the materials or colours here as I can do that in Blender if I want to.

I did try the console log approach but it seems that it is quite complex to get access to this info - I just get [undefined] if I try model.nodes or model.materials - there is a discourse on this here: javascript - Can I access model tree object data / attributes in Acrobat scripting? - Stack Overflow…

Anyway, now I can progress this app :slight_smile: Hopefully without further dramas. Thank you so much for your assistance, and your creativity in building this capability.

Rapier