Developing a personalized mesh using THREE.js

I was experimenting with Three.js and attempted to create a custom mesh using the code snippet below:

var geom = new THREE.Geometry();

//geom verts

geom.vertices.push(new THREE.Vector3(-1,-1,-1));
geom.vertices.push(new THREE.Vector3(0,-1,-1));
geom.vertices.push(new THREE.Vector3(-1,0,-1));
geom.vertices.push(new THREE.Vector3(0,0,-1));

//faces
geom.faces.push(new THREE.Face3(0,1,2));
geom.faces.push(new THREE.Face3(1,2,3));

When I try to render the object, only one of the triangles shows up (the first one). Can someone please help me figure out what I'm doing wrong or provide a tutorial on creating custom meshes in Three.js without using blender? Any guidance would be greatly appreciated.

javascript3dthree.js

Answer №1

The direction of the face winding is crucial here - the first triangle follows an anti-clockwise path while the second triangle goes clock-wise. To solve this problem, there are two different approaches:

1) Arrange the vertices correctly:

geom.faces.push(new THREE.Face3(0,1,2));
geom.faces.push(new THREE.Face3(1,3,2));

2) Display both sides of the triangle:

var material = new MeshBasicMaterial({side: THREE.DoubleSide});

Answer №2

Ensure to execute geom.computeFaceNormals(); once the vertices and faces have been added.

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

Issue with vue-cli3 eslint and compiler arising from conflicting vue/script-indent settings

Whenever my .eslint.js file includes this rule: "vue/script-indent": [ "error", 4, { "baseIndent": 1, "switchCase": 1, } ] and I save it, an error pops up: Error: Expected indentation of 32 spaces but only found 24 spaces ...

javascriptvue.jseslint

What is the method for selecting the desired month on a primeng calendar with multiple selection enabled?

I am looking for a solution to make my inline primeNg Calendar display the month of a specific date in the model, and when I remove dates from the model, I want it to show the current month. I have tried using defaultDate={{value}} and minDate={{value}}, a ...

javascriptangularprimengprimeng-calendar

A guide on moving Object3D elements using drag-and-drop in three.js

I found a great example of drag and drop functionality using this link. It worked perfectly for individual objects, but now I want to group some elements together to drag and drop them as one unit. To achieve this, I replaced the cubes in the example with ...

javascriptthree.js

Designing CSS elements that flow from top to bottom, left to right, and extend to the right when overflowing

I'm attempting to create a layout where divs are displayed from top to bottom, but once they reach the bottom of the browser window, any additional divs will overflow to the right. You can take a look at the desired layout here: https://i.stack.imgur. ...

javascriptcsshtmloverflow

The response time feature appears to be malfunctioning within Mockjax

How can I simulate a long response time using Mockjax? Despite setting the responseTime to 20 seconds, my ajax call is still being executed immediately when the page loads. Any suggestions on how to fix this issue? To isolate potential sources of error, ...

javascriptajaxcasperjsmockjax

Modify all the content within the DIV using Regex, while keeping the HTML tags intact

I am attempting to replace all the text inside a DIV, including within its children, without modifying any HTML tags. Specifically, I want to switch all instances of 'Hello' to 'Hi'. Thank you for your help. var changes = $('div ...

javascriptjqueryhtmlreplace

Automatically update and reload Express.js routes without the need to manually restart the server

I experimented with using express-livereload, but I found that it only reloaded view files. Do you think I should explore other tools, or is there a way to configure express-livereload to monitor my index.js file which hosts the server? I've come ac ...

javascriptnode.jsexpress

Difficulty arises when using relative paths with XMLHttpRequest.send

Having difficulties with a basic task here. I'm in the process of creating a website without using a server, and I've hit a snag when it comes to accessing files via XMLHttpRequest. Looking at the example code provided below, you'll see tha ...

javascripthtmlxmlhttprequest

The file socket.io.js could not be located

I've encountered an issue with my node server where it is unable to serve the route /socket.io/socket.io.js as I consistently receive a 404 error. I have attempted compiling different versions of node (currently using 0.6.13 which works on another s ...

javascriptnode.jsexpresssocket.io

Issue with JQuery Event Listener on Canvas Subelement not functioning

I encountered an issue while trying to implement a custom crop rectangle on a canvas using JavaScript. I created a function that, when called, should add a child node to the existing canvas and use JQuery listeners to draw the rectangle. However, although ...

javascriptjqueryhtmlcanvas

Ways to access a clicked element using AngularJS with ngClick

I am attempting to dynamically add a class to an element when it is clicked using AngularJS. The element is generated through ngRepeat, and I need to determine which specific element was clicked by utilizing the ng-click="foo()" directive. Here is a snipp ...

javascriptangularjsangularjs-ng-click

The like button animation works perfectly for individual posts, but for multiple posts, only the like button on the first post

Having an issue with the like button code on a single news feed. The button works for the first post, but when clicking on other posts, it only affects the first post button. I am using post UI and looping the UI based on the total post count without Javas ...

javascriptphpcsshtmlanimation

Having trouble dynamically inserting a row into a Jquery datatable

When working with jQuery Datatable, I am currently involved in two main functions: Filtering and searching the table based on select tags. Dynamically adding rows to the datatable using Ajax. However, when adding a row dynamically, the row count increase ...

javascriptjqueryajaxdatatables

Jquery failing to trigger click() on a div with an id

Within my erb file, there exists a script that looks like the following: function checkJquery() { if(window.jQuery) { jQuery(document).ready(function() { alert('onready'); $('div#habla_topbar_div').click(function( ...

javascriptjqueryhtmlruby-on-rails

AngularJS JSON Array

I have an array containing multiple objects in JSON, as well as a select element that contains an array. Depending on the selection made in the first array, another select box will be dynamically loaded right below it. HTML Code <div class="list"> ...

javascriptarraysjsonangularjs

Try block must be followed by either a catch block or a finally

Currently, I am utilizing Node, Express with EJS view engine, nano for CouchDB, and encountering a perplexing error that I couldn't find any specific information about on Node or JavaScript via Stack Overflow or Google. The troublesome section of my c ...

javascriptnode.jsexpress

Steps to add text to a bar chart in morris.js

I have a morris.js bar graph and I want to display the count on top of each bar. After checking the morris.js bar documentation, I couldn't find a solution for it. When hovering over the bars, it should show the value, but I specifically need to show ...

javascriptjquerymorris.js

Issue with Vue 3: Composition API does not support Array of refs

Check out the code snippet below. <template> <div v-for="item in arr" :key="item">{{ item }}</div> </template> <script> import { ref } from "vue"; export default { name: "TestArr", ...

javascriptvue.jsvuejs3vue-composition-api

Updating JSON data by including a new element

Can elements be added to a JSON file without loading it into memory using JavaScript or jQuery? I have the JSON files stored on the server side and I need to make edits on the client side. ...

javascriptjqueryjson

The ReferenceArrayInput request is lacking an api-prefix

I have been attempting to utilize the ReferenceArrayInput component from react-admin in order to modify a OneToMany relationship. Although the options for the multi-select input load correctly, the actual selection does not work as expected. Interesting ...

javascriptreactjsreact-adminapi-platform.com