0

I am creating a react 360 (formerly reactvr) project using MobX. I had such a pain setting up with Redux that I chose to use MobX for simplicity. What I am trying to recreate is the project that is presented in this youtube video React VR presentation 2017.

I am relatively new to the JS and VR scene and am trying to make sense of react and specifically state management libraries like Redux and Mobx. Now onto the code. Here I have the following in my index.js:

import React from 'react';
import { decorate, observable, computed } from "mobx";
import { observer } from 'mobx-react';

import {
  asset,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
} from 'react-360';

import Entity from 'Entity';

export default class PlanetMenu extends React.Component {
  planetName = '';

  get selectedPlanetModel() {
    return this.planetName;
  }

  select(planet) {
    this.planetName = planet;
  }

  render() {
    return (
      <View style={styles.panel}>

        <View>
          <VrButton
            style={styles.buttonStyle}
            onClick={() => this.select('earth')}>
            <Text style={styles.planetName}>Earth</Text>
          </VrButton>

          <VrButton
            style={styles.buttonStyle}
            onClick={() => this.select('saturn')}>
            <Text style={styles.planetName}>Saturn</Text>
          </VrButton>
        </View>

      </View>
    );
  }
};

decorate(PlanetMenu, {
  selectedPlanetModel: computed
})

decorate(PlanetMenu, {
    planetName: observable,
})

export class ModelView extends React.Component {
  render() {
    return (
      <Entity
        style={{transform: [{scaleX: 1.25}, {scaleY: 1.25}]}}
        source={{obj: asset(`${PlanetMenu.selectedPlanetModel}.obj`), mtl: asset(`${PlanetMenu.selectedPlanetModel}.mtl`)}}
      />
    );
  }
};

AppRegistry.registerComponent('PlanetMenu', () => PlanetMenu);
AppRegistry.registerComponent('ModelView', () => ModelView);

What I have is basically two buttons that when clicked will dynamically render the selected planets 3D models. It's not working as expected however.

In my ModelView class the line that contains ${PlanetMenu.selectedPlanetModel}.obj is interpolating as 'undefined.obj'. I'm wondering why this is? The planetName variable in PlanetMenu is being updated but it doesn't seem to be getting accessed correctly. Can someone help point me in the right direction. Some help would be appreciated.

Dan Rubio
  • 4,709
  • 10
  • 49
  • 106
  • You are accessing static property, `PlanetMenu.selectedPlanetModel`. While `selectedPlanetModel` is instance property. – Estus Flask Dec 20 '18 at 07:26
  • Thanks for your assistance @estus. I can't help but feel this is not good practice. Am I right in this assumption and if so, where can I read up on best practices aside from the tutorials? Do you have recommendations? – Dan Rubio Dec 20 '18 at 23:20
  • 1
    This is not a bad practice but a mistake. Static and instance methods are different things. You cannot access `selectedPlanetModel` from `PlanetMenu` class, and there's no `PlanetMenu` class instance to work with. I'm not sure what would be the correct solution in your case since I'm not using Mobx but I'd suggest to start with clarifying a misconception about static/instance members and examining how ES6 classes work. – Estus Flask Dec 21 '18 at 07:51

0 Answers0