小编Str*_*e Q的帖子

在互联网上的许多示例（例如webglfundamentals或webgl-bolerplate）中，作者使用两个三角形来覆盖全屏并为画布上的每个像素调用像素着色器。

var canvas, gl, buffer, 
			    vertex_shader, fragment_shader, 
			    currentProgram, vertex_position,
			    timeLocation, resolutionLocation,
			    parameters = {  start_time  : new Date().getTime(), 
			                    time        : 0, 
			                    screenWidth : 0, 
			                    screenHeight: 0 };
			init();
			animate();
 
			function init() {
				vertex_shader = document.getElementById('vs').textContent;
				fragment_shader = document.getElementById('fs').textContent;
				canvas = document.querySelector( 'canvas' );
				try {
					gl = canvas.getContext( 'experimental-webgl' );
				} catch( error ) { }
				if ( !gl ) 
					throw "cannot create webgl context";

				// Create Vertex buffer (2 triangles)
				buffer = gl.createBuffer();
				gl.bindBuffer( gl.ARRAY_BUFFER, …

问题,简而言之:如何使用Google Maps API之外的其他东西在Mercator中准确地投影包裹大圆半径？

问题,长期:

所以我有一个难题.我运行了一个地图应用程序,它使用谷歌地图API将巨大的圆圈投射到墨卡托地图上 - 它试图显示非常大的,准确的半径,比如大约13,000公里.但我不想再使用谷歌地图API,因为谷歌的新定价方案是疯了.所以我试图将代码转换为Leaflet,Mapbox或任何非谷歌,并且没有任何东西可以正确处理这些圈子.

以下是Google Maps API处理非洲北部中心13,000公里半径的测地圆的方法:

这看起来很直观,但是是正确的.波浪形图案是由环绕地球的圆圈引起的.

D3.js可以在正交投影中正确渲染.所以这是在地球上用d3.geo.circle()在D3.js中渲染的相同圆圈,两次旋转:

这使2D-"波浪"图案更有意义,对吧？对.我喜欢它.完全符合我的科学传播目的和所有这些.

但是当我将我的代码转换为Leaflet时,它根本不起作用.为什么？因为Leaflet的圆圈类不是一个很棒的圆圈.相反,它似乎只是一个椭圆,它与纬度有点扭曲,但不是真正的测地线.相同的圆,相同的半径,相同的原点,我们得到这个:

太错了,错了!除了看起来完全不现实之外,它只是不正确 - 澳大利亚不会在这样的圆形范围内.这对我的申请很重要!这不可能.

好吧,我想,也许诀窍就是尝试实现我自己的大圆圈课程.我采用的方法是迭代圆点作为距离原点的距离,但是使用这个非常有用的网站上的"目标点给定距离和从起点承载"计算距离,然后将它们投影为多边形.传单.这就是我得到的结果:

这看起来很糟糕但实际上更接近于准确!我们得到了波浪效应,这是正确的.像我一样,你可能会问,"这里到底发生了什么？" 所以我做了一个允许我突出显示每个迭代点的版本:

你可以非常清楚地看到它正确地渲染了圆圈,但是多边形错误地连接了它.它应该做什么(人们可能天真地想到)是围绕墨卡托地图投影的多个实例包裹该波形图,而不是天真地将它们连接在顶部,而是将它们球形地连接起来.像这样粗糙的Photoshop渲染:

然后多边形将以一种方式"关闭",表明多边形上方的所有东西都包含在其中.

我不知道如何在Leaflet中实现这样的东西.或其他任何事情.也许我必须以某种方式自己处理原始SVG,考虑到缩放状态？或者其他的东西？在我走进那些奸诈的杂草之前,我想我会要求任何建议/想法/等等.也许有一些更明显的方法.

哦,我尝试了另外一件事:使用相同的d3.geo.circle构造函数,该构造函数在墨卡托/ Leaflet投影的正交投影中运行良好.它产生或多或少与我的"天真"Leaflet大圆实现相同的结果:

我想这是有希望的.但是,如果移动原点的经度,则D3.js版本以更奇怪的方式包装(D3.js为红色,我的Leaflet类为绿松石):

如果在D3.js中有某种方式可以改变其工作方式,我不会感到惊讶,但我没有完全放下D3.js兔子洞.我希望D3.js会让这个"更容易"(因为它是比Leaflet更完整的制图工具),所以我会继续研究这个.

我还没有尝试在Mapbox-gl中这样做(我想这是"尝试"列表中的下一个).

无论如何.谢谢阅读.重申一个问题:如何使用Google Maps API之外的其他内容准确地在Mercator中投影包裹大圆半径？

编辑:当我拖动边框时会发送某种刷新,我需要弄清楚并手动发送相同的刷新.

• 请注意我已尝试使用revalidate()和repaint().

当使用JFrame和JPanel来显示一个框架时,我正在努力使它框架的大小很容易变化.

我要做的是做一个开关,这样我就可以在"小视图"和"大视图"之间切换.

但是,在尝试执行以下操作时,面板内容中会出现一个白条:

• 开架...(默认是大尺寸)
• 设置为小尺寸
• 再次设置为大尺寸
• 再次设置为小尺寸(这是出现白条时)(请参阅主方法中的注释)

下面是框架内容底部出现的白条图片:

此外,一个很大的注意事项是,当您拖动边框时,白条会消失并重新加载/刷新内容(即使您只拖动了一小部分)

public class FrameTest {
    private static FrameTest instance;

    JFrame clientFrame

    JPanel client_panel;

    private void openFrames() {
            JclientFrame = new JFrame("727 Deob");
            clientFrame.setLayout(new BorderLayout());
            client_panel = new JPanel();
            client_panel.setLayout(new BorderLayout());
            client_panel.add(new Applet());
            client_panel.setPreferredSize(new Dimension(765, 555));
            clientFrame.getContentPane().add(client_panel, BorderLayout.PAGE_END);
            clientFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            clientFrame.pack();
            clientFrame.setVisible(true);
    }

    public static void main(String[] args) {
       instance = new FrameTest();
       instance.openFrames();

       instance.setDimensions(true); //works absolutely fine!
       instance.setDimensions(false); //continues to work absolutely fine!
       instance.setDimensions(true); //now the white bar at the bottom …

我想弄清楚如何正确计算vizibility区域并使用d3.geo投影绘制它.在我的情况下可见区是光学相机视锥

现在,我有两个图,都表示从视点的方位角和高度,一个在gnomonic(根据维基)投影:

// this magic number is experimentally found 
//pixels in one degree in gnomonic projection chart with scale 1500
var px = 26.8;

下面的宽度和高度是光学相机视角,以方位角和仰角轴为单位

var w = px * viewport.width; 
var h = px * viewport.height;

d3.geoGnomonic()
  .translate([w / 2, h / 2])
  .scale(1500)

在gnomonic plot上我按边界放置点,然后使用d3.projection.invert方法重新投影这些点,并在d3.geoEquirectangular投影图上使用结果角度绘制区域(如此处),结果如下:

viewport 这是角度的平截头体大小

当前的方法是错误的,但给出了近似的结果

我想弄清楚我的场景中有什么问题..

ps:我已经提取了最小的例子,它与原始代码不同但有相同的错误:在这里你可以看到横轴的大小与输入大小不同(必须是10,20,30,40度)

建议和意见是适当的.谢谢阅读!

var d3 = window.d3;
    var colorGenerator = d3.scaleOrdinal(d3.schemeCategory10);
    var bounds = [650, 500];
    var projection = d3.geoEquirectangular().translate([bounds[0]/2, bounds[1]/2]);
    var …

如何在three.js中创建椭圆？

我看过这个: 在THREE.js画一个椭圆

但如果有人能够提供一个有效的例子,那将会很酷.

我试过这个:

ellipse = new THREE.EllipseCurve(0,0,200,400,45,45,10);

但这不适合我.我不知道参数是什么意思所以我只是盲目地去做.

编辑:当我尝试创建椭圆曲线时,我收到错误"已定义不是函数".

edit2:弄清楚我必须包含Curves.js才能工作但是在某个地方有一个工作示例对我和其他人来说仍然非常好,因为我之前粘贴的stackoverflow链接没有一个例子.

我有这个对象我正在加载THREE.objLoader,然后像这样创建一个网格:

mesh = new THREE.SceneUtils.createMultiMaterialObject(
  geometry,
  [
    new THREE.MeshBasicMaterial({color: 0xFEC1EA}),
    new THREE.MeshBasicMaterial({
      color: 0x999999,
      wireframe: true,
      transparent: true,
      opacity: 0.85
    })
  ]
);

在我的场景中,我然后添加一个DirectionalLight,它可以工作,我可以看到我的对象,但它就像DirectionalLight是一个环境光.没有脸变得更暗或更浅.

对象用颜色填充,但不对其应用光照.如果有人可以帮助我,那将非常感激:)

我能错过什么？

Jsfiddle在这里:http://jsfiddle.net/5hcDs/

如果我有N个圆圈都具有相同的直径,我如何确定切向连接它们的最小内切多边形？有这样的公式吗？

一旦创建了这个多边形,我相信一个圆圈将被放置在每个线段的中点.

我在图片中的一些例子:https://imgur.com/a/J9lt89P