How to display a minimalist white dot in three.js

I am currently working with THREE.WebGLRenderer and I have a requirement to display multiple white dots of the same size at specific locations in 3D space.

Is it recommended to use sprites, calculate the 2D screen coordinates, and utilize SpriteMaterial with useScreenCoordinate?

Would resizing the sprites based on their distance from the camera be a better approach?

Are options like SpriteMaterial.scaleByViewport or SpriteMaterial.sizeAttenuation available for this purpose? Is there any relevant documentation that I can refer to?

Is there an equivalent method like GL_POINTS where I can define a single vertex and get a colored pixel at its position? Should I consider experimenting with PointCloud?

Any advice or suggestions would be greatly appreciated!

Edit: It is important that all points appear with uniform size on the screen.

javascriptthree.js

Answer №1

Implementing .sizeAttenuation with a single-vertex PointCloud works, however it may seem like an unnecessarily complex solution:

let dotGeometry = new THREE.Geometry();
dotGeometry.vertices.push(new THREE.Vector3( 0, 0, 0));
let dotMaterial = new THREE.PointsMaterial( { size: 1, sizeAttenuation: false } );
let dot = new THREE.Points( dotGeometry, dotMaterial );
scene.add( dot );

Answer №2

Here's an update on the attribute interface:

Version r139

Creating a new THREE.BufferGeometry object with positions set:
const dotGeometry = new THREE.BufferGeometry();
dotGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([0,0,0]), 3));
Defining material for the points:
const dotMaterial = new THREE.PointsMaterial({ size: 0.1, color: 0xff0000 });
Creating the points object:
const dot = new THREE.Points(dotGeometry, dotMaterial);
Adding points to the scene:
scene.add(dot);

Answer №3

Customized Code for r125

This specific code snippet was customized based on an example provided in the official documentation of threejs. By making some modifications, it was adapted to suit a particular use case.

let customGeometry = new BufferGeometry();
customGeometry.setAttribute( 'position', new Float32BufferAttribute( [0,0,0], 3 ) );
let customMaterial = new PointsMaterial( { size: 0.1, color: 0x00ff00 } );
let customPoints = new Points( customGeometry, customMaterial );
scene.add( customPoints );

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 DropdownListFor validation using jQuery when the onchange event triggers submission

