Simple Landscape in ThreeJS

I've been attempting to create a flat terrain using ThreeJS, but it doesn't seem to be working as expected.

Here is the code I'm using to create the plane:

var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), new THREE.MeshBasicMaterial({
        color: 0x0000ff
    }));
plane.overdraw = true;
this.scene.add(plane);

It seems pretty straightforward. To be honest, I just copied it from somewhere on the internet.

This is how I set up my scene and camera:

    this.camera =
        new THREE.PerspectiveCamera(
        45, // view angle
        width / height, // aspect
        0.1, // near
        10000); // far

    this.scene = new THREE.Scene();

    // add the camera to the scene
    this.scene.add(this.camera);

    // the camera starts at 0,0,0
    // so pull it back
    this.camera.position.z = 800;
    this.camera.position.y = -100;

In addition to the plane, I also have a sphere with a radius of 20 at the center, which displays correctly.

But what am I overlooking?

Answer №1

The camera is positioned to capture the "rear side" of the aircraft.

An aircraft consists of two sides, but only one is observable.

Two potential solutions:

1) Adjust the camera to focus on the "front side" of the aircraft:

this.camera.position.z = -50;

2) Alternatively, enable the doubleSided setting:

aircraft.doubleSided = true;

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 it necessary to create a new object in Node.js to establish a server?

After reviewing the information about socket.io, there is one aspect that I find confusing. I understand that to create a server, it can be done like this: var io = require ("socket.io")(); However, I am curious about why it necessitates creating a new ...

Stop iframes from redirecting the parent page

I'm currently facing a unique situation on my website where I have an iframe within the same domain. Unfortunately, due to deployment issues, I am unable to access the code inside the iframe. Whenever the iframe loads, it triggers a redirection on th ...

The challenge of managing object positioning and visibility in Three.js

Currently, I am delving into exploring grouped objects or hierarchically ordered objects. However, I have encountered an unusual issue regarding the positioning and visibility of an object3D and its children. I have a collection of objects, with a light s ...

The transmission of information through Ajax is encountering a problem as the data is not properly

Having some trouble using Ajax to send form data and echoing it on the PHP page. Since I'm new to Ajax, I might have made a mistake somewhere in my code. Below is what I currently have: $(function () { $('form').on('submit&apos ...

It is essential for each child in a list to be assigned a unique "key" prop to ensure proper rendering, even after the key has been assigned (in Next

Working with Next JS and implementing a sidebar with custom accordions (created as SideAccord.js component). Data is being looped through an array with assigned keys, but still encountering the following error: Warning: Each child in a list should have a u ...

Refine the Vuex state with a filter

Currently, I've progressed in my Vue development journey and started exploring the implementation of Vuex for state management. In the past, I had a main Vue component that handled search functionality, an array of items to iterate over, and the iter ...

Unable to properly display the message in Angular

<!DOCTYPE html> <html ng-app> <head> <script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> <link rel="stylesheet" href="style.css" /> ...

Laravel vue infinite scroll failing to load additional content

I've been trying to implement the infinite scroll feature from Element UI in my app, but for some reason, it's just not working. Here's a snippet of my code: Code script // Your JavaScript code goes here ...

The optimal method for computing the Fibonacci sequence using JavaScript

Improving my skills in optimizing algorithms and understanding big-o notation is a priority for me. I devised the following function to compute the n-th Fibonacci number. It works well for higher inputs, but I wonder how I can enhance it. What are the dow ...

Can you show me the steps to implement mouse hover action in selenium using Python with Javascript?

Is there a way to navigate to an element and trigger a mouse hover action using JavaScript and Python without additional libraries? from selenium import webdriver import time driver = webdriver.Chrome(executable_path = "chromedriver.exe") drive ...

The 'Required' attribute in HTML is malfunctioning

The 'required' attribute is not functioning properly when I try to submit the form. I've searched online for a solution, but none of them have resolved my problem. Take a look at the code snippet below - I've used the required attribute ...

Initiate an Elementor popup upon form submission (After submit event) using Contact Form 7 in WordPress

I have incorporated Elementor popups and contact form 7 into my WordPress website. Currently, my goal is to activate the Elementor popup after the contact form 7 form has been submitted. Below is what I have tried so far, and there have been no console er ...

Use the `document.getElementsByClassName` method to retrieve elements with a specific class name and then insert content between

Is it possible to select the only post with a 'selected' class and then insert a div inside or between other divs? I am currently uploading images to my website's timeline and now I am attempting to group multiple images posted on the same d ...

Submitting a form that combines Dropzone JS and Django forms using a single submit button

I have a unique challenge where I am using dropzone js to create a form for users to upload information and images. Dropzone js requires a form with a class of dropzone for drag and drop image uploads to function properly, resulting in two forms: the reg ...

How to retrieve image dimensions in Three.js and send them to a fragment shader

Is there a straightforward method for the fragment shader to determine the pixel size of an image when sending a bitmap as a uniform using THREE.ImageUtils.loadTexture()? ...

Changing the text color in a React Native TouchableHighlight component

How does TouchableHighlight change the text color when tapped? I have already configured the backgroundColor using underLayColor. Here is my updated code snippet: <TouchableHighlight style={{ borderRadius: 5}} ...

The dropdown menu is not appearing in the correct position when clicked

https://i.stack.imgur.com/fMyZQ.jpg Hello there, this link appears normal before clicking on it. But once clicked, it moves to the top of the page like so: https://i.stack.imgur.com/yZ0R0.jpg You can clearly see the difference. I have also provided the c ...

Encountered an issue when attempting to access a file on the desktop using Node.js

Here is the code I am using to read a simple file from my desktop: module.exports = function (app) { app.get('/aa', function(req, res) { fs = require('fs'); fs.readFile('‪C:\\Users\\t5678 ...

Establishing a connection to a remote node.js socket.io server using JavaScript on a different network

I successfully developed a functional chat program using socket.io with express for server setup, following the instructions on the socket.io website. When a client connects to the IP address via a browser, the Client HTML File is transmitted to them. va ...

Using ASP.NET MVC to map FormData with an array to a model class

I am currently facing an issue with mapping a list of objects in a FormData to my ASP.NET MVC Model class at the controller. I have successfully sent the FormData over to the server-side, but I am unable to bind any value. Can someone provide guidance on h ...