In the world of three js, objects vanish from view as the camera shifts

Question

In the world of three js, objects vanish from view as the camera shifts

I am attempting to display a d3 force graph in three.js using standard Line and BoxGeometry with a photo texture applied. When the force graph is updated, I call the draw function which is triggered by:

controls.addEventListener('change', () => {this.redraw()});

However, when I move the camera, some of the lines disappear, especially when viewed up close. It appears that there is no specific pattern to the disappearing lines, even when zoomed in on the graph.

Here are some examples:

https://i.sstatic.net/YvYlV.png

https://i.sstatic.net/M04Zx.png

https://i.sstatic.net/bx2WX.png

https://i.sstatic.net/ni1su.png

I attempted scaling down units

And setting frustum to false

Full code:

(Code here - too lengthy to include in response)

javascript typescript graph 3d three.js

Answer 1

Answer №1

I found the exact answer I needed in the above comment by WestLangley.

It seems that when you make changes to the vertices of a geometry, you should remember to call geometry.computeBoundingSphere(). The renderer automatically does this on the first render, but subsequent modifications to the vertices will require you to update the bounding sphere manually. Another option is to set mesh.frustumCulled = false;

Answer 2

I found the exact answer I needed in the above comment by WestLangley.

It seems that when you make changes to the vertices of a geometry, you should remember to call geometry.computeBoundingSphere(). The renderer automatically does this on the first render, but subsequent modifications to the vertices will require you to update the bounding sphere manually. Another option is to set mesh.frustumCulled = false;

Answer 3

Answer №2

When trying to make it work with the Line object, I faced some difficulties. However, by utilizing the LineSegments and pushing all vertex pairs into one Geometry, everything started functioning smoothly.

Therefore, within the buildScene function, I replaced:

this.lineMaterial = new LineBasicMaterial({ color: 0xccff00, linewidth: 3});

with these lines:

this.linesGeometry = new Geometry();
this.scene.add(new LineSegments(this.linesGeometry, new LineBasicMaterial({ color: 0xccff00, linewidth: 3})));

Then, the content of the buildEdge is as follows:

this.linesGeometry.vertices.push(
    vectorIndex.get(link.source.index).copy(vectorIndex.get(link.source.index).setZ(0)),
    vectorIndex.get(link.target.index).copy(vectorIndex.get(link.target.index).setZ(0))
);

In the redraw function, I simply execute:

this.linesGeometry.verticesNeedUpdate = true;

instead of iterating through individual lines in this manner:

this.lines.forEach((line:Geometry) => {
    line.verticesNeedUpdate = true;
});

Answer 4

When trying to make it work with the Line object, I faced some difficulties. However, by utilizing the LineSegments and pushing all vertex pairs into one Geometry, everything started functioning smoothly.

Therefore, within the buildScene function, I replaced:

this.lineMaterial = new LineBasicMaterial({ color: 0xccff00, linewidth: 3});

with these lines:

this.linesGeometry = new Geometry();
this.scene.add(new LineSegments(this.linesGeometry, new LineBasicMaterial({ color: 0xccff00, linewidth: 3})));

Then, the content of the buildEdge is as follows:

this.linesGeometry.vertices.push(
    vectorIndex.get(link.source.index).copy(vectorIndex.get(link.source.index).setZ(0)),
    vectorIndex.get(link.target.index).copy(vectorIndex.get(link.target.index).setZ(0))
);

In the redraw function, I simply execute:

this.linesGeometry.verticesNeedUpdate = true;

instead of iterating through individual lines in this manner:

this.lines.forEach((line:Geometry) => {
    line.verticesNeedUpdate = true;
});

In the world of three js, objects vanish from view as the camera shifts

Answer №1

Answer №2

Similar questions

Creating a perfectly rounded 2D sprite with a plane geometry shader that stays oriented towards the camera in Three.js WebGL coordinate system

JS for accessing Meteor templates through the DOM

"Setting up a schema in TypeORM when connecting to an Oracle database: A step-by-step guide

Designing webpages by superimposing text onto images with customizable positioning

Issue with TypeScript Decorator Not Properly Overriding Get/Set Functions for Instance Properties

Enhancing WooCommerce by including additional text following the price for specific shipping methods

Exploring the world of jQuery: Toggling radio buttons with variables on click

The JavaScript function Date().timeIntervalSince1970 allows you to retrieve the time

Angular Material: Enable Window Dragging Across Multiple Monitors

Assign a unique variable to each div simultaneously

Using a jQuery UI accordion with a numbered list

Unexpected outcome when returning a map

Hiding the Previous or Next Button on the First and Last Item in a Twitter Bootstrap Carousel

developing a monorepo without utilizing a package registry and installing through Bitbucket

Converting an array of objects into a dictionary using TypeScript

Press a button to generate an image inside a specified div element

Import gltf model from internal data, not a web address

Utilizing Audio Record Feature with a pair of buttons - one for initiating recording and the other for concluding recording

Get the QR code canvas image with a customized background by downloading it

Hiding components in Angular 4/5 through routing decisions