Triangles in Three.js fail to render

Here's the complete code snippet:

http://jsfiddle.net/YzR33/

My goal is to create triangles and assign colors to each vertex. However, I'm encountering an issue where certain triangles are not being displayed when specific coordinates are set.

// Attempting to render 20 triangles but only 5 are visible on the screen
for (var i=0; i<20; i++) {
    drawTriangle(
        [[4, 10], [1, 5 + i], [10, 10]], // coordinates
        [0x00ff00, 0xaa0000 + i*256*100, 0x555555 + i*256*100] // colors
    );
}

var triangles = new THREE.Mesh( geometry, material );
scene.add(triangles);    
renderer.render(scene, camera);

...

function drawTriangle(coords, colors) {
    // Triangle counter
    if (typeof this.cnt == 'undefined')
        this.cnt = 0;

    var p1  = new THREE.Vector3(coords[0][0], coords[0][1], 1);
    var p2  = new THREE.Vector3(coords[1][0], coords[1][1], 1);
    var p3  = new THREE.Vector3(coords[2][0], coords[2][1], 1);
    geometry.vertices.push( p1 );
    geometry.vertices.push( p2 );       
    geometry.vertices.push( p3 );

    geometry.faces.push( new THREE.Face3( this.cnt*3, this.cnt*3+1, this.cnt*3+2 ) );

    geometry.faces[this.cnt++].vertexColors = [
        new THREE.Color(colors[0]),
        new THREE.Color(colors[1]),
        new THREE.Color(colors[2])
    ];
}

Answer №1

When drawing triangles, be aware that some may appear backfacing due to the triangle normal. To ensure all triangles are visible, include side: THREE.DoubleSide in your material settings.

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

Troubleshoot: Why is fs.createReadStream in node.js only reading the last line of

Hello, I am currently facing some frustrating issues while trying to stream the contents of my CSV file. Below is the code snippet I am using, and my struggles are hidden in the comments. var fileReadStream = fs.createReadStream(inFile); // I&a ...

Sending information from tinyMCE text field to PHP using AJAXgetMethod

When I use a TinyMCE 4.0 text field to post HTML data through AJAX, I am encountering an issue where the data doesn't reach the server side properly. In Firefox Firebug, it shows that I have posted this data: attendanceID=&noteID=&Category=2 ...

Should one use Javascript library dependencies with or without bundling?

I'm in the process of packaging a library so that it can be utilized in two different ways: <script src="myLib.js"/> as well as mylib = require('myLib') However, myLib relies on several other libraries, some of which I believe the ...

"Looking to trigger a server click using JQuery or Javascript in your code? Here's how you can

I am facing an issue with triggering a Server-Side OnClick event on an ASP Server Button within a User Control using JavaScript or JQuery. The current methods I have tried do not produce the desired result as they do not actually simulate a user clicking t ...

What is the best way to save javascript code without running it?

I've been attempting to insert AdSense JavaScript code into a specific div location using jQuery, but it appears that the JavaScript code does not function well inside a jQuery variable. It gets executed instead. Despite trying to encode it with PHP&a ...

an all-encompassing loading animation designed specifically for updates to location.href

We have a situation where a customer's website is displaying extremely slowly within an iFrame, taking about 7 seconds to load. All we can do is provide the customer with a JavaScript file for inclusion on their site, as they are not willing to make a ...

Vuefire encountering an issue with Vue 3 and throwing a Vue.use error

After setting up a Vue app and importing Vue from the vue module, I encountered an issue: ERROR in src/main.ts:4:5 TS2339: Property 'use' does not exist on type 'typeof import("/data/data/com.termux/files/home/ishankbg.tech/node_modules/vue/ ...

Increase the dimensions of the jQuery modal confirmation box

I am working on a jQuery confirmation dialog that displays some details for the user. My goal is to have the dialog adjust its dimensions after the user clicks "YES" to show a smaller text like "Please wait...". How can I dynamically change the size of the ...

Can you identify the animation being used on this button - is it CSS or JavaScript?

While browsing ThemeForest, I stumbled upon this theme: What caught my eye were the animation effects on the two buttons in the slider ("buy intense now" and "start a journey"). I tried to inspect the code using Firebug but couldn't figure it out com ...

What is the proper way to handle a 504 response header in an AJAX request using jQuery?

Recently, I encountered an issue with an AJAX call from the client that caught my attention. Here is a snapshot of how it looked: $.ajax({ 'url': '/converter/ajax-make-corrections/', 'data': { ...

Receiving a 405 error when making an API call - could the routing be misconfigured? (Using NextJS and Typescript)

Hey there, I've been working on implementing a custom email signup form that interfaces with the Beehiiv newsletter API. If you're interested, you can take a look at their API documentation here: Beehiiv API Docs Currently, my web application i ...

React Context - Ensure synchronized deletion of user posts across routes while maintaining pagination during fetching

INTRODUCTION I am striving to replicate the behavior commonly seen in social networks, where deleting a post by a user results in its automatic removal across all app routes. This functionality is reminiscent of how platforms like Instagram or TikTok oper ...

What is the process for uploading a single file and an array of files with varying names using multer?

I am having trouble figuring out how to upload a main image and side images from 2 different file inputs using multer. It seems that multer only accepts one upload per route. How can I work around this issue? I keep getting an unexpected field error when a ...

Checking a bcrypt-encrypted password in an Express application

I am encountering an issue with my login password verification code. Even when the correct password is entered, it is not being validated properly. Can anyone provide assistance with this problem? login(req, res) { const { email, pass } = req.body; ...

The jstree does not seem to be generating the tree structure as expected based on

I am utilizing the jstree plugin to construct a hierarchical tree view of locations, rooms, and assets for a company within a PHP application that I am developing. The main intention behind this tree is to enable users to select an asset while going throu ...

Leveraging ternary operators within HTML elements

Currently, I am utilizing the Vue.js framework to create a dynamic list that updates based on two different list objects. My main objective is to adjust the border of the list cards depending on a specific condition. Below are the defined cards: <li ...

Error in AngularJS and TypeScript: Property 'module' is undefined and cannot be read

I'm attempting to incorporate TypeScript into my AngularJS 1.x application. Currently, my application utilizes Webpack as a module loader. I configured it to handle the TypeScript compilation by renaming all *.js source files to *.ts, and managed to ...

When constructing a file directory URL, it is important to utilize the forward slash "/" in the filename

As I am creating a URL, the process involves taking the filename and using it to create a folder with that name. However, an issue arises if the name contains "/", as it causes the URL to break and creates an undesired location. For example: var fileDir ...

The file-loader is able to organize images into separate folders when saving them. For example, an image file named "example.jpg" located in Project/Module

Hey there! I'm currently in the process of setting up a Webpack configuration that will generate files for each folder within my project. Unfortunately, creating a separate webpack.config file for each folder is not an option. So far, I have successf ...

Refresh a div element automatically with information from a different webpage using jQuery

I've been attempting to automatically reload a page and fetch new data every 10 seconds, or even less. However, the codes I've tried so far have not been successful. Here is my current approach... // script // <script> $(document).rea ...