Blender models in react-three-fiber:

[SunbeamRapier]

I am having difficulty with a Blender model - a single extruded text letter.

When I attempt to obtain the geometry it fails on "Cannot read property 'geometry' of undefined.

I was advise to console.log the nodes to see what they are but this produces: Nodes = [object Object] which is not promising...

The code is:

---

const { nodes } = useLoader(GLTFLoader, '/BigW_only_UV_mesh.glb', draco())
const texture = useLoader(THREE.TextureLoader, '/flakes.png')

console.log("Nodes = |" + nodes + "|");

return (
<mesh {...props} geometry={nodes.BigW_only_UV_mesh.geometry} onPointerOver={() => set(true)} onPointerOut={() => set(false)}>

The error occurs on the last line.

It was also suggested that I use gltfsx but the documentation is somewhat obtuse:

npx i gltfjsx BigW_only_UV_mesh.glb [Model.js] [options]

Is this a standalone module? I only ever use npx to create a new react app.

What exactly does 'Model.js' represent? Do I need to create a new component in my react app? If so, what goes in there?

Assuming there is some issue with the model, is there any advice on exporting models from Blender to make them suitable for use in this environment? The 3D text model , converted to mesh, has colour but no texture and has worked ok in other three.js environments but not in react-three-fiber.

Any thoughts?

Rapier

[SunbeamRapier]

ps: the model is not animated in Blender. It is just a 3D Mesh.

[drcmda]

you cant do "string" + object + "string" in javascript, it will yield: "string [object, Object] string", instead do console.log("string", nodes, "string")

npx is a npm command, it allows you to use packages without installing them
model.js is a module that contains the scene graph of your model, it does not contain the model itself, nor does it contain draco. your model must exist, the paths need to be correct, draco has to exist in your public folder if your model is compressed. if you can load and display the model with plain new GLTFLoader().load(url, data => ...) then useLoader or gltfjsx will work - but they do not change a single thing, they just make it easier to deal with assets.

[SunbeamRapier]

Haha - thanks mate. I don’t think I have had to console log an object… This is what is inside it… Nodes = | {Scene: Group, Light: Object3D, Camera: Object3D, Big_W: Mesh} | Does that shed any light on why it can’t read the geometry? This is the code: function Model(props) { const [hovered, set] = useState(false) const { nodes } = useLoader(GLTFLoader, '/BigW_only_UV_mesh.glb', draco()) const texture = useLoader(THREE.TextureLoader, '/flakes.png') console.log("Nodes = |", nodes, "|"); <mesh {...props} geometry={nodes.BigW_only_UV_mesh.geometry} onPointerOver={() => set(true)} onPointerOut={() => set(false)}> Stephen

…

On 5 Jul 2020, at 8:32 pm, Paul Henschel ***@***.***> wrote: you cant do "string" + object + "string" in javascript, it will yield: "string [object, Object] string", instead do console.log("string", nodes, "string") — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#552 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI3XEBMYTVCMTSNOXZ5KDGDR2BJCJANCNFSM4OQH5JGQ>.

[drcmda]

Make a codesandbox. That code says nothing. You must be set up for Draco, it needs Draco compressor files inside your public folder. This stuff is purely threejs related.

[SunbeamRapier]

This is what I have in my public folder: These are from the codesandbox with the Suzanne model and background: https://codesandbox.io/s/r3f-ibl-envmap-simple-p5zf9 <https://codesandbox.io/s/r3f-ibl-envmap-simple-p5zf9> The package.json for this demo app does not include anything about Draco either: "dependencies": { "drei": "0.0.58", "react": "16.13.1", "react-dom": "16.13.1", "react-scripts": "3.4.1", "react-three-fiber": "5.0.0-beta.8", "three": "0.117.1" However the npm guide for Draco includes the install command: npm install draco3d

I ran the install. I note that I get this error: ***@***.*** requires a peer of react-three-fiber@>=4.2 but none is installed. You must install peer dependencies yourself.” I have the Beta 20 version running - can I ignore this message?

Also I get 4994 vulnerabilities now - which is alarming… npm audit fix doesn’t resolve any of them… Draco3d now appears in the package.json but the “cannot read properties” error remains. "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "draco3d": "^1.3.6", "drei": "0.0.60", "node": "^14.5.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "^3.4.1", "react-three-fiber": "^5.0.0-beta.10", "styled-components": "^5.1.1", "three": "^0.117.1", "troika-3d": "^0.28.1", "typescript": "^3.9.5" The model I am using in the app is the UV mesh model: If I try to console.log the mesh I get: Line 13:49: 'BigWonlyUVmesh' is not defined no-undef It is not an issue of not finding the glb file. I tried importing the mesh file directly: import {BigWonlyUVmesh} from './extras/BigWonlyUVmesh.glb’ and referencing the file directly: mesh {...props} geometry={BigWonlyUVmesh.geometry} onPointerOver={() => set(true)} onPointerOut={() => set(false)}> but I still get the same error. It would seem to me that the Blender .glb output is not in the expected format. A working model However, in the demo react-fox app ( a three-fiber app) I import a different file - without the UV mapping: And this works fine in the react-fox app However, the code is very different to the codesandbox example If I import this model into your codesandbox code, I get an error: in Model (at Logo.js:71) in Suspense (at Logo.js:69) So I remain confused… If I use the react-fox code then, presumably it will work in my app but I won’t have access to the additional materials capabilities - is that correct? Ideally I need to find a way to import the UV mesh in the existing code from the sandbox without creating all these errors. I have created a sandbox and sent it to your drcmda github account. Stephen

…

On 6 Jul 2020, at 1:52 am, Paul Henschel ***@***.***> wrote: Make a codesandbox. That code says nothing. You must be set up for Draco, it needs Draco compressor files inside your public folder. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#552 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI3XEBMYTODMSN5XXZSAUXDR2COSDANCNFSM4OQH5JGQ>.

[SunbeamRapier]

I had a another look at Blender's exports and there is another function to export a UV layout, so it would seem the UV layout is not exported within the mesh export file. BigW_only_UV_mesh.glb.png

Perhaps I need to import this file somewhere?

[drcmda]

this is not how you handle draco. i suggest at this point you move the discussion to the threejs discourse forum and try to load a generic plain threejs draco gltf. if you know how it works it wont be any different for r3f. although, you could fork the suzanne sandbox, it's set up already.

you dont install any npm dependencies, draco-3d is for node. you copy the draco folder from three/examples/jsm into your public folder. but this is not the scope of this forum. it seems to me you're throwing stuff against the wall. better learn how threejs functions, then come back - you cant use r3f without knowing three.

ps same for uvs. you can export a glb which contains uvs, or a gltf which needs external files. but just trying this stuff out will tire you out, it's way too complex.

[SunbeamRapier]

Do you have a link for the Suzanne sandbox? I can’t find it in the threeJS examples or Google. You have previously advised me not to mix threejs and react-three-fiber. How do I determine which bits of threejs are ok to use and which are not? You have invested a lot of time and energy in building react-three-fiber, but perhaps not enough energy in making it accessible to new users. This is, sadly, commonplace in the opensource environment. As for learning threeJS you should consider that in a commercial project, such as mine, my focus is on deploying the technology that I need, and only that technology. While it might be fun to explore all the other aspects of threejs it is not commercially viable to take the time to do so. I was originally using threeJS - it was your advice to switch to react-three-fiber. If you are now telling me to revert to threeJS then I won't need need react-three-fiber and I will have wasted these weeks pointlessly. I.T. is always complex. The onus is on the developers it to make it simple but that requires good documentation skills, a commitment to accessibility and an understanding of your audience. I read somewhere a while ago that if your mother can understand it, you have written good documentation. Less is NOT more in this environment: experts can skip the basic stuff but it ALL has to be there for new users and everyone in between. I have been coding since 1977 in many languages in many environments. In an IBM or other major vendor environment you can expect solid training and a well-laid-out manual, written by a dedicated documentation team and which leaves nothing to chance. In the OpenSource environment this doesn’t happen - there are no documentation experts and the result is often an impenetrable mish-mash of tutorials or examples, often including out of date or trivial examples (reactjs.org) for example). Reliance on examples is problematic because you provide a bunch of code and a result, but no explanation of the code and, therefore, no way to achieve a real understanding of how it works. If you can point me to straightforward explanations which will aid me in the implementation of this technology then please do so. I am looking for a straightforward step-by-step process to import and animate a model. It it is as complex as you suggest then there will be more steps. But it is only ever a collection of steps and that is how complexity is turned into simplicity - only you can do this, but you have to want to do it. In the meantime I will use the react-fox code which works with my model and, hopefully, I can then get on with the rest of this project, Stephen

…

On 6 Jul 2020, at 4:15 pm, Paul Henschel ***@***.***> wrote: this is not how you handle draco. i suggest at this point you move the discussion to the threejs discourse forum and try to load a generic plain threejs draco gltf. if you know how it works it wont be any different for r3f. you dont install any npm dependencies, draco-3d is for node. you copy the draco folder from three/examples/jsm into your public folder. but this is not the scope of this forum. you could fork the suzanne sandbox, it's set up already - but it seems to me you're throwing stuff against the wall. better learn how threejs functions, then come back - you cant use r3f without knowing three. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#552 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI3XEBOIHKWMHQERLH3ZFDLR2FTYFANCNFSM4OQH5JGQ>.

[SunbeamRapier]

I didn’t have to use draco in the end. The models are extruded text, so not complex, and they export from Blender with all their materials intact and I have them running in the react app now. I don’t have any need to change the ,aerials in the app so I am happy with this. I need to change the camera from perspective to ortho - I am rotating the models on the X axis and the perspective camera distorts them. In the npm notes on three-react-fiber it suggests that I can change the camera by including the statement: "orthographic = false // Creates an orthographic camera if true That doesn’t work = the compiler doesn’t like the equals sign. This statement IS accepted by the compiler but there is no noticeable difference to the distortion: <Canvas style={{ background: "#171717", orthographic : true }}> Also, I was trying to scale the models in the APP rather than in Blender. According to threeJS manual I should be able to scale an object, or a group of objects. in the react-fox demo the rotation is handled via the group: group.current.rotation.x += 0.016; // axis & speed He mentions that scale is another modifier that can be used here. But when I try: group.scale( 2, 1, 1 ); I get the error “group.scale is not a function. Is it expecting an arrow function here? I tried also: var scale1 = new THREE.Vector3( 2, 1, 1 ); group.scale = scale1; But that generates an error “Cannot add property scale, object is not extensible. I would have posted tsome of this in the threeJS forum on github but Github is having issues - no server available… Stephen

…

On 6 Jul 2020, at 4:15 pm, Paul Henschel ***@***.***> wrote: this is not how you handle draco. i suggest at this point you move the discussion to the threejs discourse forum and try to load a generic plain threejs draco gltf. if you know how it works it wont be any different for r3f. you dont install any npm dependencies, draco-3d is for node. you copy the draco folder from three/examples/jsm into your public folder. but this is not the scope of this forum. you could fork the suzanne sandbox, it's set up already - but it seems to me you're throwing stuff against the wall. better learn how threejs functions, then come back - you cant use r3f without knowing three. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#552 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI3XEBOIHKWMHQERLH3ZFDLR2FTYFANCNFSM4OQH5JGQ>.