Good afternoon!
I'm starting studies with THREE JS.
I hope I'm not doing anything wrong.
But come on, the question is this.
I created a custom geometry.
Adding vertices and then adding faces to the geometry.
And then a triangle with two faces was created.
But when I put a light with SpotLight, the shadow of the triangle gets incomplete.
Someone please explain this to me?
printScreen -> https://i.stack.imgur.com/lxXbz.jpg
var trianguloGeometry = new THREE.Geometry();
trianguloGeometry.vertices.push(new THREE.Vector3(0,0,0));
trianguloGeometry.vertices.push(new THREE.Vector3(0,50,0));
trianguloGeometry.vertices.push(new THREE.Vector3(50,0,0));
trianguloGeometry.vertices.push(new THREE.Vector3(0,0,0));
trianguloGeometry.vertices.push(new THREE.Vector3(0,50,0));
trianguloGeometry.vertices.push(new THREE.Vector3(-50,0,0));
trianguloGeometry.faces.push(new THREE.Face3(0,1,2));
trianguloGeometry.faces.push(new THREE.Face3(3,4,5));
trianguloGeometry.computeFaceNormals();
trianguloGeometry.computeFlatVertexNormals ();
var triangulo = new THREE.Mesh(
trianguloGeometry,
new THREE.MeshLambertMaterial({
color:'red',
side:THREE.DoubleSide,
vertexColors:THREE.FaceColors
}),
);
scene.add(triangulo);
triangulo.castShadow = true;
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).
Three.js is awesome! I'm having trouble adding a static background scene to earth.html demo. I've tried using CSS, this code
var texture = new THREE.ImageUtils.loadTexture( 'rainier.jpg' );
var backgroundMesh = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({ map: texture
}));
backgroundMesh .material.depthTest - false;
backgroundMesh .material.depthWrite - false;
//Background Scene
var backgroundScene - new THREE.Scene();
var backgroundCamera - new THREE.Camera();
backgroundScene .add(backgroundCamera );
backgroundScene .add(backgroundMesh );
to no avail! So far I've changed the texture of the sphere successfully. When I add the code above it displays the background and no sphere? This is my first experience with THREE.js. I started with modifying a demo to get the feel for the syntax and operations. Any help would be greatly appreciated!
I tried to add a Points Object and a Mesh Object into the same scene. But once I add the Mesh the Points disappear. When I remove the Mesh the Points appear again. Is it possible with three.js to have both in the scene at the same time? I'm using r76 now. It worked before with Three.ParticleSystem in threejs r63. Is this a bug or missed I something conceptual between r63 and r76?
Same behaviour seems to be with Three.Line and Three.Points which I can't render together either.
Any ideas about that? Thank you in advance.
Well, I'll bite (you don't have any code) -- what's wrong with
// - - - - points
geometry = new THREE.Geometry();
material = new THREE.PointsMaterial( { size:.1 } );
for (i1=1; i1<=10; i1+=1) {
var x1 = Math.random()*2-1;
var y1 = Math.random()*2-1;
var z1 = Math.random()*2-1;
geometry.vertices.push(new THREE.Vector3(x1,y1,z1));
}
object3d = new THREE.Points(geometry, material);
scene.add(object3d);
// - - - - line
geometry = new THREE.Geometry();
geometry.vertices = [ new THREE.Vector3(-1,1,0), new THREE.Vector3(0,-1,0), new THREE.Vector3(1,1,0) ];
material = new THREE.LineBasicMaterial( { color:0xffffff } );
object3d = new THREE.Line(geometry, material);
scene.add(object3d);
// - - - - sphere
geometry = new THREE.SphereGeometry(.5);
material = new THREE.MeshPhongMaterial( {color:0xffffff} );
mesh = new THREE.Mesh(geometry, material);
mesh.scale.x = 2;
mesh.position.set(0, 1, 0);
scene.add(mesh);
Is there something as Stroke to draw the edges of a mesh?
I would like to have my object to look like this:
EDIT: This answer was outdated, and has been updated.
If you want to render only the edges of your mesh, you can use EdgesGeometry.
var geometry = new THREE.EdgesGeometry( mesh.geometry );
var material = new THREE.LineBasicMaterial( { color: 0xffffff } );
var wireframe = new THREE.LineSegments( geometry, material );
scene.add( wireframe );
You can also use THREE.WireframeGeometry.
For an example showing how to render both edges and faces, see this stackoverflow answer.
three.js r.94
I just want to draw one cube, such as one building(I got the places on the ground which is consisted of four points),and I also knew the height of the building. So how to draw? Thanks very much.
This is pretty straightforward:
http://threejs.org/docs/#Reference/Extras.Geometries/CubeGeometry
var building = new THREE.CubeGeometry(width, height, depth, 1, 1, 1);
var material = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
var mesh = new THREE.Mesh(building, material);
scene.add(mesh);