Question

我在react360中有2个根组件。我有提供信息和产品的主面板，还有3d模型。我想互相交流。特别是我只想单击产品，然后单击我的颜色3d模型发生了变化。这时，我的3d模型具有我最初定义的商店中的价值，但是当价格变化时，它不会在3d模型中更新。例如，当应用程序启动时，我模型的原始颜色为蓝色，但是当我单击第一个项目时，它不会变为红色。问题出在哪里？??? before after

client.js

   import { ReactInstance } from "react-360-web";
    import { Location } from "react-360-web";

    function init(bundle, parent, options = {}) {
      const r360 = new ReactInstance(bundle, parent, {
        // Add custom options here
        fullScreen: true,
        ...options
      });

      // Render your app content to the default cylinder surface
      r360.renderToSurface(
        r360.createRoot("Center", {
          /* initial props */
        }),
        r360.getDefaultSurface()
      );
      r360.renderToLocation(
        r360.createRoot("React3DView"),
        r360.getDefaultLocation()
      );

      // Load the initial environment
      r360.compositor.setBackground(r360.getAssetURL("360_world.jpg"));
    }

    window.React360 = { init };

index.js

  import { AppRegistry } from "react-360";
    import Center from "./components/center";
    import React3DView from "./components/obj";

    AppRegistry.registerComponent("Center", () => Center);
    AppRegistry.registerComponent("React3DView", () => React3DView);

减速器

initialState = {
  data: [
    { id: 1, value: "MILEPTY.png" },
    { id: 2, value: "cleveland.png" },
    { id: 3, value: "phila.png" },
    { id: 4, value: "raptors.png" },
    { id: 5, value: "rockets.png" }
  ],
  currentinfo: "Hello.Press click on T-shirt to show information",
  currentcolor: "blue"
};
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INFO":
      if (action.key === 1) {
        return {
          ...state,
          currentinfo: "Milwaukee bucks",
          currentcolor: "red"
        };
      }
      if (action.key === 2) {
        return {
          ...state,
          currentinfo: "Cleveland Cavaliers",
          currentcolor: "green"
        };
      }
      if (action.key === 3) {
        return { ...state, currentinfo: "Philadelphia 76xers" };
      }
      if (action.key === 4) {
        return { ...state, currentinfo: "Toronto Raptors" };
      }
      if (action.key === 5) {
        return { ...state, currentinfo: "Huston Rockets" };
      }

    default:
      return state;
  }
};
export default reducer;

centerPanel

import React from "react";
import { AppRegistry, StyleSheet, Text, View, Image, asset } from "react-360";
import Products from "./products";
import { connect } from "react-redux";

class CenterPanel extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <View style={{ flex: 1, flexDirection: "row" }}>
          <View
            style={{
              width: 250,
              height: 600
            }}
          >
            <Text style={{ marginTop: "100" }}>{this.props.currentinfo}</Text>
          </View>
          <View
            style={{
              width: 1000,
              height: 600,
              backgroundColor: "green"
            }}
          >
            <View style={{ flex: 1, flexDirection: "row" }}>
              {this.props.data.map(element => (
                <Products
                  key={element.id}
                  value={element.value}
                  id={element.id}
                />
              ))}
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: "rgba(255, 255, 255, 0.4)"
  }
});
const mapStateToProps = state => {
  return {
    data: state.data,
    currentinfo: state.currentinfo
  };
};
export default connect(mapStateToProps)(CenterPanel);

产品

import React from "react";
import { AppRegistry, StyleSheet, Text, View, Image, asset } from "react-360";
import { connect } from "react-redux";

class Products extends React.Component {
  state = {
    img: this.props.value
  };
  render() {
    return (
      <View
        style={styles.panelimages}
        onInput={() => this.props.onText(this.props.id)}
      >
        <Image style={styles.images} source={asset(this.state.img)} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  panelimages: {
    width: 150,
    height: 150,
    marginTop: 200,
    backgroundColor: "white"
  },
  images: {
    width: 150,
    height: 150
  }
});
const mapDispatchToProps = dispatch => {
  return {
    onText: id => dispatch({ type: "INFO", key: id })
  };
};
export default connect(
  null,
  mapDispatchToProps
)(Products);

中心

import React from "react";
import { AppRegistry, StyleSheet, Text, View, Image, asset } from "react-360";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "../store/reducer";
import CenterPanel from "./centerPanel";

// const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
const store = createStore(reducer);

export default class Center extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <CenterPanel />
      </Provider>
    );
  }
}

objpanel

import React from "react";
import {
  asset,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
  Image
} from "react-360";
import Entity from "Entity";
import { connect } from "react-redux";

class Object3d extends React.Component {
  render() {
    return (
      <View>
        <Entity
          source={{ obj: asset("t-shirt.obj") }}
          style={{
            transform: [{ translate: [-3.5, -3.5, -2.8] }],
            color: this.props.currentcolor -------->here is problem
          }}
        />
      </View>
    );
  }
}
const mapStateToProps = state => {
  return {
    currentcolor: state.currentcolor
  };
};

export default connect(mapStateToProps)(Object3d);

obj

import React from "react";
import { AppRegistry, StyleSheet, Text, View, Image, asset } from "react-360";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "../store/reducer";
import Object3d from "./objpanel";

// const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
const store = createStore(reducer);

export default class React3DView extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Object3d />
      </Provider>
    );
  }
}

Answer 1

我已经尝试过使用redux来做到这一点，但最终，实现它的困难更多。为了实现类似的功能，您需要遵循此处描述的代码：

React 360 multi panel example

此外，我已经实现了您要执行的操作，而无需执行redux。您可以查看此存储库中的代码，也可以在此处查看生产链接。它是根据react 360代码建模的。

CryptoDashboardVR repo

CryptodashboardVR Multipanel synchronization

最后，如果您仍然需要帮助，请查看我在React 360上的课程。我会解释所使用的概念。 Udemy react 360。

希望有帮助。现在，我将放弃redux方法，直到2.0版本问世。

React360-Redux：通过Redux在2个根组件之间进行通信

1 个答案: