webgl 坐标系_WebGL太阳系之旅：火星，第一部分

webgl 坐标系

In the previous article I introduced WebGL, and talked about why I’d be using threeJS to demonstrate the ability of WebGL to create native 3D content on web pages. In this article, I show you how to make a 3D camera, and control the interaction between your WebGL content and the HTML page it is contained within.

在上一篇文章中，我介绍了WebGL，并讨论了为什么我要使用threeJS来演示WebGL在网页上创建本机3D内容的能力。 在本文中，我将向您展示如何制作3D相机，以及如何控制WebGL内容和其中包含的HTML页面之间的交互。

Because I’m explaining each step thoroughly as we go, this article won’t get you all the way to a rendered scene; subsequent articles, building (and dependent) on this one will achieve that. If you’re eager to see the final result, check out the CodePen demo linked above.

因为我正在逐步解释每个步骤，所以本文不会完全照到渲染场景。 随后的文章(以此为基础(并依赖))将实现这一目标。 如果您渴望看到最终结果，请查看上面链接的CodePen演示 。

球形音乐 (Music of the Spheres)

While it can be used by itself as the sole content of a page, one of the advantages of WebGL is that it is a standards-based web technology, meaning that it can be integrated seamlessly with HTML content. Seeing that <canvas> lacks many accessibility and SEO features, it makes sense to produce a WebGL scene progressively: presenting text as HTML text, and adding WebGL content where appropriate. For our page about Mars, that means we start with the following markup:

虽然它可以单独用作页面的唯一内容，但是WebGL的优点之一是它是基于标准的Web技术 ，这意味着它可以与HTML内容无缝集成。 眼看<canvas>缺少很多无障碍和搜索引擎优化功能，它是有道理的，产生的WebGL场景逐渐 ：文本呈现为HTML文本 ，并加入WebGL内容的适当。 对于有关火星的页面，这意味着我们从以下标记开始：

<div id="marsloc"></div>
<article id="marsinfo">
<h1>Mars</h1>
  <div>
    <p>Home to both the Solar System’s highest mountain…
  </div>
</article>

marsloc will contain our rendered WebGL content, with the HTML content layered on top. This is controlled with CSS, written as Sass:

marsloc将包含我们渲染的WebGL内容，HTML内容位于最上面 。 这是由CSS控制的，写为Sass ：

body {
  background: black;
  margin: 0;
  min-height: 100vh;
  color: #fff;
}
#marsloc {
  cursor: grab;
}
#marsinfo { 
  position: absolute;
  top: 0;
  width: 100%;
  padding: 2rem;
}
#marsinfo h1 {
  font-size: 8vw;
  margin-top: 0;
  font-weight: 100;
  line-height: 1;
  position: absolute;
}
#marsinfo div {
  width: 40%;
  position: absolute;
  background-color: rgba(0,0,0,0.3);
  right: 0;
  padding: 1.3rem;
  line-height: 1.6;
  font-size: 1.2rem;
  pointer-events: none;
  @media all and (max-width: 540px) {
    width: 100%;
    left: 0;
    top: 40vw;
  }
}

The grab cursor on #marsloc will work as a UI cue for the WebGL content; the div in #marsinfo is provided with pointer-events: none so that the content on top does not interfere with manipulation of the planet.

#marsloc上的grab光标将用作WebGL内容的UI提示； #marsinfo的div提供了pointer-events: none因此最上面的内容不会干扰对行星的操纵。

如何造一个星球 (How To Make A Planet)

With the HTML and CSS in place, we’ll load the latest version of threeJS from a CDN at the bottom of the page:

有了HTML和CSS，我们将从页面底部的CDN加载threeJS的最新版本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js">
</script>

We need the threeJS library to be in place before starting with threeJS-infused code.

在开始注入ThreeJS的代码之前，我们需要ThreeJS库。

Our next script starts by setting up a suite of variables and constants that we’ll be using in our code:

我们的下一个脚本从设置将在代码中使用的一组变量和常量开始：

var container, controls, camera, renderer, scene, light, marsMesh,
clock = new THREE.Clock();
const imgLoc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";

The clock will be used to help animate the default motion of our Mars sphere; imgLoc is the location of all of the images, and is defined here so I don’t have to repeat myself later.

clock将用于为火星球的默认运动设置动画； imgLoc是所有图像的位置，并在此处定义，因此我以后不必重复自己。

视场 (FOV)

The first element we’ll create is a camera, which is required to “see” the scene we’re about to create. There are several different kinds of camera in threeJS:

我们将创建的第一个元素是摄像机，这是“看到”我们将要创建的场景所必需的。 threeJS中有几种不同类型的相机：

• perspectiveCamera: Lines in the scene that are parallel will eventually converge, if they are extended far enough (think of standing on a railway, looking off into the distance); objects that appear further away from the camera will appear smaller. This is how vision works, and how the world appears naturally.

  PerspectiveCamera ：如果场景中平行的线延伸得足够远(例如，站在铁路上，向远处看)，它们最终会收敛。 距离照相机较远的物体会显得较小。 这就是视觉的运作方式，以及世界自然出现的方式。

• OrthographicCamera: Parallel lines in the scene remain parallel, no matter how far away they extend; for the same reason, objects do not appear smaller with distance. This is particularly useful for rendering UI elements and some architectural views.

  OrthographicCamera ：场景中的平行线无论延伸多远，都保持平行。 出于相同的原因，物体不会随距离变小。 这对于呈现UI元素和某些架构视图特别有用。

For a perspective camera, we also need to define a “field of view” (frequently shortened to “FOV”). Field-of-view is how “wide” the camera “sees”. A narrow field of view - think of the blinkers placed on carriage horses, so they are not spooked or distracted - “focuses” the camera towards a particular part of the scene, at the expense of visually cutting off elements that may fall outside this area. A wide field of view takes in more, but at the cost of making objects appear smaller and further away.

对于透视相机，我们还需要定义“视野”(通常简称为“ FOV”)。 视野是摄像机“看到”的范围。 狭窄的视野-考虑一下放在马车上的信号灯，以免它们受到惊吓或分散注意力-将相机“聚焦”到场景的特定部分，以牺牲视觉上切断可能落在该区域之外的元素为代价。 广阔的视野可以容纳更多物体，但要以使物体显得更小，更远的代价为代价。

We also need to set the camera’s aspect ratio: how wide the rendered view is, compared to its height. You’re probably most familiar with aspect ratio from the movies: a film featuring a wide aspect ratio tends to feel more “cinematic” and epic, while a low aspect ratio - down to a square - can feel more intimate, but also older.

我们还需要设置相机的宽高比 ：渲染后的视图与其高度相比的宽度。 您可能最熟悉电影的长宽比：长宽比大的电影往往会感觉更“电影化”和史诗般的感觉，而低长宽比(低至正方形)可能会感觉更亲密，但也更老。

In almost all cases, we want the aspect ratio to mirror the viewer’s window: that is, the browser width divided by its height.

在几乎所有情况下，我们都希望宽高比能够反映查看器的窗口：也就是说，浏览器的宽度除以其高度。

The final two values for the camera are the near and far clipping plane values. By default, 3D cameras “see” an infinite distance: unlike the real world, the view of a 3D camera is not obscured by particles in the atmosphere or the limits of a lens. In games, this is often referred to as “draw distance”, and one reason why distance in early 3D games was often obscured by fog or tight corridors: fewer elements to draw means the game could run faster.

相机的最后两个值是近裁剪平面值和远裁剪平面值。 默认情况下，3D摄像机“看到”无限距离：与现实世界不同，3D摄像机的视图不会被大气中的粒子或镜头的边界遮挡。 在游戏中，这通常称为“绘制距离”，这也是早期3D游戏中的距离经常被雾气或狭窄走廊遮盖的原因之一：绘制元素减少意味着游戏可以运行得更快。

In our case, we want the camera’s near clipping plane to be very close to it’s imaginary “lens”, and the far clipping plane to be a reasonable distance away, such that the distance between the two will contain our scene elements. The code we’ll use is:

在我们的例子中，我们希望摄像机的近裁剪平面非常接近其虚构的“镜头”，而远裁剪平面则需要合理的距离，以使两者之间的距离包含我们的场景元素。 我们将使用的代码是：

camera = new THREE.PerspectiveCamera(45, 
window.innerWidth / window.innerHeight, 0.1, 10000);

Right now, our camera is floating in infinite black space, and is not pointing at anything in particular. In the next article, I’ll explain the nature of that 3D space, how to light it, and how to add objects to our scene.

现在，我们的相机漂浮在无限的黑色空间中，没有特别指向任何东西。 在下一篇文章中，我将解释3D空间的性质，如何对其进行照明以及如何向场景添加对象。

翻译自: https://thenewcode.com/1176/A-WebGL-Tour-of-the-Solar-System-Mars-Part-One

webgl 坐标系