CODEWITHSUNDEEP
three.js
Lindy
Lindy

Reputation: 297

three.js box geometry opacity

Friends, I use three.js basic material and created 2 box, I don't want to see the small box inside the bigger box, but I can see all of them now. could you help me?

   var cube1 = new THREE.Mesh(
new THREE.BoxGeometry(200, 200, 200),
new THREE.MeshBasicMaterial({
    color: 0xffffff,
    transparent: false,
    opacity: 1,
    overdraw: 0.5
}));

scene.add(cube1);

var cube2 = new THREE.Mesh(
new THREE.BoxGeometry(100, 100, 100),
new THREE.MeshBasicMaterial({
    color: 0x000000,
    transparent: false,
    opacity: 1,
    overdraw: 0.5
}));

scene.add(cube2);

enter image description here

Upvotes: 2

Views: 2961

Answers (2)

Shiva
Shiva

Reputation: 6887

Ideally this should not happen maybe you might have missed something, I here is the complete code in the snippet of what you are trying to achieve.

var camera, scene, renderer;
var mesh;

init();
animate();

function init() {

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setClearColor(0xAAAAAA);
     renderer.sortObjects = true;
    document.body.appendChild(renderer.domElement);

    //

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    scene = new THREE.Scene();

     cube1 = new THREE.Mesh(
    new THREE.BoxGeometry(200, 200, 200),
    new THREE.MeshBasicMaterial({
        color: 0xffffff,
        transparent: false,
        opacity: 1,
        overdraw: 0.5
    }));

    scene.add(cube1);


    //
     cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(100, 100, 100),
    new THREE.MeshBasicMaterial({
        color: 0x000000,
        transparent: false,
        opacity: 1,
        overdraw: 0.5
    }));

    scene.add(cube2);
    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

    requestAnimationFrame(animate);
    cube1.rotation.x += 0.005;
	cube1.rotation.y += 0.01;
    
    cube2.rotation.x += 0.010;
	cube2.rotation.y += 0.01;


    renderer.render(scene, camera);

}
html, body {
    padding:0px;
    margin:0px;
}
canvas {
    width: 100%;
    height: 100%
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>

I have also created a jsfiddle link if you prefer.Hoping it solves your problem,else you can edit the snippet to reproduce your problem.

Upvotes: 2

Lindy
Lindy

Reputation: 297

find the reason:

see through example

if I put the cube position.z < 0, I'll 'see through'.

but if you want to see through, this is a tricky.

[http://jsfiddle.net/agpcn1ej/1/][1]

seems find the answer.

that's because part of the house model position.z < 0, and camera's near < 0, maybe three.js z-buffer clear negative = 0, z-buffer determines the sheltery relation.

Upvotes: 0

Related Questions