Where did Mesh go in three.js? Has it been clipped away?

Unique Scenario:
Within my scene, I have implemented a vertex shader that positions a plane mesh along the xz-axis at the exact location of the camera. As a result, when the camera is in motion, the plane mesh moves synchronously with it. This creates the illusion that, during camera movement, the plane mesh remains stationary relative to the viewer. Everything appears to be functioning correctly.

Issue Encountered:
However, an anomaly arises when I push the camera (and consequently the plane mesh) beyond a certain threshold -- the mesh suddenly vanishes. Upon investigation, I've noted a correlation between this disappearance and the dimensions of the plane; essentially, the larger the plane, the more leeway I have in moving the camera before facing disappearance.
Moreover, in my test environment, the disappearing act only occurs when navigating on the negative x-axis, positive x-axis, or negative z-axis. Strangely enough, no disappearance unfolds when traveling along the positive z-axis.

I suspect this quandary could be linked to some form of clipping issue, although I am not entirely certain. Despite attempting to recalculate the bounding box for the plane mesh, there has been no resolution thus far.

Any insights or suggestions would be greatly appreciated.

Cheers

Fiddle:
To demonstrate the problem, I have constructed a fiddle: http://jsfiddle.net/p8wZ6/10/

In this fiddle, an additional box mesh has been included to better illustrate the camera's movement:
- To alter the axis of camera movement (by default on the negative z-axis), comment/uncomment the appropriate line of code within the tick method.
- To adjust the size of the plane, modify the size value in the createPlane method.

Sourcecode Shader:

<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        vec4 pos = vec4( position, 1.0 );

        vec4 wPos = modelMatrix * pos;

        wPos.x += cameraPosition.x;
        wPos.z += cameraPosition.z;

        
        vec4 pPos = projectionMatrix * viewMatrix * wPos;

        gl_Position = pPos;
    }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
    void main() {
        gl_FragColor.rgb = vec3(0.7, 0.7, 0.7);
        gl_FragColor.a = 1.0;
}
</script>


Sourcecode JS:

var scene;
var camera;
var light;
var renderer;
var controls;
var onTick;
var planeMesh;
var boxMesh;
var heightmap;
var clock;


function createPlane(){
  
    var size = 20;
    var geom = new THREE.PlaneGeometry(size, size, 20, 20);

    return geom;
}


function createBox(){
    var geom = new THREE.CubeGeometry(2, 2, 4);

    return geom;
}

function createMesh(){
   
    var geom = createPlane();

    var shaderMaterial = new THREE.ShaderMaterial({
        vertexShader: document.getElementById( 'vertexShader' ).textContent,
        fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
        side: THREE.DoubleSide,
        wireframe: true
    });

    planeMesh = new THREE.Mesh(geom, shaderMaterial);
    var axis = new THREE.AxisHelper(4);
    planeMesh.rotation.x = -90 * (Math.PI / 180);
    planeMesh.add(axis);
    scene.add(planeMesh);


    geom = createBox();

    var material = new THREE.MeshBasicMaterial( {
        color: 0xff00ff,
    });

    boxMesh = new THREE.Mesh(geom, material);
    boxMesh.position.x = 5;
    boxMesh.position.z = -15;
    axis = new THREE.AxisHelper(4);
    boxMesh.add(axis);
    scene.add(boxMesh);
}

function startRendering(){
    onTick();
};

function onTick(){

    camera.position.z -= .1;
   
    requestAnimationFrame(onTick);

    renderer.render(scene, camera);
}

function init(){
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xffffff, 1 );
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();
    scene.add(new THREE.AxisHelper(4));

    camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 1, 0);

    light = new THREE.DirectionalLight(0xffffff, 1);
    light.shadowCameraVisible = true;
    light.position.set(0, 0, 100);
    scene.add(light);

}

init();
createMesh();
startRendering();

Answer №1

Your understanding of the situation is fundamentally flawed.

While the camera is responsible for movement in the CPU, it's actually the GPU that manipulates the vertices of the plane.

The frustum calculation of the camera has no knowledge of the vertex transformations happening in the vertex shader.

To address this issue, you can disable frustum culling by setting

 planeMesh.frustumCulled = false;

An alternative solution is to attach the plane as a child of the camera and forego any vertex displacements.

planeMesh.position.set( 0, -1, 0 );
camera.add( planeMesh );
scene.add( camera );

If you opt for the second method, remember to add the camera to the scene graph.

Using three.js r.65

Answer №2

When setting up your camera in version 73, the last two parameters allow you to set the near and far clipping distances for your camera.

Referenced from: http://threejs.org/docs/#Manual/Introduction/Creating_a_scene

var camera = 
new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

The third parameter of Three.PerspectiveCamera specifies the near clipping distance for the camera, while the fourth parameter specifies the far clipping distance.

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

What could be the reason for my array being nested inside another array as a value in a dictionary

I am having some difficulty understanding how the selected array is being returned in my dictionary. Could you please provide me with an explanation? The language being used is javascript. I have constructed a dictionary with arrays as values. However, wh ...

