Exploring Three.js with poorly rendered objects in sight

Having some issues with a basic code using three.js. I'm attempting to create a room with three walls and a floor, everything seems to be in order based on the references from the three.js page. However, there is an alignment issue with the walls...

Why aren't they aligned when my code appears to be correct (at least, I think so)?

The Code:

    //scene-camera
    var scene = new THREE.Scene ();
    var camera =  new THREE.PerspectiveCamera (90, window.innerWidth/window.innerHeight, 1, 1000);
    camera.position.z = 13;
    camera.updateMatrixWorld (true);
    scene.add (camera);

    //renderer
    var renderer = new THREE.WebGLRenderer ();
    renderer.setSize (window.innerWidth, window.innerHeight);
    document.body.appendChild (renderer.domElement);

    //geometry      
    var geometryPlane = new THREE.PlaneGeometry (10, 5);
    var geometryPlane2 = new THREE.PlaneGeometry (10, 10);

    //materials
    var materialBlue = new THREE.MeshBasicMaterial ({color: 0x3C64C8, side: THREE.DoubleSide});
    var materialGreen = new THREE.MeshBasicMaterial ({color: 0x3CC864, side: THREE.DoubleSide});
    var materialRed = new THREE.MeshBasicMaterial ({color: 0xFF33C3C, side: THREE.DoubleSide});
    var materialYellow = new THREE.MeshBasicMaterial ({color: 0xFFD700, side: THREE.DoubleSide});


    //objects-plane      
    var plane1 = new THREE.Mesh (geometryPlane, materialBlue);
    var plane2 = new THREE.Mesh (geometryPlane, materialGreen);
    var plane3 = new THREE.Mesh (geometryPlane, materialRed);
    var plane4 = new THREE.Mesh (geometryPlane2, materialYellow);

    //vectors
    var vecY = new THREE.Vector3(0, 1, 0);
    var vecX = new THREE.Vector3(1, 0, 0);
    var vec0 = new THREE.Vector3(0, 0, 0);


    //add scene-camera position of the objects
    scene.add (plane1);
    scene.add (plane2);
    scene.add (plane3);
    scene.add (plane4);

    var render = function (){
        //translate
        plane1.translateOnAxis (vecX, 5);
        plane3.translateOnAxis (vecX, -5);
        plane4.translateOnAxis (vecY, -2.5);

        //rotate            
        plane1.rotation.y = THREE.Math.degToRad(95);
        plane3.rotation.y = THREE.Math.degToRad(95);
        plane4.rotation.x = THREE.Math.degToRad(95);

        renderer.render (scene, camera);
    }
    render ();

Appreciate any assistance you can provide!

Answer №1

Consider

    Adjusting the rotation values for plane1, plane3, and plane4 to 90 degrees using THREE.Math.degToRad().

as an alternative to

    Keeping the rotation values for plane1, plane3, and plane4 at 95 degrees.

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

A guide to defining a color variable in React JS

I am trying to use a random color generated from an array to style various elements in my design. Specifically, I want to apply this color to certain elements but am unsure how to do so. For example, I know how to make a heading red like this: const elem ...

Express framework in NodeJS encounters an undefined header error

