光泽、自发光和镜面反射不是 React VR 中这种材质的属性答案

【问题标题】：shininess, emissive and specular are not a property of this material in React VR光泽、自发光和镜面反射不是 React VR 中这种材质的属性
【发布时间】：2017-07-29 06:03:18
【问题描述】：

我正在使用 React VR 开发一个应用程序，并且我已经使用搅拌器创建了一个 3D pokeball。我已将其导出为 Wavefront .obj 文件并在我的 React VR 应用程序中使用它。

在控制台中我看到以下警告：

THREE.MeshBasicMaterial：shininess、emissive 和 specular 不是此材料的财产。

您可以在下面找到我的代码：

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 GitHub Gist 上，您可以找到obj 和mtl 文件，您可以下载blend 文件。

你可以在这里看到我在 Blender 中的精灵球。

我在互联网上进行了搜索，但没有找到与 React VR 相关的问题的解决方案或文档。

我做错了什么？

【问题讨论】：

标签： blender wavefront webvr react-360

【解决方案1】：

这在react-vr > 0.2.1 中应该不再是问题，就像Github issue 状态一样。

此外，如果您希望您的模型使用颜色和阴影进行渲染，您需要在场景中应用一些灯光。这是通过在模型上启用 lit 属性并在场景中使用 AmbientLight、SpotLight 或 DirectionalLight 组件来完成的。

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);

对于旋转动画，您可以查看ModelSample 了解它是如何制作的。

【讨论】：