Creating a custom contour with BufferGeometry in Three.js: A foolproof guide

I am looking to create a unique outline in my BufferGeometry. My goal is to create a filled polygon with surrounding lines.

Currently, I have attempted using MultiMaterialObject, but the line intersects the square: http://jsfiddle.net/VsWb9/3918/

    var positionArray = [0,0,0, 0,100,0, 100,100,0, 
                         0,0,0, 100,100,0 ,100,0,0],
        colorArray = [];

    for(var i = positionArray.length;i--;)
        colorArray[i]=1 // white    


    bufferGeo.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positionArray), 3));
    bufferGeo.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colorArray), 3));

    materialsArray = [
    new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true, opacity: 0.2, transparent: true, shadding: THREE.SmoothShading})
        ];
    mesh = THREE.SceneUtils.createMultiMaterialObject(bufferGeo, materialsArray);

However, I do not want the intersecting line. While this example uses a square, my project involves numerous polygons (Pentagon, Hexagon, etc). What is the best approach to achieve a perfect outline without any intersections?

  • Should I create two separate "BufferGeometry" objects? One using LineBasicMaterial with different vertex positions sequence and another using MeshBasicMaterial with the correct sequence of vertices.
  • Or is there another solution?

Thank you

javascriptthree.js

Answer №1

To enhance the visibility of your geometry's edges, consider utilizing EdgesHelper:

var helper = new THREE.EdgesHelper( mesh, 0x00ffff );

helper.material.linewidth = 2; // you may adjust this value

scene.add( helper )

If your mesh is using a different material, there might be issues like z-fighting artifacts when using EdgesHelper. One way to address this is by utilizing polygonOffset. Check out more information at this link. Make sure to also refer to the updated fiddle provided below.

Your geometry could have some problems related to face winding order requiring a counter-clockwise direction. This needs to be addressed separately.

Refer to the updated fiddle here: http://jsfiddle.net/VsWb9/3923/

Using three.js version r.71

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

Subscription date is activated when a different part of the state changes in ngrx

Within my state, I have properties named start and end which store dates. Whenever any other part of the state is modified, the subscription for these start and end dates is triggered. Here is the subscription implementation: this.subs.sink = this.store ...

javascriptangulartypescriptngrxngrx-store

Synchronize React Hooks OnchangeORSync React Hooks On