Utilizing Microsoft Flow to dispatch an HTTP POST request to my server, the request body includes a custom header known as "Email-To" with a string value. Here is the body: { "$content-type": "multipart/form-data", "$multipart": [ { "headers ...

Neglecting to automatically align text

My goal is to automatically align text based on the language, so that Arabic text starts from the right and English text starts from the left. After some online research, I discovered that I need to use dir="auto" in the tag and text-align: auto; in the CS ...

The functionality of "#button_1" remains unchanged despite using .click() or .hover() methods

Seems like I made a beginner's error - the #button_1 ID seems to be immune to the jQuery effects of click() or hover(). If someone could spare a moment to check out my JSFiddle, it would be incredibly helpful. It's likely something quite simple ...

Using Bootstrap cdn in my React JS project caused conflicts with my custom CSS styles

I recently created a webpage in ReactJS and styled it using CSS. In order to enhance the styling of one component, I integrated Bootstrap by adding the latest CDN link to my "index.html" file. However, I noticed that the Bootstrap styles were overriding ...

Setting the default <a-sky> in Aframe: A step-by-step guide

There was a fascinating projection I witnessed where two images were displayed in the sky. [https://codepen.io/captDaylight/full/PNaVmR/][code] Upon opening it, you are greeted with two spheres and a default white background. As you move your cursor over ...

Oops! Gulp encountered an error: Assertion Error [ERR_ASSERTION]: You must specify a task function

Being new to javascript, I attempted to execute some repositories from GitHub. After installing all the required updates and running npm audit --force, I am still encountering this error. Any assistance would be greatly appreciated. Error Code : PS D:&bso ...

Using Javascript jQuery to swap out a variable with a specific value

Looking for a way to make my Javascript jQuery code more flexible. $.post('/blah', { comment_id: 1, description: ... }); Is there a way to turn comment_id into a variable that can be easily changed on the go? UPDATE What I'm trying to ac ...

Efficiently Managing Simultaneous Requests on a Single Endpoint in Express Server API

Despite the possibility of this question being repeated, I have yet to find a satisfactory answer. Given my limited experience with node.js, I am in need of some guidance. While many tout that node.js can handle incoming requests asynchronously at no cost, ...

Holding onto numerous AJAX requests while disconnected, then dispatching them once the network connection is

I'm working on an application that heavily relies on AJAX requests, requiring the rapid or concurrent sending of multiple calls. The code snippet provided serves as a basic wrapper for sending AJAX POST requests within the app. However, I've enco ...

Is it advisable to conceal the URL for a fetch request?

As I work on developing a React website, I've encountered the need to manage fetch request links differently for development and production environments. For example, using http://localhost:3000/users in development and in production. This setup is ...

Transferring properties from React Router to child components on the server side

For my Isomorphic app using React, react-router v3, and material-ui, it's crucial to pass the client's user agent to the theme for server-side rendering. This is necessary for MUI to properly prefix inline styles. Initially, the root component o ...

Tips for ensuring only one property is present in a Typescript interface

Consider the React component interface below: export interface MyInterface { name: string; isEasy?: boolean; isMedium?: boolean; isHard?: boolean; } This component must accept only one property from isEasy, isMedium, or isHard For example: <M ...

Understanding how to sum the values of two separate dropdown selections using jQuery

Is it possible to combine and total up two different selections to display on the "Total" button below? I have added calculations to each selection. When a user selects a quantity, it should automatically sum up and display on the "Total" button, but I am ...

ReactHtmlParser function is returning an object that is classified as [object Object]

Utilizing ReactHtmlParser to return a string as an HTML tag. JavaScript_Lessons_Objects.js function JavaScriptLessonObject() { const one = "Robby "; return ( [ { title: [<div><p classNam ...

Where should the defer.resolve be placed when executing a function asynchronously in a loop using JavaScript?

As someone coming from a java/python background, I am venturing into the world of JavaScript. My current task involves creating a product list with detailed descriptions of its children included in a JSON array. Here is an example of what I want to achiev ...

The JSONP method, utilizing .getJSON, is resulting in an undefined response

I'm currently experimenting with a task from Learning jQuery 4th edition by Karl Swedburg that involves Ajax, particularly JSONP. Here's the code I am using: $(document).ready(function(){ var url='https://api.github.com/users/jquery/repos& ...

What could be causing my Bootstrap accordion to malfunction?

Currently, I am in the process of constructing a website using Bootstrap 4. I have incorporated 3 individual <div> elements, each containing an accordion. These <div> sections are assigned their own unique id to facilitate the showing and hidin ...

VueJS causing roles checking to run forever, creating an infinite loop

Customizing the navigation bar to display elements based on user roles: <b-navbar-toggle right class="jh-navbar-toggler d-lg-none" href="javascript:void(0);" data-toggle="collapse" target="header-ta ...

What is the correct way to integrate HTML input elements into JavaScript code without encountering a type error?

I'm having some trouble with this code snippet. It's my first time coding and I can't figure out what's causing the issue. The error message I'm receiving is: "TypeError: Cannot read properties of null (reading 'value&ap ...