Question

假设我在同一个地方有2个或更多个物体相交，怎么设置哪一个显示？否则它会一直闪烁。

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

尝试添加renderer.sortObjects = false; - 但没有改变

Answer 1

您所看到的效果称为z-fighting：请查看https://en.wikipedia.org/wiki/Z-fighting。

通过将相机近距离和远距离平面值分别更改为0.1和1000，可以实现更好的z缓冲精度。 1000000太大了。

类似的问题：How to correctly render coincident polygons in OpenGL (ES)和three.js - Overlapping layers flickering。

Answer 2

您可以从

更改

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

到

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

三个js对象在同一个地方相交 - 如何分辨哪一个显示

2 个答案: