The unprojection of the vector in Threejs from this camera has not been defined

Why am I encountering a "function is undefined" error for vector.unproject even though it is clearly mentioned in the documentation? You can find it here: (one of the last items)

Even after console logging it, the function still returns as undefined, despite the rest of Threejs working perfectly fine. Is this function deprecated? If so, what is the alternative? I am trying to perform Raycasting and click detection on a loaded .obj file, and this function is stated as a method to achieve this.

Here is the code I am using, which makes use of RequireJS and Backbone for structuring the function:

click: function(event){
        var vector = new THREE.Vector3();

        vector.set(
            ( event.clientX / window.innerWidth ) * 2 - 1,
            - ( event.clientY / window.innerHeight ) * 2 + 1,
            0.5 );

        console.log(vector.unproject); //returns undefined
        vector.unproject( this.camera ); //execution stops here and returns "function is undefined"

        var dir = vector.sub( this.camera.position ).normalize();

        var distance = - this.camera.position.z / dir.z;

        var pos = this.camera.position.clone().add( dir.multiplyScalar( distance ) );

    },

Answer №1

In order to use the projector.js functionality, you will need to import it separately as it is no longer a part of three.js. You can locate it in the examples/js/renderer/projector.js directory.

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

Refresh the vue-chart component in a nuxt.js application

I'm currently working on a nuxt project and I need to incorporate some charts into it. I'm using vue-chartjs as a plugin for this purpose. However, the issue I'm facing is that the chart data is fetched after the chart has already been drawn ...

Spacing issues while utilizing the <textarea> element

<tr> <td> <b>Escalation: </td></b> <td> <TextArea name='escalation' onKeyDown=\"limitText(this.form.escalation,this.form.countdown,100);\" onKeyUp=\"limitText ...

What's with the lack of acknowledgment when I triumph in rock, paper, scissors, lizard, spock?

My game is running smoothly, except for when lizard or spock are involved and I win. For some reason, the outcome does not display correctly, even though it works fine when I lose. I've double-checked for typos but couldn't find any. If someone c ...

JavaScript JSON YouTube API viewCount function is not functioning correctly

I'm struggling to retrieve the views of a video using JavaScript (Chrome Extension). Here is the code I have so far: $(function() { $.getJSON('http://gdata.youtube.com/feeds/api/videos/H542nLTTbu0?alt=json',function(data) { ...

Ajax/PHP - unrecognized value in autofill

I have implemented this particular example to execute an ajax data query from a MySQL database, which returns a table. Currently, this setup functions correctly when text is manually entered into the input form. Example: https://i.sstatic.net/TTgLz.jpg T ...

When scrolling, the fixed menu bar at the top of the page is making the content below jump

I am attempting to create a fixed submenu that sticks to the top of the page when scrolling, but I am encountering some issues. The current code I have is as follows: $(window).scroll(function () { if ($(window).scrollTop() > 175) { $('#loca ...

What is the process for assigning an id to a div in order to make comparisons in React?

After attempting to assign an id to a div for comparison, an error was thrown indicating that "id is not defined". Here is the data: https://i.sstatic.net/PZjDk.png And here is the function: https://i.sstatic.net/y4MEB.png I attempted to add an id attri ...

Which five key JavaScript concepts should I grasp in order to excel as an AngularJS developer?

Coming from a background of server-side coding, I am delving into the world of AngularJS now. This means I need to have a solid grasp of JavaScript before diving in. If I don't have enough time to master JavaScript completely at the moment, what are ...

Determine in Node.js whether a variable is present in the request object for each page the user visits

Currently, my authentication system utilizes passportjs to define req.user when the user is logged in. As my website expands beyond its current 5 pages, I have been checking for the existence of req.user at the top of each route. Based on whether it exist ...

Converting a json array into a map with the help of Underscore.js

My challenge involves parsing a JSON array into a map object, with the key being the state and the value being an array of objects that share the same state. An example JSON data set is provided below: { "totalRec": 10, "content": [ { "name" ...

Is there a way to create a discord.js bot that can search for past messages without the need for a json file or storing them in a database?

Similar to the search feature in Discord. Imagine being able to enter !search [user] [query] and getting a response like "50 messages match your query." This would be like a word counting bot that doesn't need a database or local storage.The bot ...

Can a link be generated that swaps out the original URL redirect for the following visitor upon clicking?

Can the program be fed with a list of links to automatically redirect to the next URL once clicked? In this setup, each visitor would only see one link and not have access to any other URLs in the chain. Is there a way to make this happen? Any suggestion ...

The AngularJS $filter(date) function is causing incorrect format outputs

Hey there! I've come across an issue with my AngularJS filter, where it's supposed to return a date in a specific format. However, when I try the following code: var input = '2015-08-11T13:00:00'; var format = 'yyyy MMM dd - hh:mm ...

What is the best way to share dynamic content from a DIV or SPAN element on WhatsApp using jQuery?

I’ve been attempting to share the text content of a specific DIV on WhatsApp, but so far I haven't been successful. My goal is to only share a portion of the document (specifically the contents of showques). Below is the code snippet I've been ...

Delayed Passport Session Login

Every time I try to log in, my Express app loads very slowly... I've implemented Passport and Express Validator, but there are no errors. However, the login process for some users is extremely slow. Can anyone offer assistance? Below is a snippet o ...

The trim() method in Vue.JS does not properly handle trimming a passed string

I've been attempting to eliminate white space from a property of one of the returned objects using the .trim() function, but it's not working as expected. Even after trying JavaScript functions like .replace(/\s/g,''), the issue p ...

The error message UnhandledPromiseRejectionWarning is triggered due to a TypeError stating that the function authenticate is

Currently, I am attempting to incorporate basic authentication into my API project using Knex, Express, and MySQL. Here are the functions I have implemented: const users = [{ id:1, username:'selia', password:'fullservice'}] functio ...

Is the 'match()' method available in node.js? If it is, what is the proper syntax to use it?

I attempted to utilize the .match() method in node.js, but encountered an error stating that has no method 'match'. Here is the section of code where I invoke the method: fs.readFile('proxy.txt', function (err, data) { if (data.mat ...

Validating passwords using Vuetify

I am implementing password validation on my form using Vuetify validation rules: passwordRules: [ v => (v && v.length >= 1 && v.length <= 10) || 'Password length should be between 1 and 10', v => (v && v.l ...

How can I make my navbar stay fixed in place and also activate the transform scale functionality?

After fixing the position of my navbar with the class "top," I noticed that the transform property scale does not work on the div element I applied. The hover effect on the box only works when I remove the position from the navbar. This is the HTML code: ...