I’m trying to create a tree with textures. Is there any way to do that in react three fiber?
is this about porting something you already have or saw somewhere?
Basically I’m trying to add kinda realistic tree in my glb model. But don’t know how to to do that. Also is there any way to merge two glb files? I have one with textured and another with raw. Both are the same model. What I want is to merge them in one.
You’ll need to be much more specific about what you need to do, or examples you want to imitate. There are lots of different ways to make content, appropriate for different things — For realistic scenes, it’s most common to do your modeling in a program like Blender first, then export to a format like glTF and load that in three.js.
Ok got it. First I need to make a tree scene in blender then export right?
you can model trees but poly count will move up quickly if you want to be realistic, and of course you probably need lots of trees and lots of variation. a bunch of cleverly designed low poly trees + instancing could get you somewhere with some corners cut. otherwise you can use sprites or impostors. for instance in this thread there’s a really good looking tree scene (2nd post) About dynamic imposters by @Fyrestar
1 Like
I think, first you’ll need to think about how you’ll want to use that model of a tree, and what level of realism you expect. Including (but not limited to) thinking about from what distance you’re going to be looking at that tree or maybe even parts of it. Is it going to be a deciduous tree or a coniferous tree, in summer or winter?
If this tree is going to be part of a forest which you’ll be looking at from a distance of a few hundred meters, the requirements will be much different from what is required if you’ll be walking through that forest, or maybe even zooming in on that bird sitting on one twig of said tree.
2 Likes
Just FYI - there are many methods to create trees, including a couple of very simple methods:
- One simple method is to use sprites, including transparent sprites.
- If at ground level, another simple method is to create two vertical planes - one aligned north/south, the other east/west and adding textures to them.
As has been noted, the most important question is how are you going to use them?
- In a still scene?
- Will you view them from all or just limited angles?
- Will you move past them slowly or just be “whizzing past” them?
- Will you be viewing them from above, below or at eye level?
- Will there be only a few trees or a lot of them?
For example, if you are creating a forest of trees, you might consider using a single forest object - since, as they say, “it is hard to see the trees for the forest”.
1 Like
even in games that would probably just be a stem and some fake 2d sprite foliage. i’d start by looking for assets first.
In a game, trees will be mostly decoration only, which will receive cursory attention at maximum. The main focus being on the character or his adversaries.
The Poster seems to be looking for some decoration for an architectural visualisation, which - being still - will receive much more attention. Also note, that the trees in his sample cast shadows - something you wouldn’t realistically get from a billboarded sprite, given the illumination from a low sun coming in from the side.
is there any code sample I can get to make that tree? or are there any ideas on how to do that?
If you’re not familiar with or interested in learning 3D modeling tools like Blender, starting with free models available on Sketchfab might be a good option. Download as a .gltf file and load with THREE.GLTFLoader (lots of examples of loading in the docs).
1 Like
Thanks, man this helped. One more question how can I load multiple models with react three fiber? I have converted a model to JSX already how can I add this tree to that? Do I need to import both of these models to blender first and export them as one?
I’ve loaded the model but have an issue.
This is the model I loaded:
This is what I’m getting. Why I’m not getting the actual one?
Looks like the export from sketchfab is not quite right in this case. I’m not sure of the R3F syntax for this but I would try to set all the leaf materials to transparent=false and alphaTest=0.1 (or some other value >0 and <1).
This is not working
