I'm having a strange visual effect (don't know how to call it) in my project. I've made a cube and made it possible to rotate. Below I got the code which creates the cube.
Also see the image. If I upscale my segmentsWidth
and segmentsHeight
it's kinda gonna look better on the side, but on the front the lines will not be straight. The image is made with the code shown below. What I would like to see is the lines at the front straight and side ways it should not have a V in it.
If I have the overdraw = false
than I will see white lines which I don't want but don't got a messy picture. But when I set it to true I will have a messy picture.
Is this possible?
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 250;
scene = new THREE.Scene();
// Cube
var geometry = new THREE.CubeGeometry( 100, 200, 8, 1, 1 );
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial([
new THREE.MeshBasicMaterial({ color: 0xefefef }),
new THREE.MeshBasicMaterial({ color: 0xefefef }),
new THREE.MeshBasicMaterial({ color: 0xefefef }),
new THREE.MeshBasicMaterial({ color: 0xefefef }),
new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('img/door.jpg'),
overdraw: false
}),
new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('img/door.jpg'),
overdraw: false
})
]));
cube.position.y = 150;
scene.add( cube );
This is a well-known issue with CanvasRenderer
.
An excellent description of the issue can be found in the last half of this post.
Your best solution is to increase the tessellation of your geometry.
var geometry = new THREE.BoxGeometry( 100, 200, 8, 2, 2, 2 );
P.S. Notice there are 6, not 5, args to this constructor.
EDIT: updated for three.js r.67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With