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: