Fixing perspective clipping in Three.js

In my Three.js project, I have a plane inside a sphere that I am applying a shader to in order to achieve certain visual effects on the sphere. To ensure that the plane is always facing the camera, I am using the lookAt method. However, I have noticed that when the camera gets too close to the sphere, the plane appears to shrink into the sphere. I believe this is due to the perspective nature of the camera, causing its rays to no longer align with the edge of the plane.

For a visual representation of this issue, you can view this image: Perspective clipping

You can also see a demonstration of this problem in action in this JSFiddle: https://jsfiddle.net/k8tc8ex6/1/

While I understand why this issue is happening, I am seeking possible solutions. My goal is to ensure that after rendering, the edge of the plane will always appear to touch the edge of the sphere.

Thank you in advance for any help!

javascriptthree.jsperspectivecamera

Answer №1

It seems that your goal is to seamlessly fit the middle section of a sphere into a frustum of a perspective camera. However, achieving this perfect fit is not possible with a perspective view. As you have demonstrated, the plane will either extend beyond the screen boundaries or leave gaps between the edges of the plane and the screen.

If you are determined to achieve this perfect fit, you have two options:

1. Switch to an orthographic camera. 2. Stick to a perspective camera, set the FOV to near 0, and adjust the distance to the far plane so that the perspective camera behaves more like an orthographic camera.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent the selection of Single Origin and House Blend options once the user opts for Espresso

<td> <select class="type"> <option value="Espresso">Espresso</option> <option value="" class="">Cappuccino</option> <opti ...

javascripthtmlweb

Ensuring the accurate usage of key-value pairs in a returned object through type-checking

After generating a type definition for possible response bodies, I am looking to create a function that returns objects shaped as { code, body }, which are validated against the typing provided. My current solution looks like this: type Codes<Bodies> ...

javascripttypescripttypes

What is the mechanism by which sending data directly to the response object displays content to the user?

What exactly does the .pipe(res) segment of the code snippet from that article do at the end of the stream? fs.createReadStream(filePath).pipe(brotli()).pipe(res) I have a basic understanding that the first part reads the file and the second compresses i ...

javascriptnode.jsfilestream

Using JavaScript to open links in a new tab with the target

document.getElementById("mahacareer").onclick = function () { window.open("http://www.mahacareermitra.in", '_blank'); }; <a href="" id="mahacareer">Access the portal</a> Hi there, I am looking to have the link above open in a new tab ...

javascriptjqueryhtmltwitter-bootstrapcss

Is it possible to convert an object and/or a nested array with objects into a JSON string without relying on JSON.stringify?

Struggling to generate a correct JSON string from an object without relying on JSON.stringify(). Presenting my current implementation below - var my_json_encode = function(input) { if(typeof(input) === "string"){ return '"'+input+&apo ...

javascriptarraysjsonrecursionjavascript-objects

The issue with Extjs store.proxy.extraParams being undefined appears to only occur in Internet Explorer

I currently have an ExtJs store set up with specific configurations. var fieldsStore = new Ext.create('Ext.data.Store', { model : 'FieldsModel', proxy : { type : 'ajax', url : 'queryBuilder_getQueryDetails', ...

javascriptextjsextjs4

Enhancing the smoothness of parallax scrolling

My header is going to be twice the height of the viewport. I added a simple parallax effect so that when you scroll down, it reveals the content below. However, I'm experiencing flickering in the content as I scroll, possibly due to the CSS style adju ...

javascriptjqueryhtmlcss

When using iOS, the video compressing process stops automatically if the screen is no longer active while the file input

I am working on a web application that includes a file upload feature for large videos, typically 30 minutes or longer in duration. When a user on an iOS device selects a video to upload, the operating system will automatically compress it before triggerin ...

javascripthtmliosiphone

What is the best way to adjust image size based on different screen sizes while ensuring the buttons at the top remain responsive

How can I make the image and image select and delete buttons responsive? I am looking to eliminate the gap after the delete button. Any suggestions are welcomed. <div class="container mt-0"> <div class="row"> ...

javascripthtmlcsstwitter-bootstrap

Unable to load the JSON texture file

I recently exported a 3D model to JS from Blender, but I'm encountering an issue with the texture not showing up properly. Even when I remove the texture file, the browser generates an error saying that 'map.png' cannot be found. This indica ...

javascriptthree.js

Creating dynamic dropdowns with Ajax and HTML on the code side

I have developed a script that generates a drop-down menu and updates the .box div with a new color and image. Below is the HTML & Java code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> ...

javascriptjqueryhtmlcss

Having trouble installing handlebars on Node using the command line

I've been attempting to integrate handlebars with node using the instructions from my book. The guide advised me to install handlebars like so: npm install --save express3-handlebar. However, this resulted in an error npm WARN deprecated express3-han ...

javascriptnode.jsexpresscommand-linehandlebars.js

The router is displaying the component directly on the current page rather than opening it on a separate page

The issue is that the router is rendering the page on the same page instead of generating a new one. When clicking on the Polls link, it only renders the page there but the URL changes in the browser. Polls.js import React from 'react'; import ...

javascriptreactjsreact-router

Creating a jsp page content with jquery and retrieving request parameters

I am facing an issue with my JSP page where I need to pass the value of request.getParameter("cfgname") to another content page so that it loads correctly. Currently, the code is displaying null instead of the parameter. This is the main JSP page with par ...

javascriptjqueryajax

Notification prompt when removing items

I currently have a table set up with a delete <a> tag that allows users to delete data. I would like to add a confirmation message asking the user if they are sure they want to delete before proceeding. I attempted to achieve this using JavaScript bu ...

javascriptphpajax

Enhancing the camera functionality of the HTML <input> tag for iPhone and Android devices

I am currently working on a mobile web application that requires access to the device's camera. I am aware that this can be achieved using the following code: <input type="file" accept="image/*" capture="camera" /> The code snippet above suc ...

javascripthtmlcssbrowser

How can Physijs enhance the realism in your Three.js projects with its physics-enabled features?

After creating a solid ground, I decided to get creative by digging a gap into it and incorporating physical effects using physijs. let Mesh = new THREE.Mesh(new THREE.BoxGeometry(800, 10, 800), material); Mesh = new ThreeBSP(Mesh); let Gap = new THREE.Me ...

three.jsphysijs

The constructor for Orbit Controls is not valid

Recently, I decided to enhance an existing project by incorporating OrbitControls. Following a tutorial from 2018, I made some code additions as outlined below: Below are the lines of code that I integrated into my project: <script type="text/javascri ...

three.js

I'm encountering difficulty accessing the Index value within the template's Ref

I'm having trouble accessing the index value inside the templateRef. It shows as undefined in the console. <ng-container *ngFor="let notification of notifications; let i = index"> <ng-template *ngTemplateOutlet="notificationPage ...

javascriptangulartypescript

Establishing Redux States within the Provider (error: Provider encountering useMemo issue)

Exploring redux for state management has been a new journey for me. I am hoping it will help reduce API calls and increase speed, but I've hit a roadblock with an error that I can't seem to figure out. To troubleshoot, I created a simplified vers ...

javascriptreactjsnode.jsnpmnpm-install