Raycasting

[JoshStaff]

Is it possible to do anything with Raycasting using this? Have a potential case that may need to utilize something like this where I am able to select 3d objects, highlight them and do some other pieces of functionality.

Is this an avenue you have explored?

PS:

This is absolutely amazing, really good job 👍

[PatriceVignola]

Hey Josh,

It's not possible right now, but it is a good idea. As there are not many 3D modules on react native, I actually started exploring the idea of extending the module to look more like a typical (very simplified) 3D engine. I worked on a few game engines before and I love react/react native, so I keep coming back to this project since it's pretty fun to work on :)

What functionality would you like to see? A complete raycasting framework or simply mouse selection? Right now, you can only show a single model at a time, but I explored the idea of a scene graph in the (where the user defines the scene graph via a javascript object) and it was promising.

Would your solution need to display multiple objects at the same time in the view? If not, I believe the mouse selection feature can be made pretty quickly. It's a lot more motivating to work on features that people want and need, so tell me what you're looking to do and I'll see how I can help 👍

[JoshStaff]

I think I could make my particular use case work with a single render.

You can see what I'm developing below:

The idea is the user explores the plot of land and can select one of those houses. I've explored using threeJS and one of the many ports for react native but the library you have here is so elegant.

I imagine my particular use case here escapes the mouse selection idea and would require a full raycasting implementation? Even if that is the case I can think of some really awesome ideas which would utilize the mouse selection!

I'd love to hear more about the scene graph, that sounds absolutely wild!

[PatriceVignola]

My idea of the scene graph would be something like this (can probably be polished):

const sceneGraph = {
  name: "uniqueName1",
  model: "root.obj",
  translation: {x: 0, y: 0, z: 0},
  rotation: {pitch: 0, yaw: 0, roll: 0},
  scale: {x: 1, y: 1, z: 1},
  children: [{
    name: "uniqueName2",
    model: "child2.obj",
    translation: {x: 0, y: 0, z: 0},
    rotation: {pitch: 0, yaw: 0, roll: 0},
    scale: {x: 1, y: 1, z: 1},
    children: [{
      name: "uniqueName3",
      model: "child3.obj",
      translation: {x: 0, y: 0, z: 0},
      rotation: {pitch: 0, yaw: 0, roll: 0},
      scale: {x: 1, y: 1, z: 1},
      children: []
    }]
  }, {
    name: "uniqueName4",
    model: "child4.obj",
    translation: {x: 0, y: 0, z: 0},
    rotation: {pitch: 0, yaw: 0, roll: 0},
    scale: {x: 1, y: 1, z: 1}
  }]
};

And then, you would call native react functions exposed to javascript when you want to move an object in particular (since re-rendering the component every time we change the scene graph itself would be very costly).

As for your use case, I don't think it would be possible without multiple models. There would be no easy way to know which house the user clicked on in order to select it. But yeah, I could implement a raycast that goes from the mouse to the houses and select the appropriate house. Ideally, this solution would return a callback to the javascript side with the name of the selected object and let the user call a function from a list of pre-defined functions (highlight, delete, move (x, y, z), etc.).