1
three.jsで3D目盛りを作成しようとしています。この現在の努力は、最初にD3を使用してSVGにmollweide投影目盛りを作成します。次に、それを3つの.jsベクトルに変換します。D3 + Three.js：目盛り投影 - 目盛りに投影を適用できません
しかし、得られた3つの目盛りは、球面目盛りに過ぎず、望ましい投影（モルワイド）点には反応しません。何か案は？
これを以下のファイルに示します。問題のある機能は、お使いの頂点（ポイント）機能が正しくように再構成し、2次元の点の3次元位置を決定する:)私はあなたがそこにやろうとしているもの見当がつかない頂点（ポイント）
<!DOCTYPE HTML>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/r86/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/r86/examples/js/controls/OrbitControls.js"></script>
<title>3D Mollweide Projection</title>
<style type="text/css">
<!--
.background {
fill: #a4bac7;
}
.foreground {
fill: none;
stroke: #333;
stroke-width: 1.5px;
}
.graticule {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
-->
</style>
</head>
<body style=font-family:arial>
<center>SVG Drawing (mollweide projection):</center>
<svg id=projectionSVG width=600 height=440 overflow=visible />
Three.js Drawing (rotate and mousewheel zoom):<br>
<div id=container></div>
<script>
var projection
var gratPathPointArray=[]
var radius = 230
//----build svg graticule----
projection = d3.geo.mollweide()
.scale(120);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg= d3.select("#projectionSVG")
svg.append("path")
.datum(graticule.outline)
.attr("class", "background")
.attr("d", path);
var graticuleG=svg.append("g")
.attr("class", "graticule")
.selectAll("path")
.data(graticule.lines)
.enter().append("path")
.attr("d", path);
var graticulePathG=projectionSVG.lastChild
var graticulePaths=graticulePathG.childNodes
for(p=0;p<graticulePaths.length;p++)
{
var holdArray=[]
var graticulePath=graticulePaths[p]
var d=graticulePath.getAttribute("d")
var d=d.replace(/M/,"").replace(/L/g,",")
var dSplit=d.split(",")
for(var k=0;k<dSplit.length;k++)
{
var x=dSplit[k]
var y=dSplit[k+1]
holdArray.push([x,y])
k++
}
gratPathPointArray.push(holdArray)
}
threeJSVectors()
function threeJSVectors()
{
initThree()
var geometry = new THREE.Geometry();
var material= new THREE.LineBasicMaterial({color: 0xaaaaaa})
var splineVectors=[]
//=========graticule lines==============
gratPathPointArray.forEach(function(line)
{
d3.pairs(line.map(vertex), function(a, b)
{
geometry.vertices.push(a, b);
});
});
scene.add(new THREE.LineSegments(geometry, material))
animate()
render()
}
//----build three.js graticule---
var renderer,camera,controls,scene
function initThree()
{
var width = 600,
height = 600
scene = new THREE.Scene;
camera = new THREE.PerspectiveCamera(70, width/height, 1, 1000);
renderer = new THREE.WebGLRenderer({alpha: true});
camera.position.x = -7;
camera.position.y = -245;
camera.position.z = 315;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.addEventListener('change', render);
}
//---does not apply projection????---
//--convert path point to vector---
function vertex(point)
{
//---get lng/lat degrees of each projection point--
var invertLL=projection.invert(point)
//---to radians--
var lambda = invertLL[0] * Math.PI/180,
phi = invertLL[1] * Math.PI/180,
cosPhi = Math.cos(phi);
return new THREE.Vector3(
radius * cosPhi * Math.cos(lambda),
radius * cosPhi * Math.sin(lambda),
radius * Math.sin(phi)
);
}
function animate()
{
\t requestAnimationFrame(animate);
\t controls.update();
}
function render()
{
\t camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>
感謝を。実際には、Mollweide投影のような形の3D楕円目盛りを作成したかったのです。私が最後にしたのは、球面目盛りを作成する方法を使用した後、楕円目盛りを作成するための因子で幅（x）値を掛けただけです。 http://svgdiscovery.com/THREEjs/Examples/17_three.js-D3-graticule.htmおよびhttp://svgdiscovery.com/THREEjs/Examples/17_three.js-D3-grtualule-elliptical.htmのサンプルを参照してください。 –