React-360: Shapes and Mesh Primitives?

[borisyankov]

Is support for Shapes and Mesh primitives like Boxes, Spheres etc. planned and coming soon?
I totally expected these to exist even in the prerelease, so was a bit disappointed.

[mikearmstrong001]

Meshes are supported via the more generic Mesh component and example of which can be seen in MeshSample of the samples.

This supports the wavefront format and by using this setup we can allow much more general setup of components as the mtl files is also used. You could wrap the low level component with a more specific setup if you'd like to avoid duplication of lines of code.

We also support various lights so configuration of the material is important.

More mesh formats will be added and one of those will be gltf

Hope this helps.

        <Mesh
          style={{
            transform: [
              {translate: [0, -15, -70]},
              {scale : 0.1 },
              {rotateY : this.state.rotation},
              {rotateX : -90}
            ],
          }}
          source={{mesh:asset('creature.obj'), mtl:asset('creature.mtl'), lit: true}}
        />

[borisyankov]

@mikearmstrong001 I am aware of the Mesh component that loads an obj + mtl file.
I was really hoping for a more 'html-ish' or 'react-ish' approach to this.

I totally expected to be able to write either <Cube size={20} /> or <Mesh type="cube" />
This will allow parametrization via props and state, animation and all the stuff one would imagine. Three.js (and AFrame) support that, and this was one of the first things I looked for to experiment with.

Loading two or more external resources for an object, that is created by an external app that is very foreign to web devs is very non-React to me. I had few components in mind that I wanted to create, and the current foundation does not allow me to do them, or forces me to use approaches I really don't feel are the 'webvr way'.

[mikearmstrong001]

Understood.

The way you can handle this right now is to create a single unit sized cube and use the transform in style to manipulate the size. This will at least allow you to parameterize.

I don't expect to use type in the mesh component as it would mean with every new mesh type we'd need to make changes to a core component. Not ideal if multiple people are adding new types.

Untested, but this is what I'm thinking.

class CubeMesh extends React.Component {
  render() {
    return (
      <View {...this.props}>
        <Mesh source={{uri:'cube', texture:this.props.texture}}/>
      </View>);
  }
}

[borisyankov]

Transforming a cube will work, but it will not work for other primitives like a torus.

Not very familiar with Three.js but it seems it supports the mesh/geometry primitives I mentioned.

I imagine it should work like this:

import { Sphere, Torus } from 'react-vr/geometry';

class ReactLogo extends React.Component {
  render() {
    return (
       <View>
         <Sphere x={10} y={10} z={10} r={5} />
         <Torus ....>
         <Torus ....>
         <Torus ....>
       </View>
    )
  }
}

[mikearmstrong001]

Thank for the feedback, we can expose more built in procedural geometry types an internal task has been added to track.

The work around with a mesh should allow you to make progress

[UXVirtual]

+1 for this. It'll make quickly prototyping functionality easier. Also exposing THREE.js default wireframe material for meshes / primitives will make it easier to debug problems. I've had lots of issues in the past bringing meshes into THREE.js, only to find that the mesh's default scale is way too small. Being able to view the mesh as a wireframe would make things a lot easier.

[andrewimm]

We just updated the way 3D objects are handled in v0.2.0:

<Mesh> is now <Model>, and we have introduced <Box>, <Cylinder>, <Plane>, and <Sphere>.

Each of the above components takes an optional lit property which determines whether it is affected by scene lighting, and a texture property to provide a texture image resource.
Primitives also take a wireframe prop to render them in wireframe style.

You can read all about this in the update docs at https://facebook.github.io/react-vr

[linonetwo]

These <Box>,<Cylinder>, <Plane>, and <Sphere> is deleted in react-360?