I customized Three.js example 'webgl_loader_json_objconverter.html'.
(This file is simple obj file loader)
I want to delete model's shadow.
I erase lines 'scene.add({light})' inside code, then all models be black color.
I want to render model's original texture and original color.
shadow is not required.
Is it possible?
Related
I am not sue of this is even possible but instead of setting a texture to a jpg like THREE.TextureLoader().load('./texture1.jpg')
I want to set the texture to an INLINE SVG (I want to animate with javascript GSAP).
Is this possible? Probably not :(
Sorry, it's not. You can't use a SVG file as a texture. However, you can load SVG files in three.js via THREE.SVGLoader and then create shape meshes from the resulting path data.
But keep in mind this is a one-time operation. If you animate the SVG, you won't see any effect after the loading process.
I built a .glb viewer with Three.js. Whenever I want to display a model from Blender where the scale has not been applied before exporting (e.g. scale at 0.5 instead of 1), I get sizing issues in Three.js. It usually manifests in the model appearing smaller than its bounding box.
Is there a way to get consistent scale with Three.js?
Downloadable files:
This is the file that causes the problem:
https://firebasestorage.googleapis.com/v0/b/fotura3d-dev.appspot.com/o/cassette.glb?alt=media&token=27e08f59-68b4-4011-89a4-04bdc56365db
This is the file with transforms applied in Blender which works as expected in Three.js:
https://firebasestorage.googleapis.com/v0/b/fotura3d-dev.appspot.com/o/cassetteApplied.glb?alt=media&token=fc6decb1-aa36-4ab2-8582-9ce21111585b
Instead of scene.add(yourModel) ing your model to the scene.. try scene.attach(yourModel)
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 am trying to create a cube using three.js for a project. I need to add text to vertices and at different points inside the cube. Any idea how this can be done?
For some basic code examples of using Sprite objects in Three.js, check out:
http://stemkoski.github.com/Three.js/Sprites.html
And for an easy way to create images that contain text to use as your sprite textures, check out the sample code at:
http://stemkoski.github.com/Three.js/Texture-From-Canvas.html
I think a combination of these two ideas will achieve what you are looking to do.
If you want to have label-style texts, so that the text begins at a specific point, but is always oriented with the camera and easily readable no matter the camera position, you can use sprites. (example of canvas-created text label sprites: http://i.imgur.com/e9I68xD.jpg - here they are rendered on a separate pass to that they are never obscured by the scene but you can do it on the same pass)
If that's what you are looking for, I'd suggest first checking the Sprites examples, and learn to attach some static image as a sprite to correct position in the scene. After you get that working, you modify the code so that you generate the text to an image canvas using standard Javascript Canvas functions, and using that image as the sprite.
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.