I am trying to show a point cloud in Threejs, but the result is always flat (not affected by light), and no shading is rendered, is there a way to make it more realistic with shading and shadows (something like Meshlab for example). or is it a limitation in Threejs?
I am using THREE.Points object, with THREE.PointsMaterial material. I tried to use the option vertexColors: THREE.VertexColors, but only flat colors appear.
points = new THREE.Points(geometry, new THREE.PointsMaterial({
size: 1.2,
vertexColors: THREE.VertexColors
}));
Compare threejs rendering to the left, with meshlab rendering to the right
Related
I'm doing a project with react-three-fiber and included my Blender model (a .glb file) with useGLTF (from the drei package). It seems to work but the colors are off, all the parts are way too pale.
The stretched cube (a boxGeometry from R3F) and the cylinder (glb model) have the same material and the same color assigned, but the pink of the cube is much stronger.
I did some googling and think that it might be the encoding, but I do not know to what I have to assign it.
e.g. https://threejs.org/docs/#examples/en/loaders/GLTFLoader
renderer.outputEncoding = THREE.sRGBEncoding;
texture.encoding = THREE.sRGBEncoding;
but I don't have a renderer object with R3F, nor has the material a texture
Update
When I apply <Canvas linear> both objects have the same color, but both not the vibrant version
I have a project with 360 scene - camera is inside the sphere and 360 photo is wrapped as texture around the sphere:
http://kitchen-360.herokuapp.com/
I added several smaller spheres with transparent textures and Im seeing sudden drop of performance. It is 'fill bound' issue as described in this link:
Debugging low FPS in Three.js
Im trying to solve this performance issue. Im thinking of having only one sphere with multiple textures on it. Is this gonna be faster then stacked spheres with one texture each?
I tried to create sphere mesh with array of MeshBasicMaterial but its not working. Only first texture in the array is visible:
// when texture is loaded I push it to array
var sphereMaterial = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide
})
sphereMaterial.transparent = true;
matArr.push(sphereMaterial);
//... then later when all textures loaded
roomMesh = new THREE.Mesh( sphereGeometryR, matArr );
roomMesh.name = 'great room';
scene.add( roomMesh );
I saw this example for custom shader but dont know how to add and change textures dynamically at later time:
Multiple transparent textures on the same mesh face in Three.js
Is there any other way to optimize this problem? Would geometry merge help here?
I want the sprite in the scene don't change the size when the camera zoom in or out. and the sprites use different canvas texture as the material.
I found that the sizeAttenuation in ParticleBasicMatierial can work for me. But if I use the WenGLRenderer, I must use ParticleSystem instead of the Particle with the CanvasRenderer.
I currently use ParticleSystem to contain only one vertex, and every vertex correspond to one ParticleSystem, so there are about 800+ ParticleSystem in my scene, this can work, but consume a lot.
Obviously, I can't use "HUD" as the example in three.js source, because the sprites are all in 3D scene.
Can some one help me. Or add the sizeAttenuation to Sprite Material! Thanks!
If you want to prevent size attenuation with sprites, and you are using a perspective camera, you can set the sizeAttenuation property of your material to false:
var material = new THREE.SpriteMaterial( {
color: 0xffffff,
map: texture,
sizeAttenuation: false
} );
This feature was added in three.js r.96.
EDIT: Updated to three.js r.96
I have a problem with rendering a texture on a ShapeGeometry. First a little background on the problem.
I am attempting to render a SVG path with a texture using Three.js. I already managed to render the path properly. The problem is with the texture:
http://s14.postimage.org/9xifetrf5/scene.png
The Cube renders the texture properly, where the Shape in the corner appears to render without the texture
After a very big zoom the texture can be noticed, but it's scaled down:
http://s9.postimage.org/9fof5f3sv/close_up.png
Both objects are similar in size and both use the same material. I suspect that this is a problem with the UV mapping, but I am not sure how to calculate the UV map, any information on the subject would be great.
The code for loading the texture looks like this:
texture = t.ImageUtils.loadTexture "/images/#{pe.element.element_id}/top.png"
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(1, 1)
mat = new t.MeshBasicMaterial
map: texture
overdraw: true
side: t.DoubleSide
I'm using Revision 54 of Three.js
https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/CubeGeometry.js#L126
Check out the example for Cube Geometry, if you answer the questions posed above it would be easier but I suspect that you need to set the UV (at line 94 in example).
I made in Dice with 2 different colored materials in Blender and exported it with the Blender exporter. In my three.js code, I use JSONLoader to get the mesh and use new THREE.MeshFaceMaterial(); as material.
This loads the model just fine with the two different colored materials showing correctly. But my problem is, that I want the dice to have specular highlights on the surface. Is this even possible with exported Blender models?
I managed to get a Sphere with specular highlights when I used THREE.MeshPhongMaterial() as material for the sphere, but the sphere wasn't imported from Blender and as far as I know, I can't apply a Phong Material when I load the Mesh with JSONLoader, or is there a trick? Please remember: I got two differently colored materials on the dice, which I import from Blender in the JSON file. The dice by itself is red, but the dots should be black. So I am not talking about different colors on each side of a cube or so, but two different colors on every side of the cube. Can you help me?
Here's the code snippet:
loader.load("models/dice.js", function(geometry){
var material = new THREE.MeshFaceMaterial();
material.specular = 0xffffff;
material.shininess = 10000000000;
dice=new THREE.Mesh(geometry, material);
dice.position.set(0,-400,5);
dice.scale.set(75, 75, 75);
dice.overdraw = true;
dice.name="dice";
navscene.add(dice);
});
If it helps, I am able to create a texture out of the two materials and apply them in Blender, so that the JSONLoader loads the texture instead of the materials, but I wasn't able to achieve a specular highlight either with that.
Thx West, you pointed me into the right direction. The problem was, that Blender's standard material type is Lambert. In Blender, this Lambert material produces the desired specular highlight, but once imported to three, the effect is gone. I don't know if this is a bug, or a desired behaviour.
The solution is to set the material type in Blender to Phong material. This works even after import. My guess is, that THREE.MeshFaceMaterial is an array which contains all the loaded materials, whether they are lambert, phong or whatever. It is even possible to mix those material types. So it appears to me, that THREE.MeshFaceMaterial doesn't seem to be a "stand alone" material type at all. Correct me if I'm wrong please.
If your mesh geometry has a materials array, you can always change the array elements after you load the geometry:
geometry.materials[ i ] = new THREE.MeshPhongMaterial( ... );
You then leave the mesh's material as MeshFaceMaterial:
mesh = new THREE.mesh( geometry, new THREE.MeshFaceMaterial() );
The exporter script you are using may set geometry.materials to Lambert material by default, based on your settings. Have a look at the script source code and see if you can figure it out.