Leveraging Three.js Raycaster for a seamless PDF download functionality

Is there a way to trigger a PDF download when clicking on a 3D object in a Three.js scene?

Below is an example of how I have set up the Raycaster:

var raycaster;
var mouse = { x: 0, y: 0 };

init();

function init() {
    raycaster = new THREE.Raycaster();
    renderer.domElement.addEventListener( 'click', raycast, false );
}

function raycast( event ) {    
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );    

    var intersects = raycaster.intersectObjects( scene.children, true );

    if ( intersects.length > 0 ) {
       var firstIntersectedObject = intersects[ 0 ];
    }
}

Answer №1

Your existing code appears to be functioning correctly. I have incorporated the use of jsPDF to enable PDF generation and trigger the download process. See the updated code snippet below:

function raycast( event ) {    
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );    

    var intersects = raycaster.intersectObjects( scene.children, true );

    if ( intersects.length > 0 ) {
        const pdf = new jsPDF();
        pdf.text( "Hello world!", 10, 10 );
        pdf.save( "download.pdf" );
    }
}

Experience it live: https://jsfiddle.net/uazj0gr6/1/

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

Ajax is displaying some unusual behavior

Currently, I am working on an ajax request to check if a specific combination of username or password exists. <script> $("form").submit(function(e){ e.preventDefault(); //send data to ajax file now $.ajax({ type: 'POST ...

Sort through a list of objects by certain properties

I'm currently dealing with two arrays: one contains displayed columns and the other contains objects retrieved from a database, with more attributes than the displayed columns. displayedColumns = ['CompanyName','Ticker', 'Id& ...

Switching to http2 with create-react-app: step-by-step guide

Can someone provide guidance on implementing http2 in the 'create-react-app' development environment? I've searched through the README and did a quick Google search but couldn't find any information. Your assistance is much appreciated. ...

The AJAX response is incorrect due to a PHP request, leading to the reloading

Whenever the 'signup' button is clicked, a function in my code initiates an HTML switch. The issue I am facing arises when I test for incorrect email or password during sign up. While I can successfully verify the data, it still loads the previou ...

Using jQuery to append an <option> element to a <select> tag

Every time I try to add an option to a select, the option I want to add gets appended to the first option instead of the actual select element. $(".ct [value='']").each(function() { $(this).append($("<option></option>").attr("val ...

Adjust grading system based on user interaction with JavaScript

I am currently working on a grading system for a website and I am attempting to modify the interpretation of grades when a column is clicked. Specifically, I am looking to convert Average (%) to Letters to 4.0 Grade Average. To achieve this, I am using Jqu ...

"Enhancing user experience: dynamically adding rows using a combo of jquery, ajax, and php

This is the layout of my table. Here is the result I'm getting. Below is the code snippet: <table width="100%" id="controltable" border="1"> <tr> <th> Product Name </th> <th> Product Pri ...

Unable to transfer HTML code into the TinyMCE editor

I've successfully stored raw HTML content in my database, and now I want to display it in my TinyMCE editor for users to easily edit and submit. Below is the form: <textarea id="postfullOnEditPop" type="text" class="validate" placeholder="Enter f ...

Ways to transfer information from an axios API to a state in React

I am currently working with an API that consists of an array of objects. My goal is to pass this data into a state in order to display it within a component on a website. First Approach: // Fetches the API data const newData = axios.get(url).then( ...

Can someone share with me the best practices for implementing @HostListener within a method in my Angular 16 project?

Currently, I've been involved in developing a Single Page Application using Angular 16, TypeScript, and The Movie Database (TMDB). My task at hand is to implement the "infinite scroll" functionality on a particular component. To achieve this, I have ...

Creating DOM elements upon successful completion of an AJAX request with jQuery has never been easier. Here's a

I'm currently working on a project where I am dynamically creating a list of checkboxes using jQuery's $.ajax method. function load() { $.ajax({ type: "POST", url: "*************", data: "************ ...

Tips for creating responsive elements with a z-index of 1 in CSS

I have implemented the code provided in a codepen tutorial, but I replaced the world map image with a USA map. However, the dots are not responsive due to the z-index=1 specified on them. I experimented with vh, vw, and percentages, yet when I resize my s ...

Using the $group operator with a nested array component

Can you show me how to utilize MongoDB's aggregation feature to summarize the count of each reason_id? I have noticed that there are 2 counts for "reason_id = KW7Kcsv7835YZeE3n" and 1 count for "reason_id = KNcKQCjhFzha3oLfE". Below is the dataset: ...

Display streaming data continuously within an HTML page using Angular 16

Currently, I am actively developing a stream API that receives data with a 'Content-Type' of 'text/event-stream'. Below is a snippet from my stream.service.ts: connectToSse(): Observable<any> { return new Observable((observer ...

Difficulty encountered when attempting to implement custom filtering based on condition in HTML using Angular

I'm still new to angular, so please bear with me if this question seems trivial. I have a collection of integers in my controller and I need to filter it to only show items that meet a certain condition. Initially, I attempted the following: <div ...

Is it possible for an <input> tag in PHP AJAX to have an "action" attribute similar to a <form> tag?

Forms typically use an action attribute to specify where the data should be posted, such as a .php file. Do <input> elements have this action attribute as well? The answer is likely no, but I am curious to understand what concept I may be misunders ...

How to reach the Twitter share iframe with JavaScript/HTML

There seems to be an issue with the Twitter share button not displaying at its full width on certain pages. Upon investigation, I discovered that the iframe containing it is only set to a width of 24px, when it should actually be set to the correct width. ...

I'm having issues with my flipclock moving too quickly and skipping over certain numbers. Any suggestions on how to resolve this issue?

My flip clock script is behaving oddly, moving too quickly and skipping over even numbers. I've been playing around with the code, and it seems like there's a problem when I use the callbacks function. var clock = $('#clock3').FlipClo ...

Slider Adjusts Properly on Chrome, but Not on Firefox

Visit this URL This link will take you to the QA version of a homepage I've been developing. While testing, I noticed that the slider on the page works perfectly in Chrome and IE, but has layout issues in Firefox where it gets cutoff and moved to th ...

How can I locally store 3D models and textures using three.js?

Currently working on a game using three.js, where each game level is on a different page. However, when transitioning from one level to another, the browser reloads the page which can be quite slow. Is there a way to store 3D models locally so they don&apo ...