CODEWITHSUNDEEP
javascriptthree.js
Mayank Metha
Mayank Metha

Reputation: 172

How to remove transparency here

Rendered output

How to i remove the clipped objects that have become transparent or prevent the object below it from being shown. It would be better if it looks like a real world solid cubes. This is written in javascript with three.js. HTML and CSS have no faults. Only the rendering shows issue here.

var scene, camera, renderer, cube;

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var SPEED = 0.001;

function init() {
    scene = new THREE.Scene();
    initLight();
    drawScene();
    initCamera();
    initRenderer();
    document.body.appendChild(renderer.domElement);
}

function initLight() {
    const light = new THREE.PointLight(0xFFFFFF);
    light.position.x = 50;
    light.position.y = 50;
    light.position.z = 130;
    scene.add(light);
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
    camera.position.set(1, 3, 5);
    camera.lookAt(scene.position);
}

function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(WIDTH, HEIGHT);
    renderer.sortObjects = false;
}

function drawScene() {
    var material = new THREE.MeshLambertMaterial({ color: 0xFF6600 });
    var shape = new THREE.CubeGeometry(1, 1, 1);
    cube = new THREE.Group();
    for (var a = -10; a <= 10; a = a + 2) {
        for (var b = -10; b <= 10; b = b + 2) {
            for (var c = -10; c <= 10; c = c + 2) {
                var part = new THREE.Mesh(shape, material);
                part.position.set(a, b, c);
                cube.add(part);
            }
        }
    }
    scene.add(cube);
}
function rotateCube() {
    cube.rotation.x -= SPEED;
    cube.rotation.y -= SPEED;
    cube.rotation.z -= SPEED;
}

function render() {
    requestAnimationFrame(render);
    rotateCube();
    renderer.render(scene, camera);
}

init();
render();
<script src="https://threejs.org/build/three.js"></script>

Upvotes: 1

Views: 152

Answers (1)

manthrax
manthrax

Reputation: 5036

I changed the PerspectiveCamera near plane closer, to 0.01 instead of 1, and added the includes to make your snippet run.

The "transparency" you're seeing are the cubes clipping against the camera near plane. By pulling the plane closer to the camera, you're making the viewport smaller in the world, so it more easily fits in between the cubes.

Another thing is backface culling.. that makes cubes invisible if they are viewed from inside. You can disable backface culling via material.side = THREE.DoubleSide, at the cost of potentially rendering twice as much geometry.

var scene, camera, renderer, cube;

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var SPEED = 0.001;

function init() {
    scene = new THREE.Scene();
    initLight();
    drawScene();
    initCamera();
    initRenderer();
    document.body.appendChild(renderer.domElement);
}

function initLight() {
    const light = new THREE.PointLight(0xFFFFFF);
    light.position.x = 50;
    light.position.y = 50;
    light.position.z = 130;
    scene.add(light);
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 0.01, 10);
    camera.position.set(1, 3, 5);
    camera.lookAt(scene.position);
}

function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(WIDTH, HEIGHT);
    renderer.sortObjects = false;
}

function drawScene() {
    var material = new THREE.MeshLambertMaterial({ color: 0xFF6600, side: THREE.DoubleSide});
    var shape = new THREE.CubeGeometry(1, 1, 1);
    cube = new THREE.Group();
    for (var a = -10; a <= 10; a = a + 2) {
        for (var b = -10; b <= 10; b = b + 2) {
            for (var c = -10; c <= 10; c = c + 2) {
                var part = new THREE.Mesh(shape, material);
                part.position.set(a, b, c);
                cube.add(part);
            }
        }
    }
    scene.add(cube);
}
function rotateCube() {
    cube.rotation.x -= SPEED;
    cube.rotation.y -= SPEED;
    cube.rotation.z -= SPEED;
}

function render() {
    requestAnimationFrame(render);
    rotateCube();
    renderer.render(scene, camera);
}

init();
render();
<script src="https://threejs.org/build/three.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Upvotes: 2

Related Questions