Looks like I can't set face colors in a fiddle
I am setting face colors like this
var face = new THREE.Face3 (inx1, inx3, inx2);
face.color = color;
face.ambient = color;
face.normal.set(0,0,-1);
geometry.faces.push (face);
The face and normals are reversed because I am casting shadows and the shadows don't work if the face isn't set this way. But I set double side faces :
var pMaterial = new THREE.MeshPhongMaterial( {vertexColors: THREE.VertexColors, shininess: 100, side: THREE.DoubleSide } );
The end result is that the faces are black
fiddle
Exactly the same setup is working ok in local. (Well, I think that it is the same).
I just can't understand what is the issue...
The version of three.js that comes "bundled" in jsfiddle is a bit too old. Try including the latest.
<script src="http://threejs.org/build/three.min.js"></script>
http://jsfiddle.net/LK84y/4/
Related
I am using multiple scenes as a workaround for selective lighting. Now, I meet a difficulty in using transparent objects.
For simplity, I created a jsfiddle illustration:
[1]: https://jsfiddle.net/curisiro/w9ke75ma/2/
I have two transparent squares which are in different scenes. The problem is I can see the blue square behind the red square (figure 1) but I can NOT see the red square behind the blue square (figure 2).
With material, by using other effects, depthTest and depthWrite must be set to true as default.
Do you have any solution to solve this problem?
Edit: If you insist on using two scenes, you can fix this problem by clearing the depth between the renders:
function render() {
requestAnimationFrame(render);
this.renderer.clear();
renderer.render(scene, camera);
renderer.clearDepth(); // <--- Like this
renderer.render(scene1, camera);
}
However, this is limiting if you plan to add more complexity to the scene and need depth testing to take place between them. Alternatively, just render to the same scene:
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshStandardMaterial({color: 0x0000ff, transparent: true, opacity: 0.4});
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
let geometry1 = new THREE.BoxGeometry(1, 1, 1);
let material1 = new THREE.MeshStandardMaterial({color: 0xff0000, transparent: true, opacity: 0.4});
let mesh1 = new THREE.Mesh(geometry1, material1);
mesh1.position.z = 2;
scene.add(mesh1);
(see forked fiddle). In this case, you would handle selective lighting some other way (layers, or custom materials perhaps, depending on what you need).
A single plane with an alpha mask must cast shadows. It does but for the whole plane- not applying the alpha mask-.
Searching around I've found that adding a customDeptMaterial to the mesh should do it:
var customDepthMaterial = new THREE.MeshDepthMaterial( {
depthPacking: THREE.RGBADepthPacking,
alphaMap: alphaTex,
alphaTest: 0.5
} );
figures.customDepthMaterial = customDepthMaterial;
Not that I am very sure of what's going on exactly but I must be missing something because it keeps casting the whole plane
Please see the complete fiddle:
https://jsfiddle.net/truji7/gj7az9eo/34/
How can I cast the "alpha filtered" shadow?
PointLights are the only type of light that utilizes MeshDistanceMaterial instead of MeshDepthMaterial.
object.customDistanceMaterial = new THREE.MeshDistanceMaterial( {
alphaMap: alphaTex,
alphaTest: 0.5,
}
JSFiddle Example
I'm having an issue when rendering a white material in ThreeJS version 87.
Here are the steps to replicate:
A white PNG image that is loaded as texture
This texture is used to create a MeshBasicMaterial (passed as parameter map)
The MeshBasicMaterial is used along a plane Geometry to create a Mesh
The Mesh is added to an empty Scene and rendered on a WebGLRenderer with alpha: true and clearColor as white
The problem is that the rendered texture now has grey edges on parts that should be fully white.
This happens with any image with white edges. I've also tried many different configurations for the renderer and the material but to no avail.
I've made a very simple CodePen that replicates the behavior as simple as possible. Does anyone know how can this problem be solved?
CodePen:
https://codepen.io/ivan-i1/pen/pZxwZX
var renderer, width, height, scene, camera, dataUrl, threeTexture, geometry, material, mesh;
width = window.innerWidth;
height = window.innerHeight;
dataUrl = '//data url from image';
threeTexture = new THREE.ImageUtils.loadTexture(dataUrl);
material = new THREE.MeshBasicMaterial({
map: threeTexture,
transparent: true,
alphaTest: 0.1
});
material.needsUpdate = true;
geometry = new THREE.PlaneGeometry(5, 5);
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -5;
scene = new THREE.Scene();
scene.add(mesh);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
renderer = new THREE.WebGLRenderer({
alpha: true
});
document.body.appendChild( renderer.domElement );
renderer.setSize(width, height);
renderer.setClearColor( 0xffffff, 1 );
//renderer.render(scene, camera);
function render() {
//Finally, draw to the screen
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
Any help is truly appreciated.
ThreeJS/87
Edit:
I think I'm lacking more precision on my post.
This is the original full alpha image:
It might not show because its all white
And this is the same image with different transparencies on 4 quadrants:
This one too might not show because its all white
I got a helpful answer where I was told to make the alphaTest higher, but the problem is that doing that wipes out the transparent parts out of the images, and I need to conserve those parts.
Here is a copy of the codepen with the updated images and showing the same (but slight) grey edges:
codepen
Sorry for not being as precise the first time, any further help is even more appreciated.
Set alphaTest to 0.9.. or higher.. observe the improvement.
Your star texture has gray or black in the area outside the star, which is why you're seeing a gray halo. You can fix it by filling the image with white, (but not changing the alpha channel) in your image editing tool.
Also, you should upgrade to latest three.js (r95)
edit:
I'm not sure what your exact expectation is.. but there are many different settings that control alpha blending in THREE. There is renderer.premultipliedAlpha = true/false (defaults to true) and material.transparent = true/false; material.alphaTest is a threshold value to control at what level alpha is ignored completely. There are also the material.blending, .blendEquation .blendEquation, .blendEquationAlpha, blendDst and blendSrc. etc. etc. You probably need to read up on those.
https://threejs.org/docs/#api/materials/Material
For instance.. here is your texture with:
renderer.premultipliedAlpha = false;
notice the black border on one quadrant of your texture.
https://codepen.io/manthrax/pen/KBraNB
In three.js, I'm trying to draw a tetrahedron using THREE.TetrahedronGeometry where each face is a different color. When I use MeshNormalMaterial, each vertex has a different color but the faces are color gradients between the vertexes. This works for a BoxGeometry, but not for TetrahedronGeometry.
I tried using PhongMaterial with shading: THREE.FlatShading but that just gives me black or white faces.
I tried writing my own ShaderMaterial and in the fragment material, I color using the normal vector, but that also gets the gradient affect.
I'm sure I'm missing something obvious, but can't see it...
For versions of three.js prior to r125*, this is how you do it:
var geo = new THREE.TetrahedronGeometry(sphereRadius, 0);
for ( var i = 0; i < geo.faces.length; i ++ ) {
geo.faces[ i ].color.setHex( Math.random() * 0xffffff );
}
var material = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
shading: THREE.FlatShading,
vertexColors: THREE.VertexColors
})
var mesh = new THREE.Mesh( geo, material );
So you need THREE.FlatShader, THREE.VertexColors, and then you need to assign the face colors.
For later versions, see how to render a tetrahedron with different texture on each face (using three.js)?.
* THREE.Geometry will be removed from core with r125
I'm just starting out learning some Three.js. I have got a basic webgl example working.
But now that I want to get a similar example working within the THREE.js framework I have ran into trouble with texturing.
The texture is loaded with createjs preloader.
I have tried appending the htmlImageElement to the document to check that it has loaded before the material is created. And this appears fine. So I don't think my problem is creating the material before the texture has completed loading. As has been the problem for others.
Also I have tested a texture from my previous webgl example and this throws the same error, so I don't think the image used is invalid.
The quad in the example below will render as a blue square ok, but the moment I add my texture to the material is throws the error. GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1.
I have little experience with Three.js so I think the problem is around how I create the material, scene or geometry. Though I really have ran out of ideas.
I am using TypeScript.
private createPaper(): THREE.Mesh {
var paperGeo = new THREE.Geometry();
paperGeo.vertices.push(new THREE.Vector3(1, 1, 0));
paperGeo.vertices.push(new THREE.Vector3(3, 1, 0));
paperGeo.vertices.push(new THREE.Vector3(3, 3, 0));
paperGeo.vertices.push(new THREE.Vector3(1, 3, 0));
paperGeo.faces.push(new THREE.Face3(0,1,2));
paperGeo.faces.push(new THREE.Face3(2,3,0));
var img: HTMLImageElement = m.getAsset("paper0");
this.paperTex = new THREE.Texture(img, THREE.UVMapping,THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping,
THREE.LinearFilter, THREE.LinearFilter, THREE.RGBAFormat, THREE.UnsignedByteType, 0);
var paperMaterial = new THREE.MeshBasicMaterial({
map:this.paperTex, color: 0x0000dd, side: THREE.DoubleSide
});
var paper = new THREE.Mesh(paperGeo, paperMaterial);
return paper;
}
At a minimum, you need to specify UVs in geometry.faceVertexUvs[ 0 ]. But first, get it working with THREE.PlaneGeometry.
If you are creating a texture using texture = new THREE.Texture(), you need to set texture.needsUpdate = true; The alternative is to use THREE.ImageUtils.LoadTexture();
three.js r.61