I'm working with game dev. He has implemented all the boardgame using Blender. He also added some sprites inside directly and linked the sprite to the Camera inside Blender so that when this camera moves, all the sprites will move accordingly to always face the Camera.
Now my question is, how can I implement this using react-three-js. I see that I can export the Camera object from blender (after exporting the GLTF with the Camera inside) and see it in my GLTF in threejs (under gltf.cameras[0])
My question is, How can I change the camera position of the GLTF (not a copy in threejs) so that I can keep the rules he added for the sprite to always face the camera?
Any constraints created in Blender will not be included when exporting files to other formats. Those would need to be recreated in three.js. In this case I'd recommend using gltfjsx to create a JSX representation of your model, and then using the <Billboard /> component to keep objects facing the camera.
If you have many (100+) sprites, it may be necessary to export them as points, and then assign a THREE.PointsMaterial that applies whatever appearance you need with a texture. Those points will face the camera automatically, as shown in this example.
Related
I have created a 3d object using blender and exported it as .obj file.
I am trying to load that .obj file using OBJloader in threejs. That is a single object with multiple material in it. It is loaded without any issues.
I am trying to track which material the user has clicked in a 3d object. I am using raycasting for this. Since raycasting works only at object level, I am not able to get which specific material user has clicked.
Starting with three.js R101, you can evaluate intersection.face.materialIndex and then retrieve the correct material from your materials array. This was actually a missing feature in previous three.js revisions.
So, as a starter on Blender, I've downloaded a 3d file from the internet. I've been able to import the object (.obj file) to the scene, but noticed one thing: There are 12 pictures in a folder called "Textures" that come with the downloaded object. How do I import these textures to the scene and apply them to the object? It is a good note that the object itself is not a whole, it is a combination of other objects.
Blender objects use materials to add color and shading to each mesh face. We assign textures to each material. The UV map image textures are assigned to a material in a process called skinning. You might just need to select the object and then look in the Material and Texture properties. Each Texture will have a folder icon to set the location of the texture image file.
YouTube offers many how-to videos about how to UV wrap an object. Just don't make your task too difficult. You probably only need to set the correct image texture png for each UV texture.
Hang in there and good luck.
I'm new to both Blender and ThreeJs and searched a lot before asking. I created a model with Blender and esported it as .dae so I can load it in the html canvas. The problem is that only the model is loaded and not the textures. I'm doing something wrong or it's the loader that somehow causes the problem?
Here is the sample:
http://provasitimek.herobo.com/firstImport2.html
and the code:
https://github.com/MarcinKwiatkowski1988/learningThreeJs/tree/master/ThreeJs_and_blender
PS. the blender version is 2.70 (so maybe the problem lays here?)
PS2: So, after many attempts, these are my conclusions:
to get the color of the object, you have to choose the Blender renderer and not Cycles renderer
the export to the file .dae is not realy significant, should working with all options (or at least I didn't find any differences between files exported with different options)
if you use Blender renderer and any basic materials (Basic, Lambert, Phong) you get only the color on the object rendered in threeJs: so, for example, if you apply a trasparency to you object on blender, you will not see it on the rendered object on threeJs
with my current level (i just started to learn threeJs and blender 2 weeks ago) this is as far as I can help. Hope someone with higher skills like #mrdoob would figure out what the problem is
THREE.js does not pair models and textures until you actually make a mesh. Export The model and texture separately, load them separately and call
new THREE.Mesh(blenderGeometry,blenderTexure)
I want to bake my model lightmap in blender then load them all in three.js.
So in blender i set two uvs for each objects and baked ambient occlusion in second uv. finally i exported whole scene via three.js exporter into js file.
(exporter has problem that the baked texture goes for diffuse-map not light-map which is correctable by editing exported js file).
But the problem is when i load js with SceneLoader, the textures especially for my floor goes wrong, like upside down.
here is my test files: Test Light Map
So is there something wrong with my blender file or ...? Which loader i should use for it?
Thanks.
I just upload some images to see what i mean:
Messed up textures:
After edit js file, it's get better. but still there is problem at the edges:
And specially at floor, the light-map goes wrong:
Ok, i don't know why, but it seems my uvs was messed up in blender. i did some recaculate normals and flip normals in blender and now textures map fine on objects.
But i still need to edit exported scene to change map:texture.png to lightMap:texture.png.
[EDIT]
Actually this is a bug related to three.js scene exporter: Blender Exporter - Scene Exporting
[Final Answer]
The problem was about my model which had a negative scale in blender. i select my model, hit crtl+a then choose scale. now everything's fine.
In Three.js, How do I create transparent hole inside a plane so that only objects below the hole are visible. Something like clearRect of canvas.
I'm doing this with Blender and PSP.
So my scenario is the following:
Create a trensparent image with a hole in PS or PSP.
Open Blender and create your plane. Use the transparent texture you just created on it.
Export the Blender scene into a collada file.
Use on of the sample .html-s to display the collada file.
This is my working solution. If you wish I can give you working codes.
Or if you are not familiar with Blender and this collada related things then you should use that example files they using transparent images (for example: webgl_particles_billboards.html).
Take a look at "textures/sprites/disc.png" It's a transparent image as well. You can replace it with your transparent image with the hole.