How to decide frustum dimentions

Questions
,
1

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)
image

Here is my code.

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

    <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);
            // scene.add(axesHelper_);

            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]);
                scene.add(mesh);
                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);
            scene.add(ambientLight);

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

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

            // Add animation
            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);

            // Add it to HTML
            document.body.appendChild(renderer.domElement);
        </script>
    </body>
</html>
2

the camera frustum is defined by the properties camera.near and camera.far.
Near is the how close the you can get with the camera and far is basicly how far you can go away with the camera.

I would suggest values like near = .1 and something that is bigger than your biggest model far = 100

You can make the frustum visible with the CameraHelper