Personalize the edges of PlaneGeometry for every segment in ThreeJS

Currently, the PlaneGeometry offers the option to adjust segment width and height, but this does not affect the edges. Each segment is currently mapped with indexed positions that create an 'N' shape when viewed in wireframe mode:

The current indexes are as follows:

  • 0 = South West
  • 1 = North West
  • 2 = South East
  • 3 = North East

While this setup provides an 'N' shape for each segment with wireframes, I am interested in creating an 'X' shape with edges for every segment. Currently, I am using planes to achieve varying heights, and having an 'X' shape would result in a less angular appearance (see screenshots below).

I believe all necessary vertices already exist, but how can I add an extra edge between points 0 and 3 for each segment?

I have searched online for answers, but most articles predate version R125, which introduced significant changes to Geometries. I am currently working with version R135.

I assume that creating a custom Buffer Geometry is the solution, but I am unsure of the best way to implement this without sacrificing performance.

https://i.sstatic.net/dgAXf.jpg

https://i.sstatic.net/E2Gpl.jpg

  • All red and blue lines represent existing edges in wireframe mode.
  • All green lines indicate desired edges that do not currently exist. What would be the most efficient method to achieve this without compromising performance?

Thank you in advance!

javascriptthree.js

Answer №1

After several attempts, I was able to create a custom PlaneGeometry using a BufferGeometry in the end. Despite being slightly heavier to use, it wasn't as difficult as I initially thought.

The custom geometry contains 36 positions per tile segment, compared to the default PlaneGeometry which only has 12 positions. While having 3x more positions may not directly translate to 3x more performance usage, it certainly uses more resources than the default geometry.

The changes in height in the results appear smoother:

https://i.sstatic.net/wmVoF.png

Below is the code used to create the custom geometry:

    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array([

        // (North Face)
        .5, -.5, 0, // 0:  Center
        1, -1, 0,   // 1:  NE
        1, 0, 0,    // 2:  NW

        // (East Face)
        .5, -.5, 0, // 3:  Center
        0, -1, 0,   // 4:  SE
        1, -1, 0,   // 5:  NE

        // (South Face)
        .5, -.5, 0, // 6:  Center
        0, 0, 0,    // 7:  SW
        0, -1, 0,   // 8:  SE

        // (West Face)
        .5, -.5, 0, // 9:  Center
        1, 0, 0,    // 10: NW
        0, 0, 0,    // 11: SW

    ]);

    geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
 
    const material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true  } );
    const mesh = new THREE.Mesh( geometry, material );

    mesh.rotation.x = - Math.PI / 2;
    scene.add( mesh );

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

When the same component is conditionally rendered, it does not activate the mounted() hook

I am new to Vue and eager to learn. I am attempting to conditionally render a component like so: <div> <Map v-if="bool" mapSrc="src1.jpg" :idList="idList1" :data="dataVariable1"></Map> <Map v-else mapSrc="src2.jpg" :idList="idList ...

javascriptvue.jsconditional-statementsrendering

Passing data from the controller to the $resource object in Angular with the MEAN stack

After several attempts to troubleshoot my issue with passing parameters to the Express server, it turns out the problem lies on the Angular side. When I manually inserted the id in the flConstruct.js function, the query worked correctly. It appears that ...

javascriptangularjsgetmean-stackangular-resource

Can JavaScript event listeners be compelled to trigger in a specific sequence?

Is there a way in JavaScript to receive notification or execute a callback function once an event has completed its propagation? Put differently, is it possible to 'prioritize' an event and ensure that it gets triggered after all other event lis ...

javascriptreactjs

What could be causing the error message 'Uncaught SyntaxError: Identifier 'randFilmIndex' has already been declared'?

function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min) + min); } function arrayRemove(arr, value) { return arr.filter(function(ele){ return ele != valu ...

javascripthtml

Incorporate a Vue.js computed property into the data retrieved from a server

Coming from Knockout.js, where observables are easily created by defining them, I'm curious if there's a similar approach in Vue.js. let vm = { someOtherVar: ko.observable(7), entries: ko.observableArray() }; function addServerDataToEnt ...

javascriptvue.jsknockout.jsvuejs2async-await

How should I integrate my JS authentication function in Rshiny to enable the app to utilize the outcome?

Currently, I have an Rshiny application set to be published on the server but in order to ensure that a specific user has access, we require an API authentication token. The process of authentication is handled within JS tags outside of the application, wh ...

javascriptrshiny

What could be the culprit behind the error in the "blend-mode" function when using .mp4 files in Firefox?

Attempting to utilize mix-blend-mode with an mp4 playing in the background has been a fun experiment. The concept is to have a div containing some text, with the video playing in the background to create an effect on the letters. This method works flawless ...

javascriptcssreactjsfirefoxmix-blend-mode

Exploring the power of Angular Js $httpParamSerializer alongside jQuery's $.ajax

Currently, I am in the process of developing an Angular.js application where I need to send a POST request to a PHP server. The data that needs to be transmitted is in the format of nested objects. Here is an example of the data structure: var data = { ...

javascriptphpjqueryajaxangularjs

Animating an object in Three.js as it transitions smoothly between two different positions

If I have an object positioned at position.x = 0 and I wish to animate it smoothly to position.x = 2.435 in the render loop, how can I achieve this effect? ...

javascriptthree.js

The parameter is causing the Aggregate Function to malfunction

When fetching MongoDB data, I encountered an issue. Using the JavaScript parameter to retrieve data from MongoDB resulted in a null return, but manually typing it brought all the data without any problems. That part is working fine. const data = await Numb ...

javascriptmongodb

Mongoose exploring the use of promises to manage pre-save errors

I'm facing an issue with using pre-save to handle errors for existing users or emails. When I remove the pre-save block, everything works fine, but I get the default mongoose error for duplicates due to using the Unique feature in my schema. I want t ...

javascriptnode.jsmongodbmongoose

Is there a way to access an object within another object without the need to use a function

Having trouble accessing an object? Let's solve this mystery together. I'm trying to access 'ctx', but base.ctx keeps returning null (is there a closure involved?). window.base = function () { var c = null, ctx = null; ...

javascript

When using Node.js with Firebase, information is not stored in the session

I've been attempting to implement session management in my application to keep track of user log-ins and other activities. However... Whenever I try the simplest way, I consistently encounter this error: Warning: connect.session() MemoryStore is ...

javascriptnode.jsfirebasesessioncookies

Should I include JSX or JS when exporting ReactJS components as node modules to npm?

I've been busy developing React.js components and sharing them as modules on npm. My approach involves utilizing a gulp task to convert all jsx components into js, leveraging gulp-react: var react = require('gulp-react'); gulp.task(' ...

javascriptnode.jsnpmgulpreactjs

parent triggers resolution when sending a signal to child

My routes using ui-router are structured like this: $stateProvider .state('studies', { url: '/studies?all&field&term&page&sort&sort_dir', templateUrl: 'scripts/studies/studie ...

javascriptangularjsangular-ui-router

Is there a more effective method for detecting changes in a class variable in JavaScript, aside from using setInterval()?

Is there a more readable way to monitor changes of a class variable from its instance? Although I can use setInterval() to achieve this, the code becomes quite difficult to read. let calibrator = new Calibrator("hardwareName"); calibrator.connect(); let ...

javascript

What is the best way to display compiled Transcluded HTML in Angular?

I am facing a challenge in trying to display customized HTML content using Angular directives for nesting divs multiple times. When I execute the code below, the transcluded tag is displayed correctly but the browser output shows the string text " ". I att ...

javascriptangularjsangular-directiveangularjs-ng-transcludetransclusion

Difficulty with AngularJS pagination and encountering errors when trying to read the property 'slice' of an undefined value

Could someone please help me with this issue I'm facing? Here is the code snippet: (function () { var app = angular.module('store', ['ui.bootstrap']); app.controller('StoreController', function ($scope, $http) ...

javascriptangularjspaginationslice

Having trouble with HtmlInput.focus() functionality in react.js?

I am trying to develop a React app for measuring typing speed. However, I have encountered an issue with my code. Here is a snippet of the code I'm working on: { txt && txt.map((c, i) => ( <Character key={i} ...

javascriptreactjsfocus

Ways to obtain a list of properties for an object

I have a collection of items, each item containing various attributes including a list of related elements: { name : 'Club 01' , id : 1 , form : 45 , points : 0 , tactics : 'neutral' , played : ...

javascriptarraysloopsproperties