Creating an interactive particle system with three.js, ready to be clicked on

As I embark on my coding journey and delve into three.js, I've been eager to create interactive geometries. After some searching, I stumbled upon a code snippet (the links don't open in the snippet for some reason):

var container, stats;
var camera, scene, projector, renderer;
var particleMaterial;
var objects = [];
init();
animate();

... // Code continues here

Feeling adventurous, I decided to make things more challenging by creating an interactive demo using particles instead of cubes. Inspired by a Three.js demo, I began exploring:

var mouseX = 0, mouseY = 0,

windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,

SEPARATION = 200,
AMOUNTX = 10,
AMOUNTY = 10,

camera, scene, renderer;

init();
animate();

... // Code continues here

My next experiment involved making each spherical vertice clickable, leading to different URLs. Despite a week of effort, I can't seem to crack it:

var container;
var camera, scene, renderer;

var raycaster;
var mouse;

var PI2 = Math.PI * 2;

var programStroke = function (context) {
...

Although the results are not exactly what I envisioned, at least I have clickable particles now. But how do I assign multiple random links to these particles upon click?

I came across an example in the Three.js library , but it's not quite what I need. I tried modifying elements to be clickable with no success.

Any suggestions or insights would be greatly appreciated!

Thank you

Answer №1

Check out this solution for interacting with a single particle in three.js: three.js click single particle

An important step is linking all the particles to a particle array so that they can be easily raycasted later.

In the provided fiddle, there's a demonstration of how to change the material when interacting with particles.

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

Separate the divs in a template into individual templates, or alternatively, utilize ng-if to display different divs within a single template

As a newcomer to AngularJS, I am seeking advice on the most efficient way to code for the given scenario: Scenario: I have a single HTML template containing multiple divs, and I need to display only one div at a time based on specific conditions. Two app ...

Insert discover within the tube

Can I modify the following code to add a pipe before the subscribe method that performs the find operation, so that only one panel is returned by the subscription? await this.panelService.getActivePanels() .pipe( map(activePanels => active ...

Incorporate Angular directives within a tailor-made directive

I just started using a fantastic autocomplete directive called Almighty-Autocomplete. However, I feel like it's missing some features. The basic structure of the directive is as follows: .directive('autocomplete', function () { var index ...

Using GridStack in combination with VUE causes issues with reactivity

I'm struggling with adding VUE components to a GridStack because they aren't reacting properly. Check out the issue in this CodePen: https://codepen.io/adelriosantiago/pen/qBaXjrr?editors=1010 Since GridStack only accepts HTML, my workaround in ...

Having trouble removing just one element from an array in Redux. Any suggestions on how to make it work properly?

I'm currently working on creating a dynamic algorithm for removing an item from an array. Reducer: import { LOAD_PAGES, REMOVE_PAGE } from "./dynamicMenuActions"; export const initialState = { pages: [] }; export const dynamicMenuReducer = (state ...

Learn how to easily set a radio button using Angular 4 and JavaScript

It seems like a simple task, but I am looking for a solution without using jQuery. I have the Id of a specific radio button control that I need to set. I tried the following code: let radiobutton = document.getElementById("Standard"); radiobutton.checke ...

A guide on trimming content with v-if in Vue.js

Recently, I attempted to trim the response value within a Vue condition. I require this functionality to apply the condition when the value is null or empty. <li v-if="item[0].otrodl4.trim() == ''" class="progress-step"> ...

JavaScript - Modifying several object properties within an array of objects

I am attempting to update the values of multiple objects within an array of objects. // Using a for..of loop with variable i to access the second array and retrieve values const AntraegeListe = new Array(); for (let i = 0; i < MESRForm.MitarbeiterL ...

Angular, a Self-sufficient Module of Cascading Style Sheets

I have developed a factory that generates HTML content. I want to showcase this generated HTML within a specific section of my application, without its CSS affecting the rest of the site, and vice versa. While using an iframe is one option, I believe there ...

The "begin" parameter of the Angular limitTo filter appears to be ineffective in Angular version 1.3

Currently, I am attempting to implement a pagination feature on an array of users using Angularjs 1.3. ng-repeat="user in users | filter: searchText | orderBy: 'lastName' | limitTo:pageSize:startPosition track by user.lanId" I specifically want ...

Creating geometric shapes using SVG polygons with the Raphael JavaScript library

It appears that there is a limitation in the Raphael Javascript library when it comes to displaying SVG polygons. Despite this, I am working on developing an application that requires the ability to read and display SVGs using Raphael, yet many of these SV ...

Dynamic Images with Next.js

Currently, I am utilizing next.js and attempting to dynamically retrieve images in the following manner: {list.map((prod) => ( <div className={styles.singleProduct}> <h6>{prod.Brand.toUpperCase()}</h6> <p&g ...

A guide to uploading a file using Java Spring and displaying the response on the HTML front-end

I am looking to implement a feature where users can upload an XML file on the front-end, which will be accessed by the Controller to check the file using Java. The XML file is validated against a specific XML schema and the process works flawlessly. Here ...

What is the correct way to send a GET request in angular?

Trying to make a GET request from Angular to Spring Java, but encountering error code 415 zone.js:3243 GET http://localhost:8080/user/friend/1 415 Below is my Spring Java code for the endpoint: @RequestMapping( value = "/friend/{idUser}", ...

Tips on retrieving the status code from a jQuery AJAX request

I am trying to figure out how to retrieve the ajax status code in jQuery. Here is the ajax block I am currently working with: $.ajax{ type: "GET", url: "keyword_mapping.html", data:"ajax=yes&sf="+status_flag, success: callback.success ...

Trouble linking JavaScript and CSS files in an Express App

Could someone assist me in understanding what is causing my code to malfunction? Why is it that my javascript and css files do not execute when the server sends the index.html file to the browser? I have a simple setup with an html page, javascript file, ...

Template not being properly populated by handlebar for JSON output

Hello there! I am currently working on making an http GET call to an MVC controller action which returns JSON data. The JSON data looks something like this: [ { "PlanCode": "P001", "PlanName": "Plan1" }, { "PlanCode": " ...

No data was retrieved by the Mongo query

I need help with a query to find all groups that have the subject of chemistry and match a specific user's schedule. The current query isn't returning any results, and I suspect there might be a syntax error in the code. I'm unsure of where ...

Issue with React router not functioning correctly when dealing with dynamically created anchor tags utilizing jquery

As a newcomer to React.js, I have incorporated jQuery into my project to handle mouse and click events for cloning navigation elements, specifically <li> tags within <a> tags. The cloned elements are displayed in a targeted div ID successfully. ...

Creating an XML response to generate an HTML dropdown menu in PHP

My onChange function in javascript calls a PHP file to fetch UPS rates and update an HTML dropdown list. Everything was working fine until I needed to add an item to the options list based on a comparison. Javascript: function fetch_UPS(el){ var zip = ...