Is there a way to determine if the X and Z coordinates are colliding with a specific mesh in Three.js without relying on mouse input?

Question

Is there a way to determine if the X and Z coordinates are colliding with a specific mesh in Three.js without relying on mouse input?

Background Context

I'm currently developing a strategy game that combines elements from both Europa Universalis 4 and Age of Empires 3. The game is being created using JavaScript and the Three.js (r109) library. At this stage, I have successfully implemented randomly generated low-poly terrain with trees and realistic water reflections. In the initial stages of the game, I aim to spawn a Navy unit in the form of a galleon (as shown in the screenshot below). My goal is to ensure that when this unit spawns, it does so at a random location within the boundaries of the water. The water surface is depicted by a semi-transparent plane covering the entire map area, supported by a THREE.Reflector object below it. While the terrain also consists of a plane, its appearance has been altered using a SimplexNoise heightmap.

https://i.sstatic.net/lhzJO.png

The Query

How can I effectively identify whether an x,z position intersects with the water mesh rather than the terrain mesh? While I believe THREE.Raycaster could be beneficial for this task, I am curious if there might be a more optimized solution available. If utilizing THREE.Raycaster is indeed the ideal approach, how should I proceed with implementing it specifically for this scenario? Is it necessary to create separate instances of THREE.Raycaster for each object involved? Note that my objective is not to place this object using mouse input; instead, I intend to determine its placement through a method that assesses the position mentioned earlier.

javascript three.js

Answer 1

Answer №1

Providing specific guidance without any insight into your code is challenging, but it appears that creating a collision list for valid water surfaces and verifying it when spawning something may be the solution.

You can view a basic jsfiddle here. This example establishes a "land" mesh (green) and a "water" mesh (blue), includes the "water" mesh in a variable named collisionList, and then triggers a spawn function for coordinates spanning across both surfaces. The function employs a raycaster to determine if the coordinates overlap with the "water" mesh and creates a red cube accordingly.

Below is the provided code snippet:

window.onload = function() {
    // code implementation
}
// additional instructions...

The effectiveness of this method largely hinges on the game's overall design. For procedurally generated worlds, it might be more efficient and error-proof to establish spawn points (and other key components) beforehand to develop the geography consistently rather than retroactively.

Answer 2

Providing specific guidance without any insight into your code is challenging, but it appears that creating a collision list for valid water surfaces and verifying it when spawning something may be the solution.

You can view a basic jsfiddle here. This example establishes a "land" mesh (green) and a "water" mesh (blue), includes the "water" mesh in a variable named collisionList, and then triggers a spawn function for coordinates spanning across both surfaces. The function employs a raycaster to determine if the coordinates overlap with the "water" mesh and creates a red cube accordingly.

Below is the provided code snippet:

window.onload = function() {
    // code implementation
}
// additional instructions...

The effectiveness of this method largely hinges on the game's overall design. For procedurally generated worlds, it might be more efficient and error-proof to establish spawn points (and other key components) beforehand to develop the geography consistently rather than retroactively.

Is there a way to determine if the X and Z coordinates are colliding with a specific mesh in Three.js without relying on mouse input?

Answer №1

Similar questions

Locate the index and value of the item that has the most recent date

Inability to input text into a textbox with AngularJS

Click twice on the editable AngularJS table to wrap each item

Uploading files and data in Laravel using Vue.js and Vuetify: A step-by-step guide

Is there a way to make a NodeJS Transform stream produce multiple records for each input chunk?

Can a websocket be used to communicate with a server that is not the same as the one hosting the html5 website?

When using ngClick with a parameter, the parameter is not being successfully passed

Breaking apart a mesh using THREE.js

Unexpected error: the process is not recognized

How can AJAX be utilized to show search results dynamically?

When navigating back to the Homepage from another page, React displays the Homepage

Implementing a list using display: inline-block without any specified order

Prevent the bottom row from being sorted

Attempting to minimize the number of jQuery calls within a Domino XPage

I am struggling with sending post requests in Node.js

`I'm having difficulty transferring the project to Typescript paths`

Utilizing the HTML5 <video> element to enable pausing the video when navigating to the next slide in BXSLIDER

Using Next.js for dynamic routing with JSON arrays in getStaticPaths

Adjust the color of static hyperlinks based on the background color

Button-click scrolling is our featured feature!