shininess, phát xạ và specular không phải là tài sản của vật liệu này trong React VR

Question

Tôi đang phát triển một ứng dụng với React VR và tôi đã tạo ra một pokeball 3D với máy xay sinh tố. Tôi đã xuất tệp này dưới dạng tệp Wavevà sử dụng nó trong ứng dụng React VR của mình.

Trong giao diện điều khiển tôi thấy cảnh báo này:

THREE.MeshBasicMaterial: shininess, emissive và specular không phải là tài sản của tài liệu này.

Dưới đây bạn có thể tìm thấy mã của tôi:

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

Đây là sản phẩm trả lại

Và trên this GitHub Gist bạn có thể tìm thấy các tập tin obj và mtl và bạn có thể tải về blend tệp.

Tại đây bạn có thể thấy quả bóng của tôi trong Blender.

Tôi đã tìm kiếm trên internet nhưng không tìm thấy giải pháp hay tài liệu về các vấn đề liên quan với Phản ứng VR.

Tôi đã làm gì sai?

Answer 1

Đây không phải là vấn đề nữa trong react-vr > 0.2.1 như trạng thái Github issue.

Hơn nữa, nếu bạn muốn mô hình của mình được hiển thị bằng màu sắc và bóng, bạn sẽ cần áp dụng một số đèn cho cảnh. Điều này được thực hiện bằng cách kích hoạt mô hình lit trên mô hình và sử dụng các thành phần AmbientLight, SpotLight hoặc DirectionalLight trong cảnh của bạn.

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

Đối với các hình ảnh động xoay tròn, bạn có thể kiểm tra ModelSample để xem cách nó được thực hiện.