I'm developing a project with WebGL globe: https://www.chromeexperiments.com/globe
I already have it generally working in a static HTML/JS page.
Now I'm integrating it into a Node.js and React framework, but not able to get the 3D globe to render in the page. Even just copying the same static HTML/JS into the root index.html (leaving it outside of React), am still not able to get it to render.
Below is the original static HTML/JS (works), and the HTML/JS page being used in the new app framework (this works):
<!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>
And here is the HTML/JS page being used in the new app framework (this works with no errors, but the WebGl globe is not showing). Note: <div id='root'></div> is added inside the body which React places all the HTML links (in above code) into document (most everything except the WebGL globe):
<!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>
When the page renders in the browser, this line is injected into the very end of the document (after the last </script> before the closing </body>, which references the React injection:
<script src="/main.js"></script>
In this second case, Webpack is also being used. My guess is that the problem/solution may be in here. I don't understand Webpack enough yet to know for sure. Could HtmlWebpackPlugin have something to do with this?
'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]'
}]
}
};
Everything here works (no errors), but the WebGL just does not render.
Any insight into why the WebGL is not rendering?
via Michael Gaio
No comments:
Post a Comment