aframe與react-沒有圖像在屏幕上

Question

我想在我的代碼中使用A幀實現全景功能並作出反應。

這是我的反應代碼。在我的代碼中，調用loadOne函數之後，如果我只是調用<img />

但屏幕上沒有任何內容出現，屏幕上只會顯示一個圖像。

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型圖書館。那麼，這裏有什麼問題？ 我得到象這樣的錯誤

​​

Answer 1

瞭解，A-幀不與之反應開箱工作是很重要的。

每當您在JSX中包含像<a-scene>這樣的標籤時，React都會期望它與現有組件匹配。這是因爲JSX中的所有標籤都映射到組件（內置的組件），例如<img />或自定義組件。

那麼你需要做的是使用包裝陣營組件邏輯對這些新的VR標籤，如aframe-react