shininess, emissive and specular are not a property of this material in React VR

Question

I'm developing an application with React VR and I've created an 3D pokeball with blender. I've export this as Wavefront .obj file and use it in my React VR application.

In the console I see this warnings:

THREE.MeshBasicMaterial: shininess, emissive and specular are not a property of this material.

Below you could find my code:

import React from 'react';
import { AppRegistry, asset, StyleSheet, Pano, Text, View, Mesh } from 'react-vr';

class pokemongo extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('sky.jpg')} />
        <Mesh source={{ mesh: asset('pokeball.obj'), mtl: asset('pokeball.mtl') }} 
              style={{ height: 1 }} 
              transform={{ rotate: '0 90 0' }}></Mesh>
      </View>
    );
  }
};

AppRegistry.registerComponent('pokemongo', () => pokemongo);

This is the rendered output

And on this GitHub Gist you could find the obj and mtl file and could you download the blend file.

Here you could see my pokeball in Blender.

I've searched on the internet but didn't found solutions or documentation about the problem related with React VR.

What I've done wrong?

Answer 1

This shouldn't be a problem anymore in react-vr > 0.2.1 like the Github issue states.

Furthermore, if you want your models to be rendered with colors and shading you'll need to apply some lights to the scene. This is done by enabling the lit prop on the model and using either AmbientLight, SpotLight or DirectionalLight components in your scene.

import React from "react";
import {
  AppRegistry,
  asset,
  Pano,
  View,
  Model,
  AmbientLight,
  SpotLight
} from "react-vr";

class pokemongo extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset("chess-world.jpg")} />
        <AmbientLight intensity={0.5} />
        <SpotLight
          intensity={1}
          style={{ transform: [{ translate: [-5, 5, 0] }] }}
        />
        <Model
          source={{
            obj: asset("pokeball.obj"),
            mtl: asset("pokeball.mtl")
          }}
          style={{
            layoutOrigin: [0.5, 0.5],
            transform: [
              { translate: [0, 0, -10] }
            ]
          }}
          lit={true}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent("pokemongo", () => pokemongo);

For the spinning animation you can check out the ModelSample to see how it's made.