Personalize the "set up notification" PWA on React

Is it possible to customize this default design, including the picture, title, description, and background? I made changes in manifest.json, but nothing seems to have happened. Here is a picture of the random install prompt that I would like to customize ...

Incorporate a background image with the JavaScript CSS property

I'm having trouble adding a background image using the Javascript CSS property in my code. When I directly add the 'url', it works fine. Could the issue be with the 'weatherImage' variable? Javascript var OpenWeatherKey = ' ...

The link in the Ajax open() method

I'm experiencing some trouble with my first Ajax program and I could really use some help in identifying the issue in the code. The debugger is throwing an error that reads, "XMLHttpRequest cannot load http://localhost/function.txt. No 'Access-C ...

Is it possible to employ the face recognition npm package within a React project?

Currently, I am diving into the world of React and experimenting with integrating the npm package known as face-recognition within my React project. However, it appears that the documentation provided by the package is primarily tailored for Node.js. Upon ...

The onClick event is not functioning properly with React's select and option elements

Looking for a way to get the option value from each region? const region = ['Africa','America','Asia','Europe','Oceania']; <div className="options"> <select> ...

Understanding the behavior of a React component when passed as a prop

Typically, components are passed down as children to another component. However, I have noticed in some UI libraries that components can also be passed using standard named props. I attempted this approach myself but encountered some limitations without an ...

What is the best way to apply margins to a nested div element in relation to its parent div element using CSS?

My Coding Dilemma: #b { width: 700px; height: 150px; margin-top: 10%; margin-left: 20%; text-align: center; border: 2px solid black; } .block { width : 10%; height : 10%; border: 2px solid black; padding: 40px 40px; margin: inheri ...

Angular-Daterangepicker: Dynamically Updating Start Date Selection

I am currently utilizing the date-range picker from https://github.com/fragaria/angular-daterangepicker and to showcase a calendar for selecting travel dates in my application. Depending on the type of flight chosen, I need either a date range for roundtr ...

React Select streamlines dropdown options for multi-selection by abbreviating names

Is there a way to shorten dropdown names when selected similar to the example shown in the image below https://i.sstatic.net/qUFP6.png This is the snippet of my code : multiValue: [ { value: "BUF", label: "BUF" }, ...

Utilize class for sending ajax data instead of using ID

I have a dynamic PHP-generated form: <form id="change_status_form" name="change_status_form"> <input name="booking_int" type="hidden" value="'.$upcoming_bookings[$x]['booking_int'].'"> <select name="booking_status" oncha ...

Element statement is not responding correctly on hover when combined with an if statement

Desperately seeking some JQuery assistance here. I feel like tossing my laptop out the window. After countless hours of coding, I've hit a roadblock that's driving me crazy. I'll only share the relevant portions of the code since it's ...

How to implement redirect after upload with Rails 3 and Plupload?

Every time I use plupload to upload a file using the code below, I notice in the Firebug console that there is a message in red indicating POST /uploads 200 OK 8192ms. Upon further inspection of the terminal output, I see Completed 200 OK in 7653ms. var u ...

Stop images from being stored in the database instead of text characters

Using a proxy, I attempt to parse some HTML. One of the elements is retrieved using jQuery: var site = 'http://www.kartabu.com/pl/index.php?filter=random' var url = 'http://localhost/taboo.blue-world.pl/admin/proxy.php?url=' + encodeUR ...

What is the process for configuring sendmail in a node.js environment?

After setting up Sendmail on my Nginx server and configuring SMTP for sending emails in my Node.js project, I still encountered issues with emails not being sent. I tried using Sendmail directly, but I'm unsure of how to properly configure it. Here i ...

Is it possible for mesh1 and mesh2 to automatically adjust their positions based on scale?

I have a goal to connect the right side of mesh 1 with the left side of mesh 2. Whenever I scale mesh 1, it requires me to readjust the position of mesh 2 in order to maintain the original distance between them. Let's try scaling mesh 1 by setting z ...

acquire information using ajax in conjunction with jquery

I am currently working with the following code: <div data-role="content"> <div data-role="content"> <form id="registerForm" action="/register" method="post" data-ajax="false" class="ui-body ui-body-a ui-corner-al ...

Guide on tallying a unique value of a chosen option within a table using jQuery

I have select elements in my table. I am trying to determine if any of the selected options in those select elements have the value of optional. If any of the select elements has optional selected, then I want to display a text field below it. However, I a ...

Create a JavaScript variable every few seconds and generate a JSON array of the variable whenever it is updated

My variable, which consists of random numbers generated by mathrandom every second, such as "14323121", needs to be saved to an array for the latest 10 updates. function EveryOneSec() { var numbers = Math.random(); // I want to create an array from th ...

Trouble connecting JSON elements to HTML using jQuery

Can someone help me troubleshoot this code? I've been struggling to extract elements from this JSON data. Here's what I have so far: $(document).ready(function() { $.getJSON('http://free.worldweatheronline.com/feed/weather.ashx?q=Stockholm ...