0
I made a cube, painted the sides (left, right, top and bottom) and put a border, it was very similar, however, as it does not have the front and the back is possible to see what is behind the edge
It seems that, looking from the outside, it is pinned as expected, however, looking from the inside is transparent
How to solve this problem? If you have a better way to make these windows edges also working?
// Cena
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene.rotation.y = 0.5;
// Camera
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 7;
camera.position.x = 2;
camera.position.y = 10;
// Renderizador
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Criar janelas
function edificeWindow(config) {
// Estrutura
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
// Aparência
const material = new THREE.MeshBasicMaterial({color: config.color}); //, transparent: true, opacity: 0
// Janela
let window = new THREE.Mesh(boxGeometry, material);
window.position.x = config.x;
window.position.y = config.y;
window.position.z = config.z/4;
// Material das bordas
const lineMaterial = new THREE.LineBasicMaterial({ color: 0x92c1b0, linewidth: 2 });
// Cria a borda
const wireframe = new THREE.LineSegments(new THREE.EdgesGeometry(window.geometry), lineMaterial);
wireframe.renderOrder = 1;
window.add(wireframe);
return window;
}
// Criar bordas
function edificeBorder(config) {
// Estrutura
const boxGeometry = new THREE.BoxGeometry(config.w, config.h, 1);
// Aparência
const material = [
new THREE.MeshBasicMaterial({ color: 0x92c1b0 }),
new THREE.MeshBasicMaterial({ color: 0x92c1b0 }),
new THREE.MeshBasicMaterial({ color: 0x92c1b0 }),
new THREE.MeshBasicMaterial({ color: 0x92c1b0 }),
];
// Mesh
let mesh = new THREE.Mesh(boxGeometry, material);
mesh.position.x = config.x;
mesh.position.y = config.y;
mesh.position.z = 0.25;
// Material das bordas
const lineMaterial = new THREE.LineBasicMaterial({ color: 0x92c1b0, linewidth: 2 });
// Cria a borda
const wireframe = new THREE.LineSegments(new THREE.EdgesGeometry(mesh.geometry), lineMaterial);
wireframe.renderOrder = 1;
mesh.add(wireframe);
return mesh;
}
// Prédio
const boxGeometry = new THREE.BoxGeometry(8, 12, 1);
const material = new THREE.MeshBasicMaterial({color: 0x85b9dd});
let edifice = new THREE.Mesh(boxGeometry, material);
edifice.position.x = 2;
edifice.position.y = 10;
edifice.position.z = -0.1;
scene.add(edifice);
// Inicialização da animação
(function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
})();
/* Descrição
w = width
h = height
x = posição x
y = posição y
z = posição z
color: cor de fundo
|- 0xc2fce2 = azul
|- 0xceffbb = verde
|- 0xe4ffc6 = amarelo
|- 0xeedfd1 = vermelho
*/
// Lista de janelas
const windows = [{
x: 0,
y: 15,
z: 0,
color: 0xc2fce2
}, {
x: 1,
y: 15,
z: 0,
color: 0xceffbb
}, {
x: 2,
y: 15,
z: 1,
color: 0xe4ffc6
}, {
x: 3,
y: 15,
z: 1,
color: 0xeedfd1
}, {
x: 0,
y: 14,
z: 0,
color: 0xc2fce2
}, {
x: 1,
y: 14,
z: 0,
color: 0xeedfd1
}, {
x: 2,
y: 14,
z: 0,
color: 0xeedfd1
}, {
x: 3,
y: 14,
z: 0,
color: 0xceffbb
}, {
x: 0,
y: 13,
z: 0,
color: 0xceffbb
}, {
x: 1,
y: 13,
z: 1,
color: 0xe4ffc6
}, {
x: 2,
y: 13,
z: 0,
color: 0xc2fce2
}, {
x: 3,
y: 13,
z: 0,
color: 0xceffbb
}, {
x: 0,
y: 12,
z: 0,
color: 0xc2fce2
}, {
x: 1,
y: 12,
z: 0,
color: 0xc2fce2
}, {
x: 2,
y: 12,
z: 0,
color: 0xe4ffc6
}, {
x: 3,
y: 12,
z: 1,
color: 0xc2fce2
}, {
x: 0,
y: 11,
z: 0,
color: 0xc2fce2
}, {
x: 1,
y: 11,
z: 0,
color: 0xc2fce2
}, {
x: 2,
y: 11,
z: 1,
color: 0xeedfd1
}, {
x: 3,
y: 11,
z: 1,
color: 0xeedfd1
}, {
x: 0,
y: 10,
z: 0,
color: 0xe4ffc6
}, {
x: 1,
y: 10,
z: 1,
color: 0xeedfd1
}, {
x: 2,
y: 10,
z: 0,
color: 0xceffbb
}, {
x: 3,
y: 10,
z: 1,
color: 0xe4ffc6
}, {
x: 0,
y: 9,
z: 0,
color: 0xceffbb
}, {
x: 1,
y: 9,
z: 1,
color: 0xc2fce2
}, {
x: 2,
y: 9,
z: 0,
color: 0xceffbb
}, {
x: 3,
y: 9,
z: 0,
color: 0xc2fce2
}, {
x: 0,
y: 8,
z: 1,
color: 0xe4ffc6
}, {
x: 1,
y: 8,
z: 1,
color: 0xe4ffc6
}, {
x: 2,
y: 8,
z: 1,
color: 0xe4ffc6
}, {
x: 3,
y: 8,
z: 0,
color: 0xc2fce2
}, {
x: 0,
y: 7,
z: 1,
color: 0xeedfd1
}, {
x: 1,
y: 7,
z: 0,
color: 0xc2fce2
}, {
x: 2,
y: 7,
z: 0,
color: 0xceffbb
}, {
x: 3,
y: 7,
z: 0,
color: 0xc2fce2
}, {
x: 0,
y: 6,
z: 0,
color: 0xe4ffc6
}, {
x: 1,
y: 6,
z: 1,
color: 0xeedfd1
}, {
x: 2,
y: 6,
z: 1,
color: 0xeedfd1
}, {
x: 3,
y: 6,
z: 1,
color: 0xeedfd1
}, {
x: 0,
y: 5,
z: 0,
color: 0xe4ffc6
}, {
x: 1,
y: 5,
z: 0,
color: 0xc2fce2
}, {
x: 2,
y: 5,
z: 0,
color: 0xceffbb
}, {
x: 3,
y: 5,
z: 0,
color: 0xceffbb
}];
const border = [{
w: 1,
h: 2,
x: 0,
y: 14.5
}, {
w: 1,
h: 1,
x: 1,
y: 15
}, {
w: 1,
h: 1,
x: 2,
y: 15
}, {
w: 1,
h: 1,
x: 3,
y: 15
}, {
w: 2,
h: 1,
x: 1.5,
y: 14
}, {
w: 1,
h: 2,
x: 3,
y: 13.5
}, {
w: 1,
h: 1,
x: 0,
y: 13
}, {
w: 1,
h: 1,
x: 1,
y: 13
}, {
w: 1,
h: 1,
x: 2,
y: 13
}, {
w: 2,
h: 2,
x: 0.5,
y: 11.5
}, {
w: 1,
h: 1,
x: 2,
y: 12
}, {
w: 1,
h: 1,
x: 3,
y: 12
}, {
w: 2,
h: 1,
x: 2.5,
y: 11
}, {
w: 1,
h: 1,
x: 0,
y: 10
}, {
w: 1,
h: 1,
x: 1,
y: 10
}, {
w: 1,
h: 2,
x: 2,
y: 9.5
}, {
w: 1,
h: 1,
x: 3,
y: 10
}, {
w: 1,
h: 1,
x: 0,
y: 9
}, {
w: 1,
h: 1,
x: 1,
y: 9
}, {
w: 1,
h: 3,
x: 3,
y: 8
}, {
w: 3,
h: 1,
x: 1,
y: 8
}, {
w: 1,
h: 1,
x: 0,
y: 7
}, {
w: 1,
h: 1,
x: 1,
y: 7
}, {
w: 1,
h: 1,
x: 2,
y: 7
}, {
w: 1,
h: 2,
x: 0,
y: 5.5
}, {
w: 1,
h: 1,
x: 1,
y: 6
}, {
w: 1,
h: 1,
x: 2,
y: 6
}, {
w: 1,
h: 1,
x: 3,
y: 6
}, {
w: 1,
h: 1,
x: 1,
y: 5
}, {
w: 1,
h: 1,
x: 2,
y: 5
}, {
w: 1,
h: 1,
x: 3,
y: 5
}];
// Adiciona as janelas na cena
for(const config of windows) {
scene.add(edificeWindow(config));
}
// Adiciona as bordas na cena
for(const config of border) {
scene.add(edificeBorder(config));
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>Observing: the window has two edges, lines separating one cube from the other, and another separating 1 or more cubes from each other