After successfully rendering a model in ThreeJS, my next task is to incorporate interactivity by:
As a newcomer to ThreeJS, I am feeling a bit overwhelmed. How can I achieve this interactive functionality?
Within the init() function:
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
Add the following code snippet:
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
var particle = new THREE.Particle( particleMaterial );
particle.position = intersects[ 0 ].point;
particle.scale.x = particle.scale.y = 8;
scene.add( particle );
}
/*
// Parse all the faces
for ( var i in intersects ) {
intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
}
*/
}
It is recommended to build upon this foundation.
Have an upcoming event? Let this event manager assist you.
import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
import { InteractionManager } from 'three.interaction';
const renderer = new WebGLRenderer({ canvas: canvasElement });
const scene = new Scene();
const camera = new PerspectiveCamera(60, width / height, 0.1, 100);
// Create a new manager to easily add interactive elements
const interactionManager = new InteractionManager(renderer, scene, camera);
const cube = new Mesh(
new BoxGeometry(1, 1, 1),
new MeshBasicMaterial({ color: 0xffffff }),
);
cube.cursor = 'pointer';
cube.on('click', function(ev) {});
cube.on('touchstart', function(ev) {});
cube.on('touchcancel', function(ev) {});
cube.on('touchmove', function(ev) {});
cube.on('touchend', function(ev) {});
cube.on('mousedown', function(ev) {});
cube.on('mouseout', function(ev) {});
cube.on('mouseover', function(ev) {});
cube.on('mousemove', function(ev) {});
cube.on('mouseup', function(ev) {});
// ...
scene.add(cube);
For more information, visit the three.interaction.js GitHub page
revision
function handleMouseDownEvent( e ) {
e.preventDefault();
var vec = new THREE.Vector3( ( e.clientX / window.innerWidth ) * 2 - 1, - ( e.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vec, camera );
var ray = new THREE.Raycaster( camera.position, vec.sub( camera.position ).normalize() );
var hits = ray.intersectObjects( elements );
if ( hits.length > 0 ) {
hits[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
var part = new THREE.Sprite( particleMaterial );
part.position = hits[ 0 ].point;
part.scale.x = part.scale.y = 16;
scene.add( part );
}
}
I've created a basic Web API along with an ionic/angularJs Client to perform CRUD operations. However, I encountered an error when attempting to edit data on the server. Below is an image showcasing the data format being sent and the error received: ...
I am currently working on creating a form where individuals can input their email addresses to receive some information. My goal is to design one HTML file that will work seamlessly on both desktop and mobile views by adjusting the form width based on th ...
At this point in my project, there is a specific scenario that I am facing: We are utilizing one repository (r1) for the HTML/CSS development work by our UI designer, along with some minimal JavaScript. I have cloned this repository r1 to my local system ...
I have encountered an interesting issue with 2 lines of code that essentially achieve the same outcome: this.data.affiliateLinkUrl = this.bookLinkForm.controls['affiliateLinkUrl'].value; this.data.affiliateLinkUrl = this.bookLinkForm.get(' ...
While working with Cannon.js and following online examples, I encountered an issue where setting certain properties in the constructor resulted in NaN values for the position and angular velocity (x, y, z). For instance, when initializing a body without s ...
Currently, I am in the process of developing a filtering mechanism to sift through a dataset obtained from an API. The array that requires filtering contains objects with various parameters, but my aim is to filter based only on specific parameters. For ...
My goal is to limit the number of alert elements loaded in each .content container to a maximum of 9, but currently I am grouping every 10 items together and discarding any remaining items! For instance, if a random value is 8, then no content will be dis ...
I am facing an issue on my website with multiple forms. The problem arises when the "Save" button is clicked, as it continues to check the fields in the first form instead of the form where the button is located. Here is a snippet of my current Ajax scrip ...
How can I retrieve an object from an array using Node.js? I have tried the code below, but it's returning the entire object. What I actually need is to only print the name, for example, just "sethu". Code: var sethu = [{ name:'sethu', ...
Can meshes or geometry be shared across scenes? I am facing an issue where I have multiple scenes that require the same large meshes, but attempting to share these meshes between scenes results in WebGL context errors. It seems like certain variables are ...
In the past, I utilized Visual Studio Code for Angular 2 development and had the ability to hide .js and .js.map files from the IDE. Now, I am working on a project using VS 2017 Professional with Typescript, Jasmine, Karma, and Angular 4. Task Runner, etc. ...
I have an input field and a span set up like this: <input type="password" name="account_password" placeholder="Enter your new password" autocomplete="off" ng-model="res.account.new_password" required="" ng-minlength="res.minlength" class="form-control" ...
Currently, I'm in the process of developing an AngularJS service provider (function) that achieves the following objectives: Gathers data from multiple tables within an SQLite database Delivers the resulting object to various controller functions S ...
Looking to add the selected product along with its quantity and price to another div tag using the jQuery click function. Each time I click, only the first array value of the variable "product" is displayed. How can I access the values of the current row ...
My question is about a CSS div with set dimensions and background that I want to change on hover. I am aware that this seems like a simple task, but what I really want to do is retrieve the background sources from within the HTML tag itself. For example: ...
Currently, I am working on developing a 2D game and facing a challenge in making the bullets move towards the cursor. Here is the code snippet that I have been using: let xDist = this.game.input.mousePointer.x - this.x; let yDist = this.game.input.mousePo ...
Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...
I have been tackling a challenge involving codeigniter and ajax. Specifically, I am working with two select boxes - one for countries and another for states. The goal is to dynamically populate the states select box based on the selected country using an a ...
I am currently developing a Single Page Application (SPA) using Vue (specifically Quasar), and I have the following requirements: Load the contents of a CSS file into a JavaScript variable or Vue data property dynamically The CSS file should be generated ...
Within a modal, I am showcasing a log inside a read-only <textarea> field that contains data fetched from my MySQL database. Below this, there is a writable <textarea> field where users can input updates to the log, which are then added to the ...