[译]pt.1 场景 the Scene

原文链接

在开始为CodePen工作前，我曾经为一个在网上发布了不少令人深刻的WebGL项目的数码店工作过好几年。因此，人们误以为我非常的擅长WebGL，但事实是我对3D的工作很不感冒。当然，我在这些项目里帮忙搭建了一些小部分，但一直都存在一些把所有的场景都放在一起的人。

我在大学学习的所有科目里，只有两门无论我多么努力都还是学的一团糟。微电子工程概论和三维建模导论。我曾经只是非常不擅长3D模型。我认为这也是我为什么会在我网站开发事业里被3D吓到的原因。

这种恐惧如今也结束了！我正在克服对3D的反感，并且尝试去建立对这种中间件（three.js）的适合的理解。 我想，我也可以一边写blog一边进行，这样你们就可以和我一起理解它了。

所以我们将会仔细的分析创建一个3D场景所需的每个组件开始，以及需要Three.js代码来创建这些组件。

场景 The Scene

场景（a scene）是一个你可以放置对象、相机和光的3D空间。这个空间可以按你的需求来放大或者缩小。

CODE FOR A THREE.JS SCENE

var scene = new THREE.Scene();

相机The camera

透视相机模拟现实生活中电影摄影机的行为。摄像机的位置和它所面对的方向将决定屏幕上的场景的部分。当你设置一个相机时，你需要传递一个垂直视场（fov），一个长宽比（aspect ratio），一个近平面（near plane）和一个远平面（far plane）。这4个值决定了你的相机可以捕捉的三维空间（视锥）。

视场（fov）：垂直的视场。这就决定了相机的视图所能达到的垂直空间的大小。

长宽比（aspect ratio）：这是用于创建基于垂直的水平视图字段的长宽比。

近平面（near plane）：这是最近的视角（摄像机的视角开始）。

远平面（far plane）：这是远视角（摄像机的视图结束）。

你的对象在观察界面的位置将会影响它们如何在你的屏幕上渲染出来。说到渲染，你将需要添加一个Three.js的渲染器，一个包含你相机的“照片” 的视图。

CODE FOR A THREE.JS CAMERA AND RENDERER

//add a cameravar
// THREE.PerspectiveCamera(fov, aspect, near, far)
camera = new THREE.PerspectiveCamera( 
  75, 
  window.innerWidth / window.innerHeight,
  0.1, 
  1000
);
camera.position.z = 100;
//add a renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

光照Lighting

你可以把你的场景想象成一个只有摄像头，但绝对没有光的房间。所以，如果你在这样的房间里放置一个对象，你仍然不可能看到它。你会需要用灯照亮物体，使它出现在相机的视野中。不同种类的光会有不用的作用。要得到对每种光的综合性描述，你可以好好看看这篇文章，不过应该把文中最简单的描述拆分出来：

方向灯（Directional Lights）：来自远处的大光，从一个方向照射（想象太阳）。

环境光源（Ambient Lights）：对整个场景来说，更少的光源，更柔和的色彩。

点光源（Point Lights）：想象一个灯泡，它对每个方向都发射出光，同时也是有限的范围内。

聚光灯（Spot Lights）：想象聚光灯在真实生活中的作用一样。

半球灯（Hemisphere Lights）：来自场景的天花板和地板的环境（非定向）光。

CODE TO ADD THREE.JS LIGHTING

/* we're creating a cube to put in our scene - don't worry
if you don't follow this part, we'll cover geometry and materials
in future posts */
var geometry = new THREE.BoxGeometry(20, 20, 20);
var material = new THREE.MeshLambertMaterial({color: 0xfd59d7});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

/* we need to add a light so we can see our cube - its almost
as if we're turning on a lightbulb within the room */
var light = new THREE.PointLight(0xFFFF00);
/* position the light so it shines on the cube (x, y, z) */
light.position.set(10, 0, 25);
scene.add(light);