Why is my model getting clipped when viewing it with an orthographic camera?

Questions
1

Hello, I have narrowed this down to some simple code. Basically, the camera is clipping parts of my object as if I’m zoomed into the object. I’d create a jsfiddle for this, but it doesn’t seem to be working…

Code:

import { ExtrudeGeometry, Mesh, MeshBasicMaterial, OrthographicCamera, Shape } from "three";
import { Scene, WebGLRenderer } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export default class BaseScene {

    renderer: WebGLRenderer = new WebGLRenderer({ 
        powerPreference: "high-performance",
        alpha: true,
    });
    scene: Scene = new Scene();
    camera: OrthographicCamera;
   
    constructor() {
        this.camera = new OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0, 1000 );
        this.camera.position.set(10, 10, 10);
        this.camera.zoom = 2;
        this.camera.updateProjectionMatrix();
        
        new OrbitControls( this.camera, this.renderer.domElement );
        this.renderer.setSize(window.innerWidth, window.innerHeight);

        var outterRadius: number = 100;
        var innerRadius: number = outterRadius * 0.866025404;
        var hexShape: Shape = new Shape();
        var hexPoints = [
            [0, outterRadius],
            [innerRadius, 0.5 * outterRadius],
            [innerRadius, -0.5 * outterRadius],
            [0, -outterRadius],
            [-innerRadius, -0.5 * outterRadius],
            [-innerRadius, 0.5 * outterRadius]
        ];

       for (var i = 1; i < 6; i++) {
            hexShape.lineTo(hexPoints[i][0], hexPoints[i][1]);
        }
        hexShape.lineTo(hexPoints[0][0], hexPoints[0][1]);

        const mesh = new Mesh(new ExtrudeGeometry(hexShape, {
            depth: 5,
            steps: 1,
            bevelEnabled: true,
            bevelSize: 0.2,
            bevelOffset: -.2,
            bevelThickness: 0,
        }), [new MeshBasicMaterial({color: "#43a827" }), new MeshBasicMaterial({color: "#753713"})]);
        mesh.position.set(0, 0, 0);
        this.scene.add(mesh);
        this.camera.lookAt(mesh.position);

        document.body.appendChild(this.renderer.domElement);

        this.animate();
    }

    animate() {
        requestAnimationFrame(() => this.animate());
        this.renderer.render(this.scene, this.camera)
    }
}

Result:

image
image630×555 7.76 KB

2

@Jacob_Caron what did you do to resolve this?

3

I think it’s about near and far props

4

i could solve the issue, by setting the Z position of the camera for some reason that works.

Lets take this example threejs-scroll-animation-demo/main.js at 21f4c09c940fac0013ac1f27ee7379a1bf3ae0c8 · fireship-io/threejs-scroll-animation-demo · GitHub and change it to an OrthographicCamera.

const camera = new THREE.OrthographicCamera(
window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.01, 3000 );

camera.position.setZ(10) // this will clip things.

as i set it to

camera.position.setZ(300)

no more clipping.

=> So try to change the camera position very far away and zoom in later with a timer, thats my current workarround.

If somebody could provide a before-after snippet in codesandbox e. g. would be great

1 Like
5

This solution does work! Just setting the camera.position.z to something like 300 made it work as I expected :+1:

6

It works because, you would want to have your objects near the center of the camera’s view frustum, or else you can say, away from near and far planes of the camera view frustum.

1 Like
7

camera.near = -3000
camera.far = 3000
camera.updateProjectionMatrix();

should also work.