DropdownListFor @Html.DropDownListFor(x => x.selectedDateFilter, new SelectList(Model.bydatefilter, "id", "dt", Model.selectedDateFilter), "--Select Date--", new { onchange = @"this.f ...

javascriptc#jqueryasp.net-mvc

Combining property values based on a common property in an array of objects using JavaScript

I have a large array filled with various objects structured like: [ { "type": "bananas", "count": 15 }, { "type": "kiwis", "count": 20 }, { "type": "bananas", ...

javascriptarraysangulartypescript

Encountered an issue while trying to register a service worker: "[ERROR] Cannot import statement outside

With the utilization of register-service-worker, the boilerplate for registerServiceWorker remained untouched. /* eslint-disable no-console */ import { register } from 'register-service-worker'; if (process.env.NODE_ENV === 'production&ap ...

javascriptvue.jsimportservice-workerecmascript-5

The issue of the window.open method malfunctioning on Internet Explorer 9

Struggling to make it work in IE9: Note: I forgot to mention that $variable is coming from a $_GET request based on a drop down menu selection. I am currently offline, <a href="#" onclick="window.open('https://domain.com/contact-form?chatq=& ...

phpjavascriptinternet-explorerinternet-explorer-9

The Material UI read-only rating component fails to update even after the data has been successfully loaded

I have a rating component in my child component, and I am passing data from the parent component through props. However, there seems to be an issue with the MUI rating value not updating when the data is ready for viewing. https://i.sstatic.net/bqSfh.jpg ...

javascriptreactjsmaterial-ui

Express Power Tool - Error: app.set function is undefined

My journey with creating an API using Node/Express began with a solo endeavor to learn the basics in a 'naive' manner. The initial setup worked smoothly, prompting me to experiment with express-generator. Upon completion of the setup process, th ...

javascriptnode.jsexpressexpress-generator

Learn the steps to designing a responsive class using Angular2's ngClass feature

Imagine a scenario where the object models in my cloud Array include a weight key: return [ { term: '1994', weight: 0 }, { term: '2017', weight: 0 }, { term: '89th', ...

javascriptangularmarkupng-class

What is the proper method for incorporating a Greater-than symbol within a jsx tag?

I am attempting to display a Greater-than sign '>' inside of a button using material-ui with react, but I am receiving a parsing error. Is there a simpler way to achieve this without writing lengthy code? <Button onClick={includeOperator(& ...

javascriptreactjsmaterial-uijsx

JQuery/JS function not functioning as expected

Creating HTML with jQuery to retrieve data from a web API. At the start of my script, I defined a function that checks the selected value of a dropdown and assigns it to a global variable. var $seldom; $(document).ready(function () { function chkdom() ...

javascriptjqueryajax

Tips for transferring complete HTML content within a JSON payload

I've been working on a jQuery script to convert an entire HTML page into JSON text. My goal now is to transform this code into a JSON string. In the resulting JSON: The 'text1' value will store the complete HTML in a single string format ...

javascriptjqueryhtmljson

Does moment/moment-timezone have a feature that allows for the conversion of a timezone name into a more easily comprehendible format?

Consider this example project where a timezone name needs to be converted to a more readable format. For instance: input: America/Los_Angeles output: America Los Angeles While "America/Los_Angeles" may seem human-readable, the requirement is to convert ...

javascriptangulartypescriptmomentjsmoment-timezone

Cloud Firestore query error in Firebase Cloud Function despite data being present in Cloud Firestore

I'm facing an issue with my cloud function. The function is designed to query data from a Cloud Firestore collection, which exists. However, when I call the function from my iOS app, it always goes to the else statement and prints "NOT IN COLLECTION." ...

javascriptnode.jsswiftgoogle-cloud-firestoregoogle-cloud-functions

Challenge with Angular date selection component

I am currently utilizing ngbdatepicker in my form. I want to save the date separately and retrieve it as shown below. <input class="form-control ngbfield custom-form-control" required [ngClass]="{'is-invalid':f.touched && birthDay.inv ...

javascriptangular

javascript: window.open()

I am currently using VB.NET 2005 and I have a requirement to launch a new browser window using Process.Start(). The challenge is that I need to specify the size of the browser window, for example, height:300 and width:500. Process.Start("firefox.exe", "ab ...

javascriptvb.nethtml

Is there a way for me to view the properties within the subcomponents?

Working on a project to create a bulletin board using React, following the official documentation. Decided to consolidate all actions related to the bulletin board into one alert component called AlertC. In the Form onSubmit statement, if the title is tr ...

javascriptreactjs

Tips on how to efficiently wrap content within a column layout, and to seamlessly shrink it if necessary

I recently encountered an issue where I am attempting to create a three-column layout with each column filled with a dynamic number of divs (boxes) ranging from 5 to 15, each with its own height based on its content. These divs are expected to: 1) Be dis ...

javascriptcssangularjsresponsive-designangular-material

Use vtip jQuery for showcasing titles

Currently, I am utilizing the vTip plugin for displaying titles upon hover. Here is a snippet of my code: http://jsfiddle.net/bnjSs/ In my HTML, there's a Div with the ID #showTitles. Whenever this Div is clicked, I aim to toggle the display of all ...

javascriptjquery

How can an Express.js server detect when a browser has been closed or reloaded?

Currently tackling a project with an Express.js server. One query I have is how can this server detect when one of its users (browser) has been closed or reloaded? Any insights on this would be greatly appreciated! ...

javascriptexpress

Implement ajax functionality to update an object within a JSP page

On my JSP page, I have implemented an accordion list (utilizing Bootstrap 3) with text and a Delete button within each node. When the user clicks on the delete button, that specific list item is removed. To construct the accordion list, I bring in an Array ...

javascriptjqueryajaxjsp

Converting a JSON list into a JavaScript object for the purpose of creating a dynamic

Understanding how JSON's lists work when parsed as JavaScript objects is challenging for me. I am not very familiar with JavaScript, so there may be mistakes in my question and the proposed solution. Currently, I have a JSON file that needs to be conv ...

javascriptjqueryjson