# How to decide frustum dimentions

Hello,

Im a complete newbie to threejs and general front end web developlment. Im trying to make an app that used some blocks that oscillate about their position. Its working fine except that the corner of one block becomes black which i believe is due to the block moving out of the frustum.
How do i calculate and set the optimal near, far values for a frustum?

Thanks.

This is the current condition (notice the black area at the right block)

Here is my code.

``````<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>GET REKT</title>
<style>
body {
margin: 0;
}
</style>

<body>
<script src="three.js"></script>
<script>
//   import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js";
//   import * as THREE from "three";
// Scene
const scene = new THREE.Scene();

// Axes helper
const axesHelper_ = new THREE.AxesHelper(10);

let stack = [];

function generateBox(dimentions, position, color) {
const geometry = new THREE.BoxGeometry(
dimentions[0],
dimentions[1],
dimentions[2]
);
const material = new THREE.MeshLambertMaterial({
color: this.color,
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(position[0], position[1], position[2]);
if (stack.length == 0 || stack[stack.length - 1].giveXShift) {
mesh.giveXShift = false;
} else {
mesh.giveXShift = true;
}
mesh.yIncrement = undefined;
stack.push(mesh);
console.log(
"box generated! id: " +
stack.length +
"    direction: " +
stack[stack.length - 1].giveXShift
);
}

generateBox(
(dimentions = [1, 3, 3]),
(position = [6, 2, 0]),
(color = 0xfb8e00) // orange right most
);
generateBox(
(dimentions = [3, 2, 3]),
(position = [-2, -2, 0]),
(color = 0x18c496) // beige center
);
generateBox(
(dimentions = [3, 2, 3]),
(position = [-10, -6, 0]),
(color = 0xcf4be3) // pink left
);
generateBox(
(dimentions = [3, 2, 3]),
(position = [-18, -10, 0]),
(color = 0xefff42) // yellow left most
);

// Set up lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(30, 20, 0); // x, y, z

// Camera
const width = 10;
const height = width * (window.innerHeight / window.innerWidth);
const camera = new THREE.OrthographicCamera(
width / -0.5, // left
width / 0.5, // right
height / 0.5, // top
height / -0.5, // bottom
0, // near
100 // far
);

camera.position.set(4, 4, 4);
camera.lookAt(0, 0, 0);

function animation() {
for (var i = 0; i < stack.length; i++) {
stack[i].yIncrement = !stack[i].giveXShift
? Math.sin(Date.now() / 250)
: Math.cos(Date.now() / 250);

stack[i].position.y +=
stack[i].yIncrement * (window.innerHeight / 20000);
}

renderer.render(scene, camera);
}

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
// renderer.render(scene, camera);

the camera frustum is defined by the properties `camera.near` and `camera.far`.