Fatal编程技术网

JavaScript WebGL未呈现

javascript node.js reactjs webpack webgl

JavaScript WebGL未呈现,javascript,node.js,reactjs,webpack,webgl,Javascript,Node.js,Reactjs,Webpack,Webgl,我正在与WebGL globe一起开发一个项目： 我已经让它在静态HTML/JS页面中正常工作 现在我将它集成到Node.js和React框架中，但无法在页面中呈现3D球体。即使只是将相同的静态HTML/JS复制到root index.HTML中（将其保留在React之外），我仍然无法使其呈现 下面是原始的静态HTML/JS（工作），以及新应用程序框架中使用的HTML/JS页面（工作）： 这里的一切都正常（没有错误），但WebGL只是不渲染 了解WebGL不呈现的原因吗？您是否尝试过检查gl.g

我正在与WebGL globe一起开发一个项目：

我已经让它在静态HTML/JS页面中正常工作

现在我将它集成到Node.js和React框架中，但无法在页面中呈现3D球体。即使只是将相同的静态HTML/JS复制到root index.HTML中（将其保留在React之外），我仍然无法使其呈现

下面是原始的静态HTML/JS（工作），以及新应用程序框架中使用的HTML/JS页面（工作）：

这里的一切都正常（没有错误），但WebGL只是不渲染

了解WebGL不呈现的原因吗？

您是否尝试过检查
gl.getError（）
？是否尝试过检查
gl.getError（）
？ 
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>PIVX Planet</title>
    <meta charset="utf-8">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href="./css/main.css" rel="stylesheet">
  </head>

  <body>

  <div id="container"></div>

  <div id="logo"><img src="images/PIVX_Planet_1a_239x83.png" alt="PIVX Planet" height="83" width="239"></div>

  <div id="side-bar-left">
    <p><a href="http://www.pivx.org" target="_blank">Website</a></p>
    <p><a href="https://pivx.org/news/" target="_blank">News</a></p>
    <hr>
    <p><a href="http://pivx.slack.com" target="_blank">Slack</a></p>
    <p><a href="https://forum.pivx.org" target="_blank">Forum</a></p>
    <hr>
    <p><a href="https://www.facebook.com/PIVxCrypto" target="_blank">FaceBook</a></p>
    <p><a href="https://twitter.com/_pivx" target="_blank">Twitter</a></p>
    <p><a href="https://www.youtube.com/channel/UCr4Wk2opstIsUvMOz9quFSg?&ab_channel=PIVXCrypto" target="_blank">YouTube</a></p>
    <p><a href="https://www.reddit.com/r/pivx/" target="_blank">Reddit</a></p>
    <hr>
    <p><a href="https://pivxmasternode.org" target="_blank">Masternode</a></p>
    <p><a href="http://178.254.23.111/~pub/DN/DN_masternode_payments_stats.html" target="_blank">Masternode status</a></p>
    <hr>
    <p><a href="http://pivx.wiki" target="_blank">Wiki</a></p>
    <p><a href="https://github.com/PIVX-Project" target="_blank">GitHub</a></p>
    <p><a href="https://pivx.org/wp-content/uploads/2017/03/PIVX-purple-paper-Technincal-Notes.pdf" target="_blank">Purple Paper</a></p>
    <hr>
    <p><a href="http://www.presstab.pw/phpexplorer/PIVX/index.php" target="_blank">Explorer</a></p>
  </div>

  <div id="info">
    <a href="/about" target="_blank">About PIVX Planet</a>
  </div>

  <script type="text/javascript" src="/globe/third-party/Detector.js"></script>
  <script type="text/javascript" src="/globe/third-party/three.min.js"></script>
  <script type="text/javascript" src="/globe/third-party/Tween.js"></script>
  <script type="text/javascript" src="/globe/globe.js"></script>

  <script type="text/javascript">

    if(!Detector.webgl){
      Detector.addGetWebGLMessage();
    } else {

      var years = ['1990','1995','2000'];
      var container = document.getElementById('container');
      var globe = new DAT.Globe(container);

      console.log(globe);
      var i, tweens = [];

      var settime = function(globe, t) {
        return function() {
          new TWEEN.Tween(globe).to({time: t/years.length},500).easing(TWEEN.Easing.Cubic.EaseOut).start();
          var y = 2000; //document.getElementById('year'+years[t]);
        };
      };

      var xhr;
      TWEEN.start();

      xhr = new XMLHttpRequest();
      xhr.open('GET', '/globe/population909500.json', true);
      xhr.onreadystatechange = function(e) {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            window.data = data;
            for (i=0;i<data.length;i++) {
              globe.addData(data[i][1], {format: 'magnitude', name: data[i][0], animated: true});
            }
            globe.createPoints();
            settime(globe,0)();
            globe.animate();
            document.body.style.backgroundImage = 'none'; // remove loading
          }
        }
      };
      xhr.send(null);
    }

  </script>

  </body>
</html>

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>PIVX Planet</title>
    <meta charset="utf-8">

    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href="./css/main.css" rel="stylesheet">
  </head>

  <body>

    <div id='root'></div>

    <div id='container'></div>

    <script type="text/javascript" src="/globe/third-party/Detector.js"></script>
    <script type="text/javascript" src="/globe/third-party/three.min.js"></script>
    <script type="text/javascript" src="/globe/third-party/Tween.js"></script>
    <script type="text/javascript" src="/globe/globe.js"></script>

    <script type="text/javascript">

    if(!Detector.webgl){
      Detector.addGetWebGLMessage();
    } else {

      var years = ['1990','1995','2000'];
      var container = document.getElementById('container');
      var globe = new DAT.Globe(container);

      console.log(globe);
      var i, tweens = [];

      var settime = function(globe, t) {
        return function() {
          new TWEEN.Tween(globe).to({time: t/years.length},500).easing(TWEEN.Easing.Cubic.EaseOut).start();
          var y = 2000; //document.getElementById('year'+years[t]);
        };
      };

      var xhr;
      TWEEN.start();

      xhr = new XMLHttpRequest();
      xhr.open('GET', '/globe/population909500.json', true);
      xhr.onreadystatechange = function(e) {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            window.data = data;
            for (i=0;i<data.length;i++) {
              globe.addData(data[i][1], {format: 'magnitude', name: data[i][0], animated: true});
            }
            globe.createPoints();
            settime(globe,0)();
            globe.animate();
            document.body.style.backgroundImage = 'none'; // remove loading
          }
        }
      };
      xhr.send(null);
    }

  </script>

  </body>
</html>

<script src="/main.js"></script>

'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'app/Main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.tpl.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        "presets": ["react", "es2015", "stage-0", "react-hmre"]
      }
    }, {
      test: /\.(jpg|png|svg)$/,
      loader: 'url-loader',
      options: {
        limit: 25000,
      },
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
    }]
  }
};