Why three.js textured faces are looking askew when rotated? - three.js

What's wrong in the example below?
The faces are looking askew when they are not parallel to the viewport.
http://jsfiddle.net/mneja2mr/
geometry = new THREE.CubeGeometry(10, 10, 10);
texture=new THREE.ImageUtils.loadTexture(dataUrl);
material = new THREE.MeshBasicMaterial({
map: texture
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


The CanvasRenderer do not interpolate attributes correctly for perspective cameras; this break texture mapping.
If you need to render with CanvasRenderer, a quick fix is to subdivide the geometry: http://jsfiddle.net/41g0ffb3/2/
geometry = new THREE.CubeGeometry(10, 10, 10, 10, 10, 10);

Related

Three.js directional light shadow not working if object small

I am making an example of using light shadow. It works well, for example:
// Create cube and add to scene.
var geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
mesh = new THREE.Mesh(geometry, material);
mesh.position.y += 0.1;
mesh.castShadow = true;
scene.add(mesh);
Fiddle Link
However, when I reduce dimension of box from 0.1 to 0.01, the shadow disappears:
// Create cube and add to scene.
var geometry = new THREE.BoxGeometry(0.01, 0.01, 0.01);
mesh = new THREE.Mesh(geometry, material);
mesh.position.y += 0.01;
mesh.castShadow = true;
scene.add(mesh);
Fiddle Link
Can you tell me how can get shadow with small object?
Thank you.

Three.js: How to prevent parts of mesh from shape dissapearing at larger distance

I have a geometry that should be visible from a close and large distance. It is a shape geometry. The material used is the basic mesh material. The code is like this:
var shape = new THREE.Shape(geoPoints);
var geometry = new THREE.ShapeGeometry(shape);
var material = new THREE.MeshBasicMaterial({
color: 0x0000FF,
wireframe: true
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
When I use the wireframe property of the material, the geometry stays entirely visible. However, when I turn off the wireframe parts of the mesh dissapear from larger distance. This can be seen in the added figures:
Mesh basic material, wireframe off
Mesh basic material, wireframe on
How can this be solved? Many thanks in advance.

How to apply a texture to a custom geometry in Three.js

I successfully applied a texture to a cube geometry with this:
var geometry = new THREE.CubeGeometry(10, 10, 10);
var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') });
meshMaterial.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geometry, meshMaterial);
With this I get a nice textured cube like this:
Now I want to apply the same texture (512x512 jpg image) to a custom model I'm loading from an STL and this is what I get (in this case a pyramid):
This is the code:
loader.load(jsonParam.url, function (geometry) {
var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') });
meshMaterial.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geometry, meshMaterial);
mesh.castShadow = false;
mesh.receiveShadow = true;
scene.add(mesh);
});
Why the texture is not being applied and I get only what seems to be an average of the texture colors?

You need UV mapping.
You can either edit the model in modelling software to add UV coordinates or maybe generate them as in the answers posted here.
I suppose another option would be to create your own shader that maps the texture to the model surface without using UV coordinates.

How to draw a costom cube in three.js?

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);

2 of the same planes in a group, both aren't transparent

I have a plane mesh and I duplicated them and put them in a Object3d group, and they are both suppose to be transparent, but only one of them is, please help.
face = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
transparent: true,
map: THREE.ImageUtils.loadTexture('face.png')
});
face.map.magFilter = THREE.NearestFilter;
face.map.minFilter = THREE.NearestFilter;
facePlane = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), face);
faceGroup = new THREE.Object3D();
faceGroup.add(facePlane.clone());
faceGroup.add(facePlane.clone());
faceGroup.children[0].rotation.y = 90*(Math.PI/180);
scene.add(faceGroup);

Found a Solution on Three.js / WebGL - transparent planes hiding other planes behind them
adding alphaTest: 0.5 to the material.

Resources