Tips for emphasizing a cube face when it is hovered over in THREE.js

I'm currently using a raycaster to determine the face of a cube and then apply color to it following this method:

const colorAttribute = intersected.object.geometry.getAttribute('color');
colorAttribute.setXYZ(face.a, color.r, color.g, color.b);
colorAttribute.setXYZ(face.b, color.r, color.g, color.b);
colorAttribute.setXYZ(face.c, color.r, color.g, color.b);
colorAttribute.needsUpdate = true;

However, there seems to be an issue with the face not being completely painted over. Can anyone provide assistance? https://jsfiddle.net/kirill321592/fjdxpos1/43/

javascriptthree.js3draycasting

Answer №1

To depict each face accurately, it is essential to specify the color of both triangles. Explore an alternative method that does not involve vertex colors by creating a new THREE.Mesh with a boxGeometry and array of 6 materials, one for each face. Check out the demo at jsfiddle.net/zLt97pej. Thanks @WestLangle for sharing this insight!

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

Update the useMemo state value after the initial function block has been executed

Currently, I have a list of characters from Dragon Ball Z that users can filter based on gender, race, or both using useMemo. let dbzCharacters = useMemo<CharacterObj[]>(() => { if (filterGenderValue && filterRaceValue) { retur ...

javascriptreactjsreact-hooksreact-usememo

Updating the NPM entry point without relying on an index.js file

After successfully publishing a private module to NPM, which contains shared code used by multiple services, I encountered an issue with the transpilation process. Since the code is written in ES6, it needs to be transpiled using Babel before being publish ...

javascriptnode.jsnpm

Adding information to an HTML table using JQuery

Is there a way to incorporate JSON data into an HTML table? The JSON data follows this format: https://i.stack.imgur.com/lzdZg.png This is the desired HTML table structure: <table class="table table-bordered table-hover "> ...

javascriptjqueryjson

Dealing with the "TypeError: Cannot read property 'style' of undefined" error in material-ui Transitions: A troubleshooting guide

While attempting to incorporate transitions within my react app, I encountered a recurring error whenever I tried to implement any transition module: "TypeError: Cannot read property 'style' of undefined". (anonymous function) node_modules/ ...

javascriptreactjsmaterial-ui

Combining Angular with MVC partial views

What I'm Looking For I require a sequence of interactive screens that progress to the next screen upon button click. Each previous screen should collapse while loading the new screen using a partial view from the MVC backend. My Current Setup Curre ...

javascript.netasp.net-mvcangularjsasp.net-mvc-4

Interactive canvas artwork featuring particles

Just came across this interesting demo at . Any ideas on how to draw PNG images on a canvas along with other objects? I know it's not a pressing issue, but I'm curious to learn more. ...

javascriptjquerycsshtml

Creating a semi-circle donut chart with Highcharts using the Highcharts-ng library

I have been working on integrating a Highcharts Semi-circle donut chart into my angular application using the Highcharts-ng directive. However, I seem to be facing an issue where the plotOptions section is being skipped entirely, leading to a full circle p ...

javascriptjqueryangularjshighcharts

Creating components through the command line while managing multiple projects using Angular CLI 6

Currently, I am utilizing the most recent Angular CLI version (v6). Within my codebase resides a collection of applications housed within the projects directory. My objective is to create and organize various modules and components within these projects v ...

javascriptangularangular-cliangular-cli-v6

The data type of Subscription: prototype, NOT ASSIGNED

I am encountering the following error when attempting to return a subscription object. Error Message:-------- Type 'Subscription' does not have the prototype and EMPTY properties that are expected from type 'typeof Subscription' Here ...

javascriptangular

Is there a way to turn off predictive text for reCAPTCHA on my mobile device?

Using reCAPTCHA on a sign-up form can get frustrating on mobile devices, with constant dictionary word suggestions while typing. I am aware of how to disable this feature for normal input fields by adding attributes through JavaScript, but shouldn't ...

javascripthtmlmobilerecaptcha

Upon initiating a second user session, NodeJS yields contrasting MySQL outcomes

As a novice in NodeJS and Express, I find myself stuck on what seems to be a trivial issue. Despite my best efforts, I have been unable to resolve the problem on my own. My aim is to create a basic web application that allows user authentication and displ ...

javascriptmysqlnode.jssessionexpress

Utilize Flexbox to arrange elements in a grid layout based on specified number of columns and rows

My div is currently empty. <div id="container"></div> I have applied the following styling with CSS: #container{ display: flex; position: relative; flex-flow: row wrap; width: 100%; } The goal is to add more divs to the cont ...

javascripthtmlcssflexbox

What is the best way to extract valid objects from a string in JavaScript?

Currently, my data is being received through a TCP connection. To determine if a string is a valid JSON object, we use the following method: let body = ''; client.on('data', (chunk) => { body += chunk.toString(); try { ...

javascriptnode.js

Storing information in the DOM: Choosing between Element value and data attribute

When it comes to storing values in a DOM element, we have options like using the data attribute. For example, $("#abc").data("item", 1) can be used to store values and then retrieve them with $("#abc").data("item"). However, I recently discovered that th ...

javascriptjqueryhtml

Reset the dropdown list back to its initial state

I am facing an issue with two dropdown lists in my view. When I change the value on the first one, it should update the second one accordingly. Initially, this functionality works fine with the script provided below. However, if I change the first dropdown ...

javascriptjqueryhtmlasp.netasp.net-mvc

Steps to activate a single button within a deactivated fieldset

Is there a way to deactivate all elements within a Fieldset, while keeping certain buttons active? Check out this demo. <fieldset ng-disabled="true"> <legend>Personalia:</legend> Name: <input type="text"><br> Em ...

javascripthtmlangularjs

Transform the string property extracted from the API into a JSON object

When making a request to an API, the data returned to the front end is in the following format: { name: 'Fred', data: [{'name': '"10\\" x 45\\" Nice Shirts (2-pack)"', 'price' ...

javascriptangulartypescript

Exploring the capabilities of JavaScript on the iOS platform

Here is the code I've written for my iOS application: webView = [[UIWebView alloc] init]; webView.delegate = self; [webView loadHTMLString:@"<script type=\"text/javascript\" src=\"myFile.js\"></script& ...

javascriptios

Unable to locate the <router-view> component within VueRouter

I recently completed a project using Vue.js 3.2.13 and Vue-Router 4.0.14. Despite my efforts to ensure everything was set up correctly, I encountered an error in the browser that said "[Vue warn]: Failed to resolve component: router-view". The specific lin ...

javascriptvue.jsvue-routervuejs3vue-router4

Session data in ExpressJS is not being stored in the cookie

There are plenty of questions on this topic, but unfortunately, I haven't found any answers that solve my issue. I'm using Chrome with ExpressJS and VueJs 3 to build a simple application where users can "login" and access another page. All I wan ...

javascriptnode.jsvue.jsexpress