Question

我正在尝试使用A-frame在我的代码中实现全景功能并做出反应。

这是我的反应代码。在我的代码中，调用loadOne函数后，如果我只是调用<img />

，屏幕上只会显示一个图像

但是<a-scene>，屏幕上什么都没有。

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import 'aframe';
import 'aframe-particle-system-component';
import {Entity, Scene} from 'aframe-react';

class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
      images:[],
      pano:'',
      name:'',
      list:[],
      isClicked:false,
      imageUrl:''
    }
    this.loadImages=this.loadImages.bind(this);
    this.loadOne=this.loadOne.bind(this);
  }


  loadImages(){
    console.log("load");
    var that=this;
    $.ajax({
      type:'GET',
      url:'https://demo0813639.mockable.io/getPanos',
      success:function(result){
        var images=that.state.images;
        for(var i=0;i<result.length;i++){
          that.state.images.push({"pano":result[i].pano,"name":result[i].name});
        }
        that.setState({
          images:images
       })
  }

})

}

loadOne(pano){
  this.setState({
    isClicked:true,
    imageUrl:pano
  })
}


  render(){
    //let content=<p></p>;
    var list=this.state.list;
    if(this.state.isClicked===false){
      list=this.state.images.map((result)=>{
        //console.log(result.name);
      return(<div className="box">
              <div className="label">{result.name}</div>
                <img src={result.pano} className="image col-md-3" onClick={this.loadOne.bind(this,result.pano)}/>   
            </div>
            )
     })
   }else{
      return(
          <Scene>
            <Entity position="0 -2 0" rotation="-90 0 0"><img src={this.state.imageUrl}/></Entity>
          </Scene>
      )
   }
    return( 
      <div>
        <button onClick={this.loadImages}>Click</button>
        <div >{list}</div>      
      </div>
          );
  }
}

我是否也需要在webpack中进行更改？

var webpack = require('webpack');
var path = require('path');

var node_dir = __dirname + '/node_modules',
    lib_dir = __dirname + '/public/libraries';

var config = {
    // The resolve.alias object takes require expressions 
    // (require('react')) as keys and filepath to actual
    // module as values
    resolve: {
        alias: {
            react: lib_dir + '/react',
            "react-dom": lib_dir + '/react-dom',
            "jquery": lib_dir + '/jquery-3.2.1.js',
            react:preact
        },
        extensions:['.js','.jsx','.json']
    },
    plugins: [

        new webpack.optimize.CommonsChunkPlugin({ // 
            name: 'vendors',
            filename: 'build/vendors.bundle.js',
            minChunks: 2,
        }),

        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ],

    entry: {
        musicApp: ['./public/js/app.js', 'webpack/hot/only-dev-server'],
        vendors: ['react', 'react-dom', 'jquery', 'webpack/hot/only-dev-server']
    },

    output: {
        path: path.join(__dirname, "public"),
        filename: 'build/[name].bundle.js',
        libraryTarget: "umd"
    },

    module: {

        noParse: [
            new RegExp(lib_dir + './react.js'), 
            new RegExp(lib_dir + './react-dom.js')
        ],
        rules: [
             {
                test: /\.js?$/,

                loaders: ['react-hot-loader/webpack', 'babel-loader'],
                include: path.join(__dirname, 'public')

            }, 
            {
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                },
                include: path.join(__dirname, 'public')
            }
        ]
    }
}

module.exports = config;

我也包括了A-frame库。那么，这里有什么问题？我收到这样的错误

Answer 1

重要的是要了解A-Frame不能与React一起使用。

每当您在JSX中包含<a-scene>这样的标记时，React会希望它与现有组件匹配。那是因为JSX中的所有标签都映射到组件（内置的组件，如<img />或自定义组件）。

所以你需要做的是使用一个lib，它将React组件逻辑包装在这些新的vr标签上，如aframe-react

aframe with react-屏幕上没有图像

1 个答案: