JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
CSS
body {
margin: 0px;
overflow: hidden;
}
JavaScript
var N = 9, v = 30, data = d3.range(9).map(next);
function next () {
return (v = ~~Math.max(10, Math.min(90, v + 20 * (Math.random() - .5))));
}
setInterval(function () {
data.shift(); data.push(next()); update();
}, 1500);
var camera, scene, renderer, chart3d, newBar;
// эти методы нужны для D3-шных .append() и .selectAll()
THREE.Object3D.prototype.appendChild = function (c) { this.add(c); return c; };
THREE.Object3D.prototype.querySelectorAll = function (selector) {
var matches = [];
var type = eval(selector);
for (var i = 0; i < this.children.length; i++) {
var child = this.children[i];
if (child instanceof type) {
matches.push(child);
}
}
return matches;
}
// а эти - для D3-шных .attr() и .transition()
THREE.Object3D.prototype.setAttribute = function (name, value) {
var chain = name.split('.');
var object = this;
for (var i = 0; i < chain.length - 1; i++) {
object = object[chain[i]];
}
object[chain[chain.length - 1]] = value;
}
THREE.Object3D.prototype.getAttribute = function (name) {
var chain = name.split('.');
var object = this;
for (var i = 0; i < chain.length - 1; i++) {
object = object[chain[i]];
}
return object[chain[chain.length - 1]];
}
init();
update();
animate();
function update () {
// используем D3 для стоздания и обновления 3D столбцов
var bars = d3.select( chart3d )
.selectAll("THREE.Mesh")
.data(data);
bars.enter().append( newBar )
.attr("position.x", function(d, i) { return 30 * (i - N/2); });
bars.transition()
.duration(1000)
.attr("position.y", function(d, i) { return d; })
.attr("scale.y", function(d, i) { return d / 10; });
}
function init () {
try {
renderer = new THREE.WebGLRenderer();
} catch (oops) {
renderer = new THREE.CanvasRenderer();
}
renderer.setSize( window.innerWidth, window.innerHeight );
...