Step by step guide on rotating a plane with texture by 90 degrees

I've been working on developing an fps game, but I'm encountering an issue where the floor disappears from the scene when I try to rotate it close to 90 degrees. Here's the code snippet responsible for creating the plane.

var colorMap = new THREE.TextureLoader().load('/textures/wood_albedo.png');

var radian = 2 * Math.PI *(90 / 360);
var geometry = new THREE.BoxGeometry(20, 20);

var material = new THREE.MeshStandardMaterial({color: 'white', side: THREE.DoubleSide});

var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

I'm having trouble figuring out what mistake I've made. Any assistance or advice would be greatly appreciated. Thank you for taking the time to read this.

Answer №1

It appears that your code is in good shape, assuming that you are correctly mapping the image to the plane in the background. One thing to verify is whether 2 * Math.PI * (90 / 360) is equivalent to Math.PI / 2. Additionally, consider using a shade of grey instead of white for the map.

Your issue may have a simple fix - the rotation could be causing the plane to become parallel to the camera, rendering it invisible. It is recommended to express your rotations in terms of Math.PI. Feel free to reach out if you have any further inquiries regarding this matter.

Tip: Including a jsfiddle link can be beneficial for debugging your issue.

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

Ajax in action

I've encountered a problem with my JavaScript function. The function is supposed to display an alert when called without AJAX, but it's not working when I include AJAX. Here's the function: function stopSelected(){ var stop=document ...

"Encountering a 400 Error While Attempting to Edit Requests in NodeJS/A

Currently, I am building an application using Ionic/Angular with a NodeJS backend. Within this project, I have created an update form that allows users to modify or delete a specific row. While the deletion function is working fine, I am facing some challe ...

Material Grid adamantly refused to follow the typical horizontal layout, defying its default behavior

I recently discovered Material-UI and have been trying to get two components to display side by side. However, no matter what I try, it always ends up looking like this: https://i.stack.imgur.com/w1Wyh.png Even though it is the default behavior, the Mate ...

Unexpected website icon shows up in my Node.js project

As a newcomer to working with the backend of Node.js, I'm facing an issue while trying to integrate favicons into my project using RealFaviconGenerator. Despite following the instructions provided, the favicons are not showing up on either my developm ...

React hooks - Issue with updating state properties within sidebar display

When resizing the window, I have an event that will display either the desktop sidebar or the mobile sidebar. However, there are variables that are not immediately updated to show the sidebar correctly based on the window size. In a desktop window, this ca ...

Conceal element when unchecked

There is a checkbox pre-selected labeled "Use profile address" with the address displayed below. If the customer unchecks the checkbox, the address that was shown before will disappear and a new input field for adding a different address will appear. I a ...

Accessing PHP output within Jquery

Even though I know PHP is a server-side script and JavaScript is client-side, I encountered an issue. I struggled to bypass browser security when making an AJAX request to another domain. Feeling lost, I decided to turn to PHP for help. The challenge I f ...

Can I access properties from the index.html file within the Vue.js mount element?

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="widt ...

Use vanilla JavaScript to send an AJAX request to a Django view

I'm attempting to make a GET AJAX request to a Django view using vanilla JS. Despite passing is_ajax(), I am having trouble properly retrieving the request object. Below is my JavaScript code. Whether with or without JSON.stringify(data), it does not ...

Converting data types when transferring a JavaScript variable to a PHP variable

I have a boolean value stored in a JavaScript variable var value=true; alert(typeof(value)); //Output: boolean I need to pass this variable to a PHP file through AJAX $.ajax({ type: 'POST', data: {value:value}, url: 'ajax.php& ...

The error message "Cannot read property '$scope' of undefined" indicates that there is an issue

After receiving HTML content in an Angular app, I inject it into the HTML document but struggle to retrieve it. For example, you can see a minimized code on plunker here and in JavaScript here Below is my controller: class ReadCtrl constructor: (@$sco ...

Utilizing Angular2 Guard to Ensure False IdentityServer4 OIDC Security

After successfully authenticating a user and redirecting them back to the main site, the following code runs: <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.2.2/oidc-client.min.js"></script> <h1 id="waiting">Waiting... ...

Dispatch in React Redux is not intercepted

I've been grappling with this issue for hours and still can't seem to find a solution. When I click the button, the function "getLocation" is being triggered (Confirmed it) However, the dispatch is not getting passed to the reducer. After r ...

Updating the state of an object within a mapping function

I've been struggling with this issue for two days now. Despite my efforts to find a solution online, I am still stuck and starting to believe that I might be missing something. The main functionality of the app is to click a button and watch an apple ...

Tips on preventing flickering when using javascript for drag and drop functionality

I have implemented the following JavaScript code (using jQuery) to manage drag and drop functionality in a script I am developing: jsc.ui.dragging = false; jsc.ui.drag_element = {}; $(".drag-target").mousedown(function() { jsc.ui.drag_element = $(thi ...

Vue - a guide on customizing a prop in a parent component

I have implemented a wrapper component that encapsulates a Quasar q-select element in the following manner: <template lang="pug"> q-select( :options="organisations" option-value="id" v-bind="$attrs&quo ...

Utilizing "this" in a situation where the function and selector are not combined

When it comes to utilizing this in different scenarios, the results may vary. In example 1, we see that by directly accessing this, we are able to obtain the correct result. $("#my_div").on("click", function () { alert( $(this).attr("id") ) }); Howev ...

What is the process for incorporating a custom attribute into an element with Vue directives?

One of the challenges I'm facing is dealing with a custom attribute called my-custom-attribute. This attribute contains the ID for the element that needs to have the attribute added or removed based on a boolean value. Although I've implemented ...

Highcharts plots only appear once the browser window is adjusted

Having some issues while testing out the Highcharts javascript charting library on a specific page. The problem I'm encountering is that none of the data appears until I adjust the browser's size slightly. Prior to resizing, the tooltip does dis ...

The AJAX call returned undefined, leading to an error when trying to access the length property

I've scoured various resources to find a solution for this issue, but unfortunately, I haven't had any luck with implementing the code. The problem lies with my JSON parser function, which is designed to construct a table based on data received ...