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
Related
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 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
I'm using BufferGeometry to draw triangles.
I can use a mesh geometry, specifiyng 3 index-attribute for every triangle. I'm using a basic material without wireframe. I suposse I'll can use raycast.
Also I have seen the linesegments approach for wireframe. Interesting.
Ok, my problem... I'd like to see my triangles as a wireframe and also I need raycast. So .... the solution is to create my own shader, isn't it ?
Thanks
you dont have to create a custom shader you can have a mesh with wireframe material, and the ray should still "hit" the object
var mesh = new THREE.Mesh(geometry,new THREE.MeshBasicMaterial({wireframe : true}));
if it for some reason does not hit or you want to LineSegments object you can keep track of all transformations that affected the object, and apply them onto a mesh you wont add to scene
var segmentObject = new THREE.LineSegments(geometry,lineMaterial);
scene.add(segmentObject);
var meshNotInScene = new THREE.Mesh(geometry,dummyMaterial);
and you will use the mesh object to determine if raycast hit the object
this way you can have a different hitbox for an object for example if you have a flying donut by pairing it with a circle mesh you can select it even if you click in its hole etc...
keep in mind that materials have sides and if you dont care about which side is which set "side" to THREE.DoubleSide
Is there a simple way in three.js to specify a color for "dark"? That is, in a scene with light, the colors of an object fade to black. What I want is for them to fade to a different color. I want to specify what color "unlit" is. I'm using a MeshPhongMaterial in this particular case.
Answer: There is no way to do this in the current three.js version. I've selected an answer with possible workarounds.
It is called ambient light.
scene.add( new THREE.AmbientLight( 0x222222 ) );
The argument to the constructor is the color of the light.
When using MeshPhongMaterial, it is also advisable to set the ambient reflectance of the material to match the material's diffuse reflectance, also know as the color.
material.color.set( 0xff0000 );
material.ambient.set( 0xff0000 );
If you follow this advice, your scene should look pretty good.
three.js r.64
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).