Issues with Three.js involving incorrect axis orientation or camera rotation

I am facing an issue with my code where I'm trying to create a floor that is positioned horizontally, but it's appearing upright instead. I suspect that maybe the camera rotation is causing this problem. The framework I am using is three.js r52.

    camera = new THREE.PerspectiveCamera                                                                                            
        (45, window.innerWidth / window.innerHeight, 1, 10000);                                                                     
    camera.position.x = -500;                                                                                                       
    camera.position.z = 0;                                                                                                          

    scene = new THREE.Scene();

    var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);                                                                  
    var floorMaterial = new THREE.MeshBasicMaterial( {color:0x448844} );                                                            
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);                                                                       

    scene.add(floor);

    controls = new THREE.FirstPersonControls(camera);                                                                             
    controls.movementSpeed = 1000;                                                                                                
    controls.lookSpeed = 0.0;                                                                                                     
    controls.lookVertical = true; 

Answer №1

Your code looks good, but for it to rotate 90 degrees you need to include the following line of code: (line 18: floor.rotation.x = -Math.PI / 2;)

Remember, rotation is just a THREE.Vector3, similar to position.

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

Why is the HTML page showing VBS script code instead of executing it as intended?

After creating a simple ASP page to display data from AD in a table, I decided to move the code to an HTML file for easier linking throughout the website. When opening "abc.html," all that displayed was an empty document with the ASP code enclosed in scrip ...

Validating Forms and Files with jQuery and C# in ASP.NET

I'm facing some uncertainty on how to effectively combine jquery/javascript with C#. My task is to incorporate a javascript confirm popup into a file upload form, but the confirm prompt should only appear if specific criteria are not met. There are 4 ...

Is it possible to utilize a route path in a JavaScript AJAX request?

So I have a situation with an ajax call that is currently functioning in a .js file, utilizing: ... update: function(){ $.ajax({ url: '/groups/order_links', ... However, my preference would be to use the route path instead. To achieve ...

Use the map function to pass onClick to every individual image

I need help passing an onClick function to each thumbnail image created with the map function. The goal is for the main image to change to the clicked thumbnail when a user selects it. Currently, it seems like the onClick function is being triggered witho ...

"Exploring the Power of Logarithmic Slider with Vue and Quasar

I'm currently working on a project utilizing Vue 2 and Quasar 1, where I am attempting to develop a logarithmic slider. Initially, I managed to create a basic example using a native input slider in this code pen: https://codepen.io/tonycarpenter/pen/Z ...

Create a particle on the border of the screen

I've scoured the depths of the internet, so if there's a similar question out there, please forgive me for not finding it. To provide context for what I'm attempting to accomplish: I am aiming to generate a never-ending field of stars that ...

Display a modal as the first screen appears in a React Native application

Trying to implement a non-animating modal before the main screen loads on my react-native app. The goal is to display a login screen in a modal view if no user is logged in. Encountering an issue where the main screen briefly appears before the modal, ins ...

Attaching a click event to an input field

Seeking to serve html files from the server without relying on template engines. Below is the script used to start the server. // script.js const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(expr ...

The Heroku Node.js application encountered an issue when trying to apply the style due to an incompatible MIME

As a complete beginner in Node.js and Express, I am encountering some errors from the console. When trying to load my CSS file from '', I receive the following error: "Refused to apply style because its MIME type ('text/html') i ...

Leveraging TypeScript's library extensions in combination with requirejs

Currently, I am experimenting with THREE.js and socket.io to develop a small game. I am looking to utilize the OrbitControls extension for THREE.js for camera controls, which I have successfully used in a previous project. However, it seems that the clien ...

Create a generic function that retrieves a specific property from an array of objects using the select method

Currently, I have implemented four functions that select entries from an array based on different properties. if ($scope.filters.filter1) $scope.filteredEntries = $scope.filteredEntries.filter(function (o) { return o.field1 === $scope.filt ...

Does NextJs <Link> not fire the beforeunload event? Wanting to warn the user before they navigate away from the page

How do I prompt the user before leaving the page? I have noticed that when the user enters the page from a standard link element, the beforeunload event is triggered when they click back. However, if the user enters the page through the NextJs Link compon ...

Error encountered in parsing JSON: abrupt end of data (JavaScript)

I have been working on a few functions that are responsible for parsing JSON data, both external and internal, and displaying it on a local webpage using the localStorage feature. While I have successfully displayed the external JSON data, I am running int ...

Add a Vue component dynamically before another component within a v-for loop

Seeking advice on how to incorporate an unread component before a dynamic message component within a v-for loop. The goal is to display an unread panel before any unread messages, indicating their status clearly. Below is the sample code without the unrea ...

Adding shadows to a ShaderMaterial in three.js: A step-by-step guide

My current challenge involves using a customized shader to incorporate gradient colors onto a model. However, I have noticed that the shader lacks clarity when it comes to displaying shadows with well-defined edges (as shown in the first image). It seems t ...

Is it possible to keep adding the keys of an array to themselves until reaching a specified limit

Given an array var ary = [5,10,28,50,56,280], I am exploring the idea of generating all possible combinations or subsets of this array until a certain threshold is reached. The objective is to store this limit in a variable and collect all the elements be ...

What could be the reason behind the failure of the Jasmine test?

I am currently developing a basic JavaScript program for scoring in tenpin bowling. So far, I have created two functions - Frame and Game. For testing purposes, I have set up a mock frame named "frameOne". The specific test causing me trouble is as follows ...

What is the best way to create a DOM element listener in AngularJS?

My goal is to monitor a <div id="please_monitor_me"> to determine if it is visible. If it is not visible, I plan to remove the margin (margin: 0;). I am aiming for no margin when the div is not visible so that it can be shown later with a burger but ...

I was surprised by how Await behaved in if-else statements, it was not what

let metadata = []; allNFTs.map(async (e) => { if (e.metadata) { metadata.push(JSON.parse(e.metadata).attributes); } else { let config = { method: "get", url: `http://localhost:3000/api/fetch ...

Managing WebDriver for Selenium tests in JavaScript

As someone who is new to writing Selenium tests in Javascript, I have been wondering if there is a Driver Manager similar to WebDriverManager that can be used in JS tests. Despite my extensive search efforts, I have come up empty-handed so far. It seems ...