Raycaster fails to detect intersection with plane

I am currently working on detecting collisions with terrain by adjusting the heights of a plane's vertices.

Unfortunately, my Raycaster is only accurately detecting collisions about 10% of the time. To see an example of one of these failed detections, check out this link:

I'm not sure what I might be doing wrong. Can anyone help me troubleshoot?

EDIT: Here is a link to the jsfiddle:

var camera, scene, renderer, gump = 0;
var geometry, material, mesh, map, axis, ray;

init();
animate();

function init() {

    //Creating a camera to observe the scene
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.x = 500;
    camera.position.y = 300;

    //Initializing the scene
    scene = new THREE.Scene();

    //Loading terrain material
    material = new THREE.MeshBasicMaterial({color: 0xff6666, wireframe: false});
    geometry = new THREE.PlaneGeometry(128, 128, 127, 127);
    mesh = new THREE.Mesh(geometry, material);
    mesh.scale.set(50,50,50);
    mesh.rotation.x = -Math.PI/2;
    scene.add(mesh);

    //Creating axis with the position and rotation of the ray
    axis = new THREE.AxisHelper(100);
    axis.position = new THREE.Vector3(333.2637, 216.6575, -515.6349);
    axis.rotation = new THREE.Vector3(1.6621025025, 0.119175114, -2.2270436357);
    axis.scale.z = 10;
    scene.add(axis);

    //Creating the actual ray using the axis position and rotation
    ray = new THREE.Raycaster();
    ray.ray.origin.copy(axis.position);
    ray.ray.direction.copy(axis.rotation);

    //Renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);

    if (mesh) {
        var intersections = ray.intersectObject(mesh);
        if (intersections.length > 0) {
            console.log("OK"); //This never actually happens
        }

        //Moving the axis so it visibly passes through the mesh object
        axis.translateZ(Math.cos(gump) * 2);
        gump += 0.01;

        //Focusing the camera on the axis
        camera.lookAt(axis.position);
    }

    renderer.render(scene, camera);

}

http://jsfiddle.net/BAGnd/

EDIT: System specs as requested:

Windows 7 64bit

Chrome 26.0.1410

Threejs 57

Graphics card: GTX 560 Ti

Answer №1

Discovered my mistake. I mistakenly believed that the rotation vector used to rotate an object and the direction vector used in a ray were synonymous. Once I converted my rotation vector to a direction vector, everything started working smoothly. For instructions on how to convert a rotation vector to a direction vector, check out: How to get Orientation of Camera in THREE.js

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 best way to store information in my express server using Angular?

After spending several hours on this issue, I am feeling stuck. Initially dealing with a CORS problem, I managed to solve it. However, my goal is to utilize $resource without creating a custom post method. My API follows RESTful standards where POST /artis ...

Ajax alert: The index 'id' is not defined

I'm currently learning PHP and scripting, but I am encountering some difficulties when it comes to sending information to PHP. I would appreciate any help you can offer. Thank you for your assistance. Here is the issue at hand: Error Message: Noti ...

Eliminate Redundancy with Knockout.js Copy Prevention

When I combine both ko.js files, one of them ends up being overshadowed by the other. Specifically, the second one stops working while only the first one remains functional. How can I merge these files together to ensure they work properly without any conf ...

updating the row of an html table with elements from a javascript object

I am faced with the task of dynamically adding rows to a table based on the number of elements in my JavaScript object. The object consists of keys and arrays of values. userobject={ ID: [1,2,3] IP_Address: ["12.21.12 ...

What is the best way to securely and reliably store a user's third-party API keys for safekeeping?

I am currently developing a Node.js application that requires users to input their API keys from a third-party service that does not support oauth login. The current approach involves storing these keys in a .env file, which must be done during setup. I ...

Interactive form control for location details including country, state, district, and town

I am struggling with adding dynamic form controls on dropdown change. I have been able to add them, but encountered an error preventing me from retrieving the value in 'formName.value'. The specific error message states: "Error: There is no Form ...

Transferring a document to a koa-js server using formidable

Looking for some guidance with my attempted file upload process from my Ionic app to a Node.js server using koajs. I'm currently utilizing koa-body and formidable to parse the body. Below is the configuration on my server: this.app.use(formidable()) ...

Is there a way to send a personalized reply from an XMLHttpRequest?

My goal is to extract symbol names from a stocks API and compare them with the symbol entered in an HTML input field. I am aiming to receive a simple boolean value indicating whether the symbol was found or not, which I have implemented within the request. ...

Saving a value in a service using AngularJS

I am facing an issue with passing a variable into a service that needs to be accessed from multiple states within my application. I have created a service and attempted to pass a variable from a controller into the service in order to access it from anothe ...

The system is unable to locate the module at 'C:UsersSanjaiAppDataRoaming pm ode_modulesprotractorinprotractor'. This error originates from internal/modules/cjs/loader.js at line 960

After running "protractor conf.js" without any issues, I decided to install protractor globally using the command "npm install -g protractor". However, after installing protractor globally, I encountered the following error message: internal/modules/cjs/lo ...

"Using jQuery's .on method to dynamically update an input field in real-time based on the selected

It seems that the keyup function is working correctly. Now, what I would like to achieve is, after the keyup function has performed the calculation and if I proceed to change the select option, the calculation should be based on the newly selected option w ...

Merge an array of objects to form a unified object

I have information structured in the following way: [ { key: 'myKey' value: 'myValue' }, { key: 'mySecondKey' value: 'mySecondValue' }, { key: 'myThirdKey' value: 'myT ...

In unique circumstances, text remains unbroken

I'm facing an issue where text doesn't break in a popup created with Vue.js and included in the header section. Oddly enough, the text breaks properly when the popup is included in the main screen, but not in the header. I even added a border aro ...

When clicking in JavaScript, there are two parts to the function, however only one part will work at any given time

I am currently working with two server-side PHP scripts: 1. /addit.php - which generates a PDF file on the server based on the provided ID 2. /viewit.php - which allows the PDF file to be downloaded to the browser window. While both of these scripts are ...

Modifying the style of a specific row when the form is submitted

My webpage contains nested records, with each nested record displaying a total number of clicks in a div labeled "count". I am looking to increment the count by 1 for each specific record when the button with a class of view is clicked. Currently, clicking ...

The issue of asynchronous behavior causing malfunctioning of the PayPal button

import { PayPalButton } from 'react-paypal-button-v2' <PayPalButton amount={total} onSuccess={tranSuccess} /> const tranSuccess = async(payment) => { c ...

What is an alternative way to retrieve the page title when the document.title is unavailable?

Is there a way to retrieve the page title when document.title is not available? The code below seems to be the alternative: <title ng-bind="page.title()" class="ng-binding"></title> How can I use JavaScript to obtain the page title? ...

The proper invocation of the success and error functions in jQuery is not being achieved for Ajax calls

After successfully sending JSON data to a specified URL using Postman and receiving the required response in JSON format, I intended to send this JSON data to another file by utilizing AJAX post method. However, to my dismay, the Ajax post method failed to ...

Hovers and click effects for navigating through images

The website I'm currently working on is stipz.50webs.com. p.s. HOME functionality is not active at the moment. Having successfully implemented the onhover and onmouseout features, my next goal is to enhance the navigation effects for each div/img so ...

Conceal the message "Table does not contain any data" if data exists in the table

This table is populated with data retrieved via JSON. Here is the structure: <table id="tblClaimSearch" class="display responsive nowrap" cellspacing="0" width="100%"> <thead> <tr> <th><input type="checkbox" ...