A-frameとD3を組み合わせて使うサンプル。
localで動かしたいときは以下を。
$ git clone git@gist.github.com:2675d59f526a80b02d8db8c26ab0e45d.git
$ cd 2675d59f526a80b02d8db8c26ab0e45d
$ npm install
$ npm startscript.jsの中身を修正したい場合は、ビルドツールが使う依存モジュールのインストールが必要です。
$ npm run installDevtool
$ npm startconst poStrfy = (x, y, z) => [x, y, z].join(" ");
const cast = d => {
Object.keys(d).forEach(key => {
if (!isNaN(+d[key])) d[key] = +d[key];
});
return d;
};
const rnd = () => Math.random();
const xScale = d3.scaleLinear().domain([0, 1]).range([-20, 20])
const yScale = d3.scaleLinear().domain([0, 1]).range([0.1, 15])
const zScale = d3.scaleLinear().domain([0, 1]).range([-10, -35])
const rScale = d3.scaleLinear().domain([0, 1]).range([0.1, 3])
const data = d3.range(40).map( () =>{ return {x:xScale(rnd()),y:yScale(rnd()), z:zScale(rnd())} })
const scene1 = d3.select("#scene1").datum(data);
const addCircle = (_selection) => {
const circle = _selection
.selectAll(".circle")
.data(d => d)
.enter()
.append("a-sphere")
.attr("class", "circle")
.attr("color", ()=> d3.interpolateRainbow(rnd()))
.attr("radius", ()=> rScale(rnd()))
.attr("shadow", true)
repeat();
function repeat() {
circle
.transition()
// .delay((d,i) => ~~(Math.random() * 500 ))
.duration(2000)
.attrTween("position", (d, i) => {
d.dx = xScale(rnd());
d.dy = yScale(rnd());
d.dz = zScale(rnd());
const xfn = d3.interpolate(d.x, d.dx);
const yfn = d3.interpolate(d.y, d.dy);
const zfn = d3.interpolate(d.z, d.dz);
return t => poStrfy(xfn(t), yfn(t), zfn(t));
})
.transition()
.duration(2000)
.attrTween("position", (d, i) => {
const xfn = d3.interpolate(d.dx, d.x);
const yfn = d3.interpolate(d.dy, d.y);
const zfn = d3.interpolate(d.dz, d.z);
return t => poStrfy(xfn(t), yfn(t), zfn(t));
})
.on("end", repeat)
};
}
scene1.call(addCircle);
<!DOCTYPE html>
<title>d3 & a-frame example2</title>
<link href='dist.css' rel='stylesheet' />
<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script>
<script src="//unpkg.com/aframe@0.7.1/dist/aframe.js"></script>
<body>
<a-scene id="scene1" d3>
<a-sky radius="5000" color="skyblue"></a-sky>
<a-plane color="wheat" height="20" width="40" position="0 -1 0" rotation="270 0 0"></a-plane>
<a-entity camera look-controls wasd-controls cursor="rayOrigin: mouse" position="0 0 0">
</a-entity>
</a-scene>
<script src='dist.js'></script>
</body>
/* Do not touch this file - your changes will be overwritten. */
!function(n){function I(C){if(g[C])return g[C].exports;var t=g[C]={i:C,l:!1,exports:{}};return n[C].call(t.exports,t,t.exports,I),t.l=!0,t.exports}var g={};I.m=n,I.c=g,I.i=function(n){return n},I.d=function(n,g,C){I.o(n,g)||Object.defineProperty(n,g,{configurable:!1,enumerable:!0,get:C})},I.n=function(n){var g=n&&n.__esModule?function(){return n.default}:function(){return n};return I.d(g,"a",g),g},I.o=function(n,I){return Object.prototype.hasOwnProperty.call(n,I)},I.p="",I(I.s=0)}([function(module,exports,__webpack_require__){"use strict";eval('\n\nvar poStrfy = function poStrfy(x, y, z) {\n return [x, y, z].join(" ");\n};\n\nvar cast = function cast(d) {\n Object.keys(d).forEach(function (key) {\n if (!isNaN(+d[key])) d[key] = +d[key];\n });\n return d;\n};\n\nvar rnd = function rnd() {\n return Math.random();\n};\n\nvar xScale = d3.scaleLinear().domain([0, 1]).range([-20, 20]);\nvar yScale = d3.scaleLinear().domain([0, 1]).range([0.1, 15]);\nvar zScale = d3.scaleLinear().domain([0, 1]).range([-10, -35]);\n\nvar rScale = d3.scaleLinear().domain([0, 1]).range([0.1, 3]);\n\nvar data = d3.range(40).map(function () {\n return { x: xScale(rnd()), y: yScale(rnd()), z: zScale(rnd()) };\n});\n\nvar scene1 = d3.select("#scene1").datum(data);\n\nvar addCircle = function addCircle(_selection) {\n var circle = _selection.selectAll(".circle").data(function (d) {\n return d;\n }).enter().append("a-sphere").attr("class", "circle").attr("color", function () {\n return d3.interpolateRainbow(rnd());\n }).attr("radius", function () {\n return rScale(rnd());\n }).attr("shadow", true);\n\n repeat();\n\n function repeat() {\n\n circle.transition()\n // .delay((d,i) => ~~(Math.random() * 500 ))\n .duration(2000).attrTween("position", function (d, i) {\n d.dx = xScale(rnd());\n d.dy = yScale(rnd());\n d.dz = zScale(rnd());\n var xfn = d3.interpolate(d.x, d.dx);\n var yfn = d3.interpolate(d.y, d.dy);\n var zfn = d3.interpolate(d.z, d.dz);\n return function (t) {\n return poStrfy(xfn(t), yfn(t), zfn(t));\n };\n }).transition().duration(2000).attrTween("position", function (d, i) {\n var xfn = d3.interpolate(d.dx, d.x);\n var yfn = d3.interpolate(d.dy, d.y);\n var zfn = d3.interpolate(d.dz, d.z);\n return function (t) {\n return poStrfy(xfn(t), yfn(t), zfn(t));\n };\n }).on("end", repeat);\n };\n};\n\nscene1.call(addCircle);//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9zY3JpcHQuanM/OWE5NSJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBwb1N0cmZ5ID0gKHgsIHksIHopID0+IFt4LCB5LCB6XS5qb2luKFwiIFwiKTtcblxuY29uc3QgY2FzdCA9IGQgPT4ge1xuICBPYmplY3Qua2V5cyhkKS5mb3JFYWNoKGtleSA9PiB7XG4gICAgaWYgKCFpc05hTigrZFtrZXldKSkgZFtrZXldID0gK2Rba2V5XTtcbiAgfSk7XG4gIHJldHVybiBkO1xufTtcblxuY29uc3Qgcm5kID0gKCkgPT4gTWF0aC5yYW5kb20oKTtcblxuY29uc3QgeFNjYWxlID0gZDMuc2NhbGVMaW5lYXIoKS5kb21haW4oWzAsIDFdKS5yYW5nZShbLTIwLCAyMF0pXG5jb25zdCB5U2NhbGUgPSBkMy5zY2FsZUxpbmVhcigpLmRvbWFpbihbMCwgMV0pLnJhbmdlKFswLjEsIDE1XSlcbmNvbnN0IHpTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKFswLCAxXSkucmFuZ2UoWy0xMCwgLTM1XSlcblxuXG5jb25zdCByU2NhbGUgPSBkMy5zY2FsZUxpbmVhcigpLmRvbWFpbihbMCwgMV0pLnJhbmdlKFswLjEsIDNdKVxuXG5jb25zdCBkYXRhID0gZDMucmFuZ2UoNDApLm1hcCggKCkgPT57IHJldHVybiB7eDp4U2NhbGUocm5kKCkpLHk6eVNjYWxlKHJuZCgpKSwgejp6U2NhbGUocm5kKCkpfSB9KVxuXG5cbmNvbnN0IHNjZW5lMSA9IGQzLnNlbGVjdChcIiNzY2VuZTFcIikuZGF0dW0oZGF0YSk7XG5cblxuY29uc3QgYWRkQ2lyY2xlID0gKF9zZWxlY3Rpb24pID0+IHtcblx0Y29uc3QgY2lyY2xlID0gX3NlbGVjdGlvblxuICAgIC5zZWxlY3RBbGwoXCIuY2lyY2xlXCIpXG4gICAgLmRhdGEoZCA9PiBkKVxuICAgIC5lbnRlcigpXG4gICAgLmFwcGVuZChcImEtc3BoZXJlXCIpXG4gICAgLmF0dHIoXCJjbGFzc1wiLCBcImNpcmNsZVwiKVxuICAgIC5hdHRyKFwiY29sb3JcIiwgKCk9PiBkMy5pbnRlcnBvbGF0ZVJhaW5ib3cocm5kKCkpKVxuXHQuYXR0cihcInJhZGl1c1wiLCAoKT0+IHJTY2FsZShybmQoKSkpXG4gICAgLmF0dHIoXCJzaGFkb3dcIiwgdHJ1ZSlcbiAgICBcbiAgICByZXBlYXQoKTtcbiAgICBcbiAgICBcbiAgICBmdW5jdGlvbiByZXBlYXQoKSB7XG4gICAgICAgIFxuICAgICAgY2lyY2xlXG4gICAgICAgIC50cmFuc2l0aW9uKCkgICAgICAgIFxuLy8gICAgICAgIC5kZWxheSgoZCxpKSA9PiB+fihNYXRoLnJhbmRvbSgpICogNTAwICkpXG4gICAgICAgIC5kdXJhdGlvbigyMDAwKVxuICAgICAgICAuYXR0clR3ZWVuKFwicG9zaXRpb25cIiwgKGQsIGkpID0+IHtcbiAgICAgICAgICAgIGQuZHggPSB4U2NhbGUocm5kKCkpOyAgICAgICAgICAgIFxuICAgICAgICAgICAgZC5keSA9IHlTY2FsZShybmQoKSk7ICAgICAgICAgICAgXG4gICAgICAgICAgICBkLmR6ID0gelNjYWxlKHJuZCgpKTsgICAgICAgICAgICBcbiAgICAgICAgICAgIGNvbnN0IHhmbiA9IGQzLmludGVycG9sYXRlKGQueCwgZC5keCk7XG4gICAgICAgICAgICBjb25zdCB5Zm4gPSBkMy5pbnRlcnBvbGF0ZShkLnksIGQuZHkpO1xuICAgICAgICAgICAgY29uc3QgemZuID0gZDMuaW50ZXJwb2xhdGUoZC56LCBkLmR6KTtcbiAgICAgICAgICAgIHJldHVybiB0ID0+IHBvU3RyZnkoeGZuKHQpLCB5Zm4odCksIHpmbih0KSk7XG4gICAgICAgIH0pXG4gICAgICAgIC50cmFuc2l0aW9uKCkgICAgICAgIFxuICAgICAgICAuZHVyYXRpb24oMjAwMClcbiAgICAgICAgLmF0dHJUd2VlbihcInBvc2l0aW9uXCIsIChkLCBpKSA9PiB7XG4gICAgICAgICAgICBjb25zdCB4Zm4gPSBkMy5pbnRlcnBvbGF0ZShkLmR4LCBkLngpO1xuICAgICAgICAgICAgY29uc3QgeWZuID0gZDMuaW50ZXJwb2xhdGUoZC5keSwgZC55KTtcbiAgICAgICAgICAgIGNvbnN0IHpmbiA9IGQzLmludGVycG9sYXRlKGQuZHosIGQueik7XG4gICAgICAgICAgICByZXR1cm4gdCA9PiBwb1N0cmZ5KHhmbih0KSwgeWZuKHQpLCB6Zm4odCkpO1xuICAgICAgICB9KVxuICAgICAgICAub24oXCJlbmRcIiwgcmVwZWF0KVxuICAgICAgICBcbiAgICB9O1xuICAgIFxufVxuXG5cblxuXG5zY2VuZTEuY2FsbChhZGRDaXJjbGUpO1xuXG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gc2NyaXB0LmpzIl0sIm1hcHBpbmdzIjoiOztBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBRUE7QUFDQTtBQUVBO0FBQ0E7QUFFQTtBQUFBO0FBSUE7QUFBQTtBQUNBO0FBQUE7QUFDQTtBQUVBO0FBQ0E7QUFFQTtBQUNBO0FBQ0E7QUFFQTtBQUZBO0FBS0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFJQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFDQTtBQUdBO0FBRUE7QUFDQTtBQUlBIiwic291cmNlUm9vdCI6IiJ9')}]);{
"dependencies": {
"blockup": "^2.2.10"
},
"name": "aframe-d3",
"description": "[Made with blockup](https://github.com/gabrielflorit/blockup)",
"version": "1.0.0",
"main": "dist.js",
"devDependencies": {},
"scripts": {
"start":"blockup server"
},
"author": "",
"license": "ISC"
}
*
box-sizing border-box