Is there a way to direct the particles towards the camera while rotating, and trigger an alert message when they intersect in Three.js?

I'm working on implementing an event handler for particles that triggers an alert message on a sphere, always facing the camera. I am looking to achieve something similar to this demo (and making sure it works on IE 9+).

Here is the code snippet I have so far: http://jsfiddle.net/praveenv29/cVnKV/11/

var renderer, projector;
var mouseX, mouseY, stats, container;
var objects = [];
var INTERSECTED;

var camera, scene, renderer, material, mesh, cont;

var w1 = 960;
var h1 = 700;

var halfWidth = w1 / 2;
var halfHeigth = h1 / 2;

function init() {
    // Initialization code here
}

function animate() {
    // Animation logic here
}

function render() {
   // Rendering logic here
}

function generateGeometry() {
    // Geometry generation here
}

init();
animate();

Answer №1

It seems like there may be some confusion about what you're searching for; the demo link provided doesn't quite match up...

Is your goal to have cubes constantly facing the camera? If so, you'll need to implement logic to update their orientation whenever the user adjusts the camera view. Since you're using TrackballControls to move the camera rather than the scene itself, any objects meant to face the camera will need to be adjusted accordingly. This re-orientation logic should be included within your render() function.

By the way, here's how you can make an object always face the camera:

  • Ensure that the object is originally facing the desired direction when not rotated;
  • Add the object to your scene using any preferred method, applying necessary rotations or translations for positioning (even if it's not facing the right way yet);
  • Request three.js to calculate the local-to-world space transformations for your scene. Each object's world transformation matrix will now contain the combined rotations and translations from its local space to world space;
  • Access each object's local-to-world transform matrix and replace the 3x3 rotation matrix components with an identity transformation { [1 0 0] [0 1 0] [0 0 1] }. This action effectively removes the rotational aspect in world space, ensuring all objects treated this way will always face the camera.

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

What is the solution to resolving the error in Travis CI stating "Installation failed - version 13.7.0. It appears that the remote repository may be

Struggling to configure a basic JS project with Travis CI, but encountering consistent errors. The job log indicates an issue with installing the specified Node version during NVM installation. I have experimented with altering the Node version and confi ...

What is the best way to generate documentation for the useState function using typedoc?

In my code, I have a documented hook that returns a state along with multiple functions. While the functions are well-documented in typedoc, the status in the final documentation is simply displayed as a boolean without any description. export default func ...

Concealing the primary div within a Vue child component

Is there a way to conceal the primary div within a Vue application created using Vue-CLI? I attempted adding the display property, but it did not solve the problem. I am attempting to hide it within my Channels component. Here is how my main component lo ...

Python web scraping: Extracting data from HTML tag names

Seeking help with extracting user data from a website by retrieving User IDs directly from tag names. I am utilizing python selenium and beautiful soup to extract the UID specifically from the div tag. For instance: <"div id="UID_**60CE07D6DF5C02A987E ...

What is the best way to make a specific update to a single dependency in package-lock.json without causing any unintended consequences?

I want to update a specific NPM (v5) dependency in my application from version 1.0.0 to 1.0.1 without altering my package.json file. "dependencies": { "package": "~1.0.0" }, Currently, my package-lock.json file lists the dependency as version 1.0.0, so ...

Navigating a local and server environment with relative paths in a web server's multiple sites

My ASP.NET website is published to a web server with multiple sites, such as www.example.com/SiteA or www.example.com/SiteB. Before publishing, I test the site locally at localhost:12345. When referencing an image path like /Images/exampleImage.gif, it wo ...

JavaScript Truthy and Falsy Tutorial on Codecademy

Could someone kindly clarify why this code is not functioning correctly? let defaultName; if (username) { defaultName = username; } else { defaultName = 'Stranger'; } This code snippet was found in the JavaScript section on Codecademy, but a ...

Verify the presence and delete a table row from the JSON data that is returned

Is there a way to verify the presence of a label in the JSON response and exclude it from the displayed row in my table? In the code snippet below, you can observe that I am returning 'Page Name not defined'. I want to hide this label and any re ...

What is the method to include a CoffeeScript file in my project?

Currently, I am attempting to follow the steps outlined in this CoffeScript tutorial. After opening the terminal and navigating to the directory where simpleMath.coffee is located, I proceeded to run node and entered var SimpleMath = require('./simpl ...

Extract the last word from a string, filter out any special characters, and store it in an array

Here is the content of the xmlhttp.responseText: var Text = "FS2Crew A320 Checklist_1""FS2Crew Flight Crew A320 Main Ops Manual_1""FS2Crew Flight Crew A320 Main Ops Manual_10""FS2Crew Flight Crew A320 Main Ops Manual_11&q ...

I am having trouble connecting the local JSON file to the website

I'm working on a school project where I need to link a local JSON data file to an HTTP webpage to retrieve the data, but I'm having trouble getting the results. The code below is the JSON local code that I want to integrate into the webpage inste ...

What steps can be taken to prevent an event from being triggered once it has already started but has not yet concluded?

Let's talk about the navigation bar on the website. Clicking on it toggles the menu holder to slide in and out from the side. It's a simple interaction. The bar contains an icon with the text 'MENU'. When you open the menu, the icon cha ...

How can I transfer information from Node.js to Vue in an Nuxt.js server-side rendering setup?

I need to find a way to pass Firestore data to Vue files from Node.js (Express) because I have to utilize Firestore's getCollections() method, which cannot be executed on the client side. I have set up nuxt-ssr for deploying Google Cloud Functions an ...

Transform the infoBox into a jQuery dialog modal window

In this section, I have integrated a map with markers and infoBoxes. My goal now is to replace the infoBoxes with jquery dialog() and modal window functionalities. How can I achieve this effectively? Below is the code snippet that includes the implementat ...

JavaScript - Attempting to retrieve data using AJAX

Struggling with extracting data from an AJAX call using jQuery while implementing RequireJS for better maintainability and modularity in my JavaScript. Still new to RequireJS so not entirely sure if I'm on the right track. Just aiming to keep my JS mo ...

Unusual problem arises with styling and element measurement (scrollWidth / scrollWidth) in Gatsby framework

Currently, I am working on a component that splits lines based on the parent container's width without overflowing. Despite successfully implementing this in a sandbox or pure react application (even with custom fonts), I encountered issues when using ...

Can the value of a CSS class be obtained even if it is not being used?

I have an application that pulls data from a database and displays it with associated metadata that dictates the display style. Let's simplify it and say the only metadata is the size of the square it should appear in. For example: dataArray : { ...

Tips for maximizing website performance on touch-enabled devices

When using a touch device such as an iPhone, iPad, or Android device, it can be challenging to accurately tap on small buttons with your finger. So far, there is no universal method in CSS media queries to detect touch devices. As a workaround, I check if ...

I am encountering an issue where my like button is returning a Json object { liked: true } but it is not functioning correctly with my ajax call in my Django application whenever a user tries to click the

Having trouble creating a like button with an AJAX function in Django. Every time I click on the button, it redirects me to a different page showing a JSON object that returns {liked: true}. Why is this happening? It's been quite challenging for me to ...

Unable to add texture graphics to the box element in an A-Frame simple environment

Currently, I am experimenting with the demonstration of a Basic Scene in A-Frame. However, when I reach the section about Applying Image Texture and Using Asset Management System, I encounter an issue where the suggested texture does not display as expect ...