Colored cubes on the outside but not on the inside

Question

Colored cubes on the outside but not on the inside

Navigation

#1 by (0 votes)

0

I made a cube, I painted the sides (left, right, up and down) and put a border, it was very similar, however, since it has no front and back, you can see what's behind the border

It seems that, looking from the outside, it is pinned as expected, but looking inside is transparent

How to solve this problem? If you have a better way of doing these window borders, is that also true?

// 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>

Note: The window has two borders, the lines separating one cube from another, and another separating 1 cube from each other

javascript three.js

asked by anonymous 18.07.2018 / 20:00

1 answer

Add color to text in javascript [duplicate] Automatic date range check

score 0 · Accepted Answer

There is a property in the object passed in MeshBasicMaterial called side , defining it with the value THREE.DoubleSide the created object will have stylization on both sides:

new THREE.MeshBasicMaterial({ color: 0x92c1b0, side: THREE.DoubleSide })

// 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, side: THREE.DoubleSide }),
        new THREE.MeshBasicMaterial({ color: 0x92c1b0, side: THREE.DoubleSide }),
        new THREE.MeshBasicMaterial({ color: 0x92c1b0, side: THREE.DoubleSide }),
        new THREE.MeshBasicMaterial({ color: 0x92c1b0, side: THREE.DoubleSide }),
    ];

    // 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>