I am trying to create chainlink surface. I have 2 textures; a standard map which has the metallic look of the metal links with a white background (diffuse):
I also have an alpha map:
I am trying to apply both of these to a MeshBasicMaterial without luck:
var chainlinkMask = THREE.ImageUtils.loadTexture('textures/chainlink_Large-Panels_mask.png');
chainlinkMask.wrapS = THREE.RepeatWrapping;
chainlinkMask.wrapT = THREE.RepeatWrapping;
chainlinkMask.repeat.set( 2, 2 );
var chainlinkDiffuse = THREE.ImageUtils.loadTexture('textures/chainlink_Large-Panels_Diffuse.png');
chainlinkDiffuse.wrapS = THREE.RepeatWrapping;
chainlinkDiffuse.wrapT = THREE.RepeatWrapping;
chainlinkDiffuse.repeat.set( 2, 2 );
material.map = chainlinkMask;
material.alphaMap = chainlinkDiffuse;
material.transparency = true;
material.side = THREE.DoubleSide;
This gives me the following:
As you can see, the alpha map isn't being applied.
Why not?
Any help appreciated.
Try setting the transparent parameter to true instead of transparency
material.transparent = true;
If you are using an alpha map, use one of these two patterns when defining your material:
alphaMap: texture,
transparent: true,
or
alphaMap: texture,
alphaTest: 0.5, // if transparent is false
transparent: false,
Use the latter if possible, and avoid artifacts that can occur when transparent is true.
three.js r.85
directly use material.transparent will cause rendering problem, for example. you have 2 corssing plane with each one applied material.transparent = true, and material.side = DoubleSide. rotate it you will see rendering problem.
just use the solution #WestLangley mentioned above.
Related
Disclaimer: I am new to three.js and the world of 3D in general. I also didn't want to clutter the question with unnecessary code, so if there is some that would benefit, please let me know.
I have a model with 3 spotlights, two from the sides that render shadow, and one from the front (same position as the camera) that shines light on the object.
When I was messing about with the side spotlights, both had shadowCameraVisible set to true for debugging purposes, and all was well.
As soon as I set shadowCameraVisible to false on both of them, the shadows no longer render correctly.
The object in quesion contains two MeshLambertMaterials defined with side as THREE.DoubleSide, and the broken shadow resembles the object as it would be displayed if side was set to THREE.FrontSide.
Can anyone think of any reason why the shadow would be broken in this way? And why does the value of shadowCameraVisible change things?
Update:
I have now read that the material.side parameter is ignored for shadows and therefore this is what might be causing it. But this does still not explain why material.side appears to be not ignored when shadowCameraVisible=true!
Update 2:
Here's some code which might be relevant.
The 3D model has two faces which are defined as follows:
var material1 = new THREE.MeshLambertMaterial({
color: 0xff0000,
side: THREE.DoubleSide,
shading: THREE.FlatShading,
colors: THREE.FaceColors,
vertexColors: THREE.FaceColors,
blending: THREE.NormalBlending
});
var material2 = new THREE.MeshLambertMaterial({
image: 'miscimage.jpg',
side: THREE.DoubleSide,
shading: THREE.FlatShading,
colors: THREE.FaceColors,
vertexColors: THREE.FaceColors,
blending: THREE.NormalBlending
});
var materials = [materials1, materials2];
The mesh is defined as:
var mesh = new THREE.Mesh(
geometry,
new THREE.MeshFaceMaterial(materials)
);
mesh.receiveShadow = true;
mesh.castShadow = true;
And the two spotlights:
var spotlight1 = new THREE.SpotLight(0xffffff);
spotlight1.position.set(-160, 300, -60);
spotlight1.shadowDarkness = 0.4;
spotlight1.intensity = 2;
spotlight1.castShadow = true;
scene.add(spotlight1);
var spotlight2 = new THREE.SpotLight(0xffffff);
spotlight2.position.set(160, 300, -60);
spotlight2.shadowDarkness = 0.4;
spotlight2.intensity = 2;
spotlight2.castShadow = true;
scene.add(spotlight2);
As mentioned, when one of the spotlights has shadowCameraVisible=true, then the shadows look like the first image, and when it is not set (i.e. to the default of false) you get the shadows in the second image. This makes it look as though shadowCameraVisible=true causes the shadow to honour the object's side setting of THREE.DoubleSide whereas having shadowCameraVisible=false, does not.
Update 3:
In fact, if I leave one of the cameras with shadowCameraVisible=true, and then go into three.js itself, and within the THREE.CameraHelper function and commented out all calls to addLine, the shadows work fine and you can't see the camera (of course). Further investigation is needed to find out just what within THREE.CameraHelper is allowing the shadows to work.
this is the link of my work : maison.whiteplay.fr
What i am trying to do is a 3D PacMan, but look at th code, i'm using mesh to build my level, except for bubbles (yellow circle), that you need to eat to win.
They are all different objects, but because they are a lot, it's lagging, can i use the same technologie (mesh i think) to the bubbles ? If yes, how ?
code:
var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 );
var bille = function(x,z){
this.bille = new THREE.Mesh(
geometrySphere,
new THREE.MeshBasicMaterial( {color: 0xffff00} )
);
this.bille.position.x = (x-15.5)*100; this.bille.position.y = 100;
this.bille.position.z = (z-15.5)*100; scene.add(this.bille);
}
Thank your for reading, and if you have any suggestions about my code, don't hesistate :D
You can also reuse your material instead of making a new instance all the time:
var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 );
var billeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var bille = function(x,z){
this.bille = new THREE.Mesh(
geometrySphere,
billeMaterial
);
this.bille.position.x = (x-15.5)*100; this.bille.position.y = 100;
this.bille.position.z = (z-15.5)*100; scene.add(this.bille);
}
Reusing materials has good influence on performance.
How do you duplicate your meshes/objects?
You're code is almost right.
In your specific case, with N equal balls, you must have N mesh but just one material.
In this way, if you want to colorize (just for example) only one ball, you have to apply it one new material, otherwise you will apply new color to all the balls.
In your case lagging may be due to the sphere construction.
You clearly copy and paste from the documentation without read it before.
var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 );
Where, as explained in the documentation:
radius — sphere radius. Default is 50.
widthSegments — number of horizontal segments. Minimum value is 3, and the default is 8.
heightSegments — number of vertical segments. Minimum value is 2, and the default is 6.
32 * 32 is too much for your small-monocolor bubbles, doesn't have sense.
The higher are this values, the higher is the complexity for draw it for each frame.
I suggest you to create sphere with a minor number of vertical/horizontal segments (8*8 may be ok).
Take a look at this demo.
I have a system of tubes. More precisely, I create a tubes from this code
tube_color - obviously, color of tube,
spline_points - huge number of THREE.Vector3 objects,
segments, radiusSegments are just numbers
var material = new THREE.MeshLambertMaterial( { color: tube_color, shading: THREE.SmoothShading } );
var spline = new THREE.SplineCurve3(spline_points);
var tube = new THREE.TubeGeometry(spline, segments, 10, radiusSegments, false, false);
var tubeMesh = new THREE.Mesh(tube, material);
scene.add(tubeMesh);
This code creates one particular mesh object in space. For each mesh I can have an array of Vector3's by using myMesh.geometry.vertices.
The problem is: I have the point in 3d space. Around this point I create Cube, which does intersect with tubes. For example, this cube can be created like this
var cube = new THREE.CubeGeometry(xSize,ySize,zSize, 5, 5, 5);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
opacity: 1,
wireframe: true,
transparent: false
});
var selectionMesh = new THREE.Mesh(cube, material);
scene.add(selectionMesh);
Is it possible at least to find objects(meshes) that have intersection with by cubic area? I know that in scene object I have all meshes, and I can iterate over them, get vertices, iterate over them with a condition if there is at least one its point is in cubic area. But I believe... I hope there is a method/algorithm/magic much more simple then this...
As #WestLangley recommended the solution of this problem was to build octree.
octree=new THREE.Octree({
undeferred:false,
depthMax:Infinity,
objectsThreshold:8,
overlapPct:0.15
} );
and search it
var meshesSearch=octree.search( rayCaster.ray.origin, radiusSphere, true, rayCaster.ray.direction );
However, to have specific intersection we need to provide the recursive flag
raycaster.intersectOctreeObjects( objects, true )
I ended up with more complicated processing of my specific case however this was enough to solve the problem at that moment.
I am having a strange problem when using pngs as a texture in three.js. The pngs get strange borders at the area between visible and transparent. I allready tried to play around with alphatest value but then sometimes the image disapears completly in areas where are really thin 1px lines. Is there a solution how to solve this?
var explosionTexture = new THREE.ImageUtils.loadTexture( 'explosion.png' );
boomer = new TextureAnimator( explosionTexture, 4, 4, 16, 55 ); // texture, #horiz, #vert, #total, duration.
var explosionMaterial = new THREE.MeshBasicMaterial( { map: explosionTexture } );
explosionMaterial.transparent = true;
var cube2Geometry = new THREE.PlaneGeometry( 64, 64, 1, 1 );
cube2 = new THREE.Mesh( cube2Geometry, explosionMaterial );
cube2.position.set(100,26,0);
scene.add(cube2);
// renderer
//renderer = new THREE.WebGLRenderer( { antialias: false, premultipliedAlpha: true } );
renderer = new THREE.WebGLRenderer( { antialias: false } );
Just try this:
explosionTexture.anisotropy = 0;
explosionTexture.magFilter = THREE.NearestFilter;
explosionTexture.minFilter = THREE.NearestFilter;
Also you should not use antialaising when constructing the renderer:
renderer = new THREE.WebGLRenderer({antialias: false});
Did this to preview minecraft texture packs, works great :-)
Use material blending, the following configuration worked for me:
material.blending = THREE.CustomBlending
material.blendSrc = THREE.OneFactor
material.blendDst = THREE.OneMinusSrcAlphaFactor
See this example:
http://threejs.org/examples/#webgl_materials_blending_custom
Congratulations, you've run directly into the Texel-to-Pixel-mapping-trap. :)
This should help you out of there, although it's not WebGL the basics still apply.
Ok, so I tried all the solutions on this page. They all failed.
What worked for me was to use the correct Texture.wrapS (horizontal wrapping) and Texture.wrapT (vertical wrapping) for the sprite texture.
I personally was finding this ugly edge on the top of my sprite. I just had to make sure my Texture.wrapT setting was THREE.ClampToEdgeWrapping instead of THREE.RepeatWrapping.
Solved the issue perfectly without messing with alpha test values, texture filters, vertices or antialiasing.
i solved it like this:
var c2GVertices = cube2Geometry.vertices;
for (var i = 0; i < c2GVertices.length; i++) {
c2GVertices[i].x = c2GVertices[i].x - 0.5;
c2GVertices[i].y = c2GVertices[i].y - 0.5;
}
is there an easier way to move all vertices a half pixel?
I've made a circle as follows:
material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
arcShape = new THREE.Shape();
arcShape.absarc( 0, 0, 20, 0, -Math.PI*2, true );
geometry = arcShape.makeGeometry();
circle = new THREE.Mesh(geometry, material);
scene.add(circle);
Like that, it is visible. But rotate it, and it disappears.
shadow.rotation.x = Math.PI / 2;
I've seen several other posts where this problem has not been solved. (So unless someone has a solution, I'll resort to making a flat cylinder instead. It's just a niggling problem).
I've set mesh.doubleSided = true and mesh.flipSided = false. I've also tried all 4 combinations of toggling the renderer's depthTest and the material's depthWrite properties.
Is there anything else I could try? If not, I'm guessing the code is sensitive to the order of some of my calls, in which case, I've had a long day so I'll stick with the cylinder!!
material.side = THREE.DoubleSide;