Видео

Nevermind I got working, Great Video! Thanks!

If you're using VS Code, try installing the Live Server extension. It's probable that your computer isn't serving the 3D model file in the path the code is looking for.

If you're using VS Code, try installing the Live Server extension. It's probable that your computer isn't serving the 3D model file in the path the code is looking for.

As far as I understand it, the scene.bin file stores the data that's too big to fit the scene.gltf, but is still needed, in in binary format. Both files must match for the model to work properly. To make these files, export from a 3D software in glTF format. To get them, you can download from plenty of sites, including the one I showed in the video (just make sure to download in glTF format)

Make sure the model file's extension and path are correct, then if that's still not working, try playing with the camera's X, Y and Z values, as the model might be somewhere else in the scene but not directly in front of the camera.

Yep, this should work in any type of website! Thought, if you're using Shopify's Hydrogen (instead of Liquid), you should probably use the React Three Fiber lib instead, but the underlying logic will still be the same.

I mean, you can make the Canva take the whole viewport size with CSS, doesn’t that work?

Yeah, that’s probably an issue with the file pathname, I wrongly assumed everyone would be running this in a server-like environment, with the project folder at the root. I’m pretty sure I’ve given detailed instructions on how to solve it in another comment here, but you basically have to change the 3d model file path and it will work

that means the compatibility related, bro.

Bro it's showing the same for me

​@@adityapatki9494 are you sure you're pointing to the right file path?

I use Fira Code with ligatures activated

You might either need to change the path of the 3d models or run the index.html file using some king of server software, like VSCode's Live Server Extension

It's the selector I'm using to choose which file to render, either "dino" or "eye". You may very well just hardcode that on a real project

They should all work, but the settings for each model can be wildly different. So make sure you play around with light sources, camera positions, object materials, etc. Once you get something to appear on the screen you can start tweaking the values and hopefully you'll be able to adjust it the way you want it.

@@GabrielMolterIO yea man understood it thank you for the info

For React projects I'd use @react-three/fiber and maybe "useGLTF" from @react-three/drei to load the GLTF model. I might make a video on that in the near future.

Yeah, I remember seeing something similar to that on the THREE.JS documentation, maybe take a look at the examples there and you can find a path to follow

Do you get an error message on the console or something like that?

Yeah, just set your scroll event listener, save the scroll position into a variable and use that variable on the animation loop to make whatever animation you want

Hey, that's probably related to the import path of the model file. It should work if you add ./ before "models/" on the file path. If I remember well, I've given a slightly more detailed explanation in a previous comment here some days ago.

You should be able to switch to the dino by changing line 24: let objToRender = 'eye'; becomes let objToRender = 'dino';

Excellent! Thank you very much!

I use a little VSCode Extension called "Live Server", which I highly recommend. You could also simply open the index file with a browser. Keep in mind that, as it is, the code loads the 3D models using paths relative to the root, so to run it without starting a local web-server, you'd have to add a "./" before the file path, to make it relative to the current folder. `models/${objToRender}/scene.gltf` would have to be `./models/${objToRender}/scene.gltf` Again, if you use the extension that change isn't needed.

@@GabrielMolterIO Hi, I have the same problem, I changed "loader.load( `./models/${objToRender}/scene.gltf`," but I still get a black screen, when I inspect the page in Chrome, it shows the container3D div has a height of 0, but is the same width as the screen

@@angelinepoissonneau do you get an error on the console or something?

u fixed this?

You know when we set camera.position.z on the video? Did you try changing the positions for camera.position.x and camera.position.y as well? I think that might work for you!

@@GabrielMolterIO yes i know , i had to set values of camera and of position in thousands. another way was to scale down my model. i was wondering if this happens every time for everyone. it would have been great if imported model were just originate from position 0,0,0. (they actually are but the appear at some other position away from origin 🥲).

@@ahmadshoukat-c8y I don’t actually know the reason for that, but in my experience it was rare to find a model that was nicely centralized at 0,0,0 by default. 🤷🏻‍♂️

@@GabrielMolterIO true , it means its the same case everyone. but there is too much hit and trail in threeJs 😮‍💨 beside knowing dimensions

If the background doesn't interact with the model you can just add it with CSS in element you want, like: body { background-image: url(path_to_your_img) }

@@GabrielMolterIO it isn't working I don't know why, in a few forums they said you have to add new scene and camera

This video uses GLtf format, but you can use a bunch of others as well, just take a look at the documentation on loaders.

If I understood what you meant, what you are talking about are legatured, those are basically more characters combined for a different look. You can enable them in VS in the options, for the arrow is just = and > combined that look like an arrow

I've heard some people are having the same issue. I believe it's related to how the model file path on the code is relative to the root of the project, but if you just open it without using some kind of localhost server, it will look for the root of your computer's file system, which won't work... Try running it with something like the "Live Server" extension for VSCode.

i used live server extension but still not working @@GabrielMolterIO

Hey, I missed that on the video, but I believe the issue you're having is related to how the model file path on the code is relative to the root of the project, but if you just open the .html file, without using some kind of localhost server, it will look for the root of your computer's file system, which won't work... Try running it with something like the "Live Server" extension for VSCode.

​@@GabrielMolterIOok so we have to run it with node or python to create a http socket or else we can make a flask or react app of it ??

You’d have to replace the glTF loader with the OBJ one, just take a look at the ThreeJS docs: threejs.org/docs/#examples/en/loaders/OBJLoader

I believe that one is from RUclips's free library, if I remember correctly

Not really, just dragging the file to Chrome should open it without issues. I use a VSCode Plugin called "Live Server", which makes it a bit faster.

Hahaha this sounds pretty cool

No matter what's the model, the code should work as long as it's exported in glTF

I'd start by checking if there are any errors on the console. Also, is the model exported in the correct format? I'd also double check the camera position, it might have to be very different from what I'm using on the video, depending on the model you're using.