CODEWITHSUNDEEP
javascriptthree.js
Влад Киевский
Влад Киевский

Reputation: 75

Three js objects intersects at same place - how to tell which one to show

Lets say I have 2 or more object intersects at same place, how can one set which one to show? Otherwise its flickering all the time.

http://jsfiddle.net/GYQ5v/187/

var scale = 1;

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 100, 1000000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100 * scale;
var renderer = new THREE.WebGLRenderer({
    antialias: false
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.AmbientLight(0xFFFFFF);
scene.add(light);

var material = new THREE.MeshBasicMaterial({
    transparent: false,
    side: THREE.DoubleSide,
    fog: false,
    color: 0xFFFF00,
    opacity: 1.0
});

var cubeGeometry = new THREE.PlaneGeometry(50 * scale, 50 * scale, 1, 1);
var cubeMesh = new THREE.Mesh(cubeGeometry, material);
cubeMesh.position.set(50, 0, 0);
scene.add(cubeMesh);

var cubeGeometry = new THREE.PlaneGeometry(50 * scale, 50 * scale, 1, 1);
var cubeMesh = new THREE.Mesh(cubeGeometry, material);
cubeMesh.position.set(-50, 0, 0);
scene.add(cubeMesh);

var cubeGeometry = new THREE.PlaneGeometry(50 * scale, 50 * scale, 1, 1);
var cubeMesh = new THREE.Mesh(cubeGeometry, material);
cubeMesh.position.set(0, -50, 0);
scene.add(cubeMesh);

var cubeGeometry = new THREE.PlaneGeometry(50 * scale, 50 * scale, 1, 1);
var cubeMesh = new THREE.Mesh(cubeGeometry, material);
cubeMesh.position.set(0, 50, 0);
scene.add(cubeMesh);

var material = new THREE.MeshBasicMaterial({
    transparent: false,
    side: THREE.DoubleSide,
    fog: false,
    color: 0xFF0000,
    opacity: 1.0
});

var cubeGeometry = new THREE.PlaneGeometry(100 * scale, 100 * scale, 1, 1);
var cubeMesh = new THREE.Mesh(cubeGeometry, material);
scene.add(cubeMesh);

function render() {
    var time = Date.now() * 0.5;
    camera.position.x = Math.sin(time / 1000) * 150 * scale;
    camera.position.y = 0;
    camera.position.z = Math.cos(time / 1000) * 150 * scale;
    camera.lookAt(scene.position);
    renderer.render(scene, camera);  
    requestAnimationFrame(render);
}
render();

Tried to add renderer.sortObjects = false; - but nothing changed

Upvotes: 1

Views: 1213

Answers (2)

gaitat
gaitat

Reputation: 12632

The effect you are seeing is called z-fighting: take a look at https://en.wikipedia.org/wiki/Z-fighting.

Better z-buffer precision can be achieved by changing your camera near and far plane values to 0.1 and 1000 respectively. 1000000 is toooooo big.

Similar questions: How to correctly render coincident polygons in OpenGL (ES) and three.js - Overlapping layers flickering.

Upvotes: 1

Stanislav Baturin
Stanislav Baturin

Reputation: 319

You can to change from 

cubeMesh.position.set(50, 0, 0);

to

cubeMesh.position.set(50, 0, 1);

Upvotes: 0

Related Questions