Three.js: Plane visibility fluctuates with time

I've been working on a Three.js project where I created a rotating plane. However, I encountered an issue where the plane doesn't display half of the time. To better illustrate this problem, I have created a demonstration in this fiddle.

Answer №1

Take note that there have been some changes in Three.js revision r50. To render both sides of a plane, you can now use the side property on the Material like so:

plane.material.side = THREE.DoubleSide;

For further information, refer to this link.

Answer №2

The reason the object is not visible is because the backface of the plane is not rendered by default. To understand this concept better, you can read about backface-culling.

However, in Three.js there is a simple way to render backfaces.

In Three.js version r49 and below:

You just need to set the doubleSided property of your plane object to true.

plane.doubleSided = true;

For newer versions - r50 and up

In newer versions, the property has been moved from the Object3D object to the Material object. So you would need to set it differently like this:

plane.material.side = THREE.DoubleSide;

I have also made edits to your fiddle to demonstrate this: http://jsfiddle.net/VsWb9/1084/

This fiddle uses a version of Three.js newer than r50, with the property being set on line 35.

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

Trying out a template component with a dynamic function for disabling

Here's an interesting scenario I encountered: A template disables a certain element based on the input of another element. <input id="email" type="text" [(ngModel)]="login.username" name="username" <button type="button" id="login-button" [disab ...

Error message: The 'node_modules' directory is not found after installing

During class today, I faced a problem. I was demonstrating to my students how to install and use gulp.js using a projector. I successfully installed node.js and gulp.js globally with npm install -g gulp without any issues. However, when attempting to ins ...

A beginner's guide to checking the functionality of individual Vue components

I'm looking to implement ava for conducting unit tests on my Vue components. Currently, I have a basic setup in place: package.json { "name": "vue-testing", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { ...

Ways to retrieve an authentication token from the front end when the user is currently authenticated

I am embarking on a project to create a user-friendly interface where individuals can search for movies using an API and add their chosen film to their personal "/movies" page, post login. The technologies I am utilizing include Node.js, MongoDB, Express f ...

Encountered an ERR_SOCKET_TIMEOUT when trying to install React.js

When attempting to install React using npx create-react-app, an error occurred: npm ERR! errno ERR_SOCKET_TIMEOUT npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/cosmiconfig: Socket timeout npm ERR! network This issu ...

Transfer a concealed input value to javascript using the href attribute

I have a question about using javascript to handle the href attribute. Here is the code snippet I am working with: <script> window.onunload = refreshParent; function refreshParent() { var SAPno = document.getElementById('Hidden ...

Exploring AngularJS JSON Parsing Techniques (such as utilizing ng-repeat)

My approach to processing json data looks like this: $scope.activities = response.data; console.log($scope.activities.length); var list = []; for (var i = 0; i < $scope.activities.length; i++) { console.log($scope.activities[i].name); list.pus ...

How can I implement a promise loop in Angular that continues until it encounters a rejection?

My goal is to efficiently load around 10000 resources, but loading them all at once during the resolve phase is taking too long due to some calculations. I then had the idea to load the resources page by page sequentially, however, since all resources need ...

Attempting to output numerical values using Jquery, however instead of integer values, I am met with [Object object]

I am struggling to figure out how to display the value contained in my object after attempting to create a Calendar using Jquery. I attempted to use JSON.toString() on my table data, but it didn't solve the issue. Perhaps I am not placing the toString ...

Can we combine JQuery includes with Angular Includes?

I have come across an issue while working on an application that combines both Jquery and AngularJS includes. It seems that Angular does not work properly after Jquery has included a file containing AngularJS markup. Specifically, Jquery is including the " ...

Expanding the Number of Arguments Sent to a Callback Function

I have a scenario where I am using a method that sends a POST request and then triggers a specific callback function to manage the response: myService.verify(id, verificationCallback); function verificationCallback(err, response) { ... } My query is two ...

My goal is to eliminate unnecessary code and transfer it into its own jQuery function

Currently, I am working on optimizing my code by removing redundancies and moving sections to separate functions. //Consolidating Infotypes for filtering and checking if any option is selected if(this.$infoOptions.val() != null){ ...

Using NEXT JS, Three js is able to convert an equirectangular panorama into cubemap format

I'm currently working on converting an equirectangular panorama image into cubemap format using NEXT JS. The scene is being rendered but I'm facing an issue where the background isn't applying, and surprisingly, no errors are showing up! im ...

What could be the reason for the sudden lack of content from the Blogger API?

For weeks, I've been using the Google API to retrieve JSON data from my Blogger account and showcase and style blog posts on my personal website. Everything was functioning flawlessly until yesterday when, out of the blue, the content section stopped ...

Change the iframe's URL to a different one by clicking on a thumbnail

I am attempting to change the src="" attribute of an iframe when I click on the thumbnails. This is my current progress. HTML <div class="videoPopup"><span class="close">X close</span> <iframe width="600" height="400" src="" fram ...

Switching database connections based on routes in express.js using sequelize

Can the database connection in sequelize be modified based on the route? For instance, Users can access 2 different installations on a website: - example.com/foo - example.com/bar When users log in, they are directed to example.com/foo. To view all th ...

The JavaScript function I created to remove the last item in an array is not functioning correctly when it encounters an "else

My button has been designed to delete the last index from this.fullformula, which is a string. However, I've encountered an issue with deleting characters from this.result, which is an integer. Instead of looping over the function, it only deletes one ...

What is the best way to properly pass parameters?

const root = { user: (id) => { console.log("returning object " + JSON.stringify(id.id) + " " + JSON.stringify(storage.select("users", id.id))) return storage.select("users", id.id) } } Struggling to correctly pass the parameter ...

After making edits, the JQGrid will automatically refresh the data with the updated information retrieved from the

My Jqgrid is in need of some editing. I have successfully set it up to save data after editing, but there is an issue with the grid not refreshing with the database data once it's saved. For instance, the version field gets updated automatically by th ...

Conceal the scrollbar and enable horizontal swiping using CSS

I have set up a container where I want the content to scroll horizontally from left to right on mobile devices, and I would like to be able to swipe to navigate while hiding the scrollbar. You can view the implementation on this JSfiddle link Do you think ...