Currently, I am in the process of transitioning my app from using a class model to utilizing hooks. In my code, there is a dropdown list where the onChange method performs the following function: filter(event) { this.setState({ selectedFilter: ...

javascriptreactjsreact-hooksstate

The ajax method is encountering an issue when trying to perform an action: It is unable to find the necessary anti-forgery form field "__RequestVerificationToken" required for the operation

I am encountering an issue with my ajax method that triggers the action method from the controller. When I run this method, I receive an error stating: The required anti-forgery form field "__RequestVerificationToken" is not present. However, upon inspecti ...

javascriptc#jqueryajaxasp.net-mvc-5

What is the best way to automatically adjust the quantity and total cost for every SKU using JavaScript?

Currently, I am developing the functionality for a virtual store's shopping cart. At the core of this feature lies a Cart class that manages data and executes calculations. This specific class does not interact with the HTML document or the DOM; its p ...

javascriptdomevent-listenershopping-cart

Transmitting an object to PHP via AJAX

Is it possible to pass an array to a PHP function using the jQuery AJAX function? Here is an example of my JavaScript code: arr_data = { field01: "data 01", field02: "data 02", field03: "data 03", field04: "data 04" } $.ajax({ url: "s ...

javascriptphpjqueryajax

Check if the AJAX call does not succeed within the .always method

I need to create a condition that checks if an ajax call fails or if the response text is 'false', then do one thing; otherwise, do something else. The code I currently have seems to work in Chrome but might not be compatible with all browsers. A ...

javascriptjqueryajax

Vuejs - Expanding Panels

Trying to implement an accordion using Vue.js has been a bit challenging for me. While I came across some examples online, my requirements are slightly different. In order to maintain SEO compatibility, I need to use "is" and "inline-template", which make ...

javascriptvue.jsvue-component

Issue with scoring quizzes in NodeJS

Hey there! I've created a quiz website using the "MEN stack" (sans React), and you can check out the repository link here. During local testing, the quiz functions as expected with no issues. The scoring is executed upon form submission, where I comp ...

javascriptnode.jsmongodbexpressmongoose

How can I update the color of a list item when it is clicked within a foreach loop using knockout js?

Currently, I am encountering an issue with changing the color when a user clicks on a list item using the latest version of knockout js. My goal is to change the color of a list item when it is clicked and maintain that color until another item is clicked, ...

javascriptjquerycssknockout.jsknockout-3.0

Utilizing Custom Validators in Angular to Enhance Accessibility

I'm struggling to access my service to perform validator checks, but all I'm getting is a console filled with errors. I believe it's just a syntax issue that's tripping me up. Validator: import { DataService } from './services/da ...

javascriptangulartypescriptvalidation

Restricting the fields in a $lookup operation in MongoDB

My Mongo object follows the schema provided below. { "_id" : "59fffda313d02500116e83bf::5a059c67f3ff3b001105c509", "quizzes" : [ { "topics" : [ ObjectId("5a05a1e1fc698f00118470e2") ], " ...

javascriptnode.jsmongodbmongooseaggregation-framework

Utilize a directive to showcase information stored within the scope

Struggling to grasp the concept of directives and encountering a bug along the way. To see my example in action, check out the codepen I've created here In my scope called "movies," I have 3 movie titles that I want to display using a directive. va ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-directive

managing vast arrays and textures within fragment shaders

I am facing a challenge in passing a large volume of data to my fragment shader within the constraints of ThreeJS and encountering limitations such as too many textures binded, oversized textures, or excessive arrays. My ultimate goal is to transmit a 256x ...

arraysopengl-esthree.jswebgltexture2d

What is the process for submitting a record to a table following the activation of a JavaScript link or button

I am working on creating a like-unlike button below each post for registered users to interact with. I have successfully created the button itself, but now I need to figure out how to store records when a user clicks the button. My idea is to utilize a tab ...

javascriptphphtmlajaxmysqli

Next.js is failing to infer types from getServerSideProps to NextPage

It seems like the data type specified in getServerSideProps is not being correctly passed to the page. Here is the defined model: export type TypeUser = { _id?: Types.ObjectId; name: string; email: string; image: string; emailVerified: null; p ...

javascriptreactjstypescriptnext.js

What is the method for connecting to a JavaScript function?

Is there a way to have JavaScript code that creates a sliding div with expanded information when clicking on a text string, and then navigate to that specific page with the text already clicked on and expanded? If so, how could this be achieved? JSFidldle ...

javascriptjqueryhtmlcss

There seems to be an issue with [object%20Object]/undefined within the

AuthenticationService.js import axios from 'axios'; const AUTH_API_BASE_URL = "http://localhost:8087/auth"; class AuthenticationService { login(user) { return axios.post(AUTH_API_BASE_URL + "/login", user); } getRo ...

javascriptreactjsjsonaxiosreact-router

Encountering an error while attempting to add a new component instance in Vue through a button click

Just to start, I want to mention that there might be a more appropriate way to achieve what I'm trying to do. Essentially, I'm looking to dynamically add an instance of a Vue component when a user clicks a button to expand it. I came across this ...

javascriptfunctionvue.jscomponents

What could be causing media queries to not update values even after being changed through JavaScript?

I have a simple navigation bar on my website, featuring links to different subpages. To enhance the user experience on mobile devices, I added a hamburger menu icon that is displayed on smaller screens. The links in the navigation bar are hidden using CSS ...

javascripthtmlcssmedia-queries

Adjusting the timeout for a particular operation according to its unique identifier

I am looking for a solution to call a method that posts an answer after an input change in my Angular project. I want to reset the timeout if another input change occurs to avoid multiple posts. Is there a smart way to achieve this? My project involves po ...

javascriptangulartypescript