The dimensions of the sprites within Three.js geometry

I am interested in creating an animation of sprites moving along a figure, particularly sprites that walk along the figure. An example of what I envision can be seen here:

http://armsglobe.chromeexperiments.com/

I found some helpful information related to my project on this question:

http://stackoverflow.com/questions/25898635/three-js-how-to-animate-particles-along-a-line

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

In my current attempt, the sprites start small and then increase in size. However, I want all sprites to remain the same size.

I have tried reviewing the code, but I am unsure how to make all sprites the same size. Any assistance or guidance on achieving this would be greatly appreciated.

If you are able to help, I would be very grateful. https://i.sstatic.net/IEyc8.png

javascriptanimationthree.jsparticles

Answer №1

To disable the sizeAttenuation feature in Sprite, you must utilize Pointcloud. http://example.com/code123

In the PointCloud material parameter, set sizeAttenuation= false.

This will ensure that all particle sizes are relative to the canvas size and do not change perspective.

var geometry = new THREE.Geometry();      
    geometry.vertices.push( new THREE.Vector3() );
var size = 32; // represents 32px

var sectorIcon = new THREE.PointCloud( geometry, new THREE.PointCloudMaterial( { size: size, color: new THREE.Color( 0xffffff ), depthTest: 1, depthWrite: false, opacity: 0.5, sizeAttenuation: false, blending: THREE.AdditiveBlending, transparent: true, map: THREE.ImageUtils.loadTexture("img/sectors/"+value.image_file) } ) );

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

Angular 4's Mddialog experiencing intermittent display problem

While using MDDialog in my Angular app, I've encountered a couple of issues. Whenever a user clicks on the div, flickering occurs. Additionally, if the user then clicks on one of the buttons, the afterclose event is not triggered. Can anyone provide ...

javascriptangulartypescript

Is it possible to utilize the onClick event while preserving the use of "this" within the function it triggers?

There is a project with specific needs that require implementation. The task involves adding points to the total score when a button is clicked, without making any changes to the provided HTML code. This requires writing unobtrusive JavaScript code by atta ...

javascripthtml

Optimizing rest service calls with $resource

I am currently learning about the $resource to utilize RESTful Web Services. For my first attempt, I created a factory like this : 'use strict'; angular.module('BalrogApp').factory('Req', ['$resource', function($r ...

javascriptangularjsrestangular-resourceangularjs-resource

How can the Material UI select component be customized to automatically scroll to the top when all items are selected?

After implementing the material ui select feature, I observed that when all items are selected, closed, and then reopened, the scroll position is automatically moved to the end. Is there a way to prevent this and keep it at the top? Current display: http ...

javascriptreactjsdommaterial-ui

How can the size of the font in a <div> be adjusted based on the number of characters present?

I am attempting to create a basic HTML and CSS layout with two div blocks, each 1000px wide, within a parent container that is 3000px wide. <div class="blocks"> <div class="block-a">text 1</div> <div class="block-b">text 2& ...

javascriptjqueryhtmlcss

MUI useStyles/createStyles hook dilemma: Inconsistent styling across components, with styles failing to apply to some elements

I have been trying to style my MUI5 react app using the makeStyles and createStyles hooks. The root className is being styled perfectly, but I am facing an issue with styling the logoIcon. Despite multiple attempts to debug the problem, I have not been suc ...

javascriptcssreactjsmaterial-ui

Tips for choosing a specific point on a Vuetify <v-slider> using Cypress

Currently, I am exploring how my application responds when a user interacts with a specific area on a basic Vuetify <v-slider>. How can I replicate this scenario in a Cypress integration test effectively? For instance, to click on the center of the ...

javascriptvue.jsvuetify.jscypress

Can I change the name of an item in ngRepeat?

When repeating in a view: ng-repeat="item in list" In some scenarios, the 'item' looks like this: { "name": "john", "id": 1 } While in others, it appears as: { "value": { "name": "john", "id": 1 } } Is there a way to rena ...

javascriptangularjsangularjs-ng-repeat

Using `on('click') in JQuery has a one-time effect

Although there are many questions similar to this one, I am still having trouble figuring it out. <div class="message"></div> <button id="getMessage">Get Quote</button> $.getJSON("http://quotesondesign.com/wp-json/posts?filter[or ...

javascriptjqueryajax

Utilizing Next.js - Implementation of a unique useThemeMode hook to efficiently manage theme preferences stored in the browser's localStorage, seamlessly integrating with toggleTheme

For a while now, I've been trying to figure out how to toggle my favicon based on the theme logic of my application and the current theme state stored in localStorage. My approach involves using CSS variables and data attributes applied to the html bo ...

javascriptcssreact-hooksnext.jsstyled-components

Issue with undefined object in ExpressJS PUT method

Attempting to utilize the PUT method for updating a record in my database, I encountered an issue with the object not being defined. ReferenceError: blogpost is not defined Following this tutorial for routing steps, I noticed that while the variable is d ...

javascriptnode.jsexpressroutes

Skipping is a common issue encountered when utilizing Bootstrap's Affix feature

I'm trying to implement Bootstraps Affix feature in a sticky subnav. <div class="container" data-spy="affix" data-offset-top="417" id="subnav"> I've adjusted the offset to ensure there's no "skip" or "jump" when the subnav sticks. Ho ...

javascriptjquerycsstwitter-bootstrapaffix

Something is amiss with the PHP email validation functionality

I have been facing issues with the functionality of my form that uses radio buttons to display textboxes. I implemented a PHP script for email validation and redirection upon completion, but it doesn't seem to be functioning correctly. The error messa ...

javascriptphpjqueryhtmlcss

Pattern matching for a string with numerous repetitions using Regular Expressions

There's a [tree] and a cat and a [dog] and a [car] too. I am looking to find the words inside each set of square brackets. The resulting array will be tree, dog, car My attempt at using match(/\[(.*)\]/g) didn't work as expected. It ...

javascriptregexmatch

What is the process of creating a global variable in Node.js?

My task involves calling an API that will return a JSON object stored in a variable. I need to print part of this JSON object on the console. However, I am facing an issue where I can't load the data to the console outside of the request{} loop. How c ...

javascriptnode.js

Transferring information between Express and React through the Contentful API

I have embarked on a journey to explore Contentful's headless CMS, but I am encountering a challenge with their API client. My goal is to combine Express with React for server-side rendering, and I am utilizing this repository as my starting point. S ...

javascriptexpressreactjses6-promisecontentful

Searching in TypeScript tables with Angular's search bar

I've successfully completed a basic CRUD application, but now I need to incorporate a Search Bar that can filter my table and display rows with matching letters. I'm unsure how to approach this in my component. I've seen examples using pipe ...

javascripthtmlangulartypescriptangular-ngmodelchange

How can I keep the cursor from automatically moving to the beginning of an input field when the type changes?

Currently in the process of creating a Password field that allows users to hide or display their password in React/Ionic. I am aiming to maintain focus on the password field when switching the input type, similar to how it is done on the PayPal Login page ...

javascripthtmlcssreactjsforms

I'm experiencing a flickering issue with my carousel when it reaches over 10,000 pixels during animation. Could this be related to a jQuery problem

After my carousel moves past 10000 pixels, it starts flickering through multiple elements. I'm utilizing jCarousel Lite: Could this be a jQuery-related issue? My initial assumption is that it may be specific to jCarousel Lite, but there doesn't ...

javascriptjqueryjcarouselcarouselpixel

Unexpected issue with Ajax form submission when using the submitHandler function in Jquery

I am faced with the challenge of validating a form using the jQuery Validation Plugin and submitting data to a database without refreshing the page. Despite marking all fields in my form as required, the issue arises where empty fields are still submitted, ...

javascriptphpjqueryajaxforms