miaoYu

3D WebGL入门之场景

原文链接: codepen.io

这是3D WebGL入门的系列文章的第一部分。如果你没有看过其他部分,请务必要看一看。


场景

场景是一个3D空间用来放置物体,相机和灯光。这个空间可大可小,完全取决于你的需求。

Three.js创建场景

  `var scene = new THREE.Scene();`

相机

相机模拟真实世界中拍电影的摄像机。相机的位置和方向,确定你通过屏幕看到被渲染出的场景的哪个部分。当你设置一个相机的时候,你需要设置一个垂直的视野(fov),长宽比,一个近平面,一个远平面。这四个值确定一个3D空间(视锥),这个3D空间会被你的相机捕捉到。

fov: 垂直的视野。确定你的相机可以看到的垂直空间大小。

aspect: 长宽比,基于垂直范围你用来创建水平的视野。

near: 视野最近的平面(也就是相机视野开始的位置)

far: 视野最近的平面(也就是相机视野结束的位置)

物体出现在你屏幕上哪个位置?取决于渲染器,你将需要添加一个Three.js的渲染器。

Three.js 创建 camera 和renderer

// 添加相机
// THREE.PerspectiveCamera(fov, aspect, near, far)
var camera = new THREE.PerspectiveCamera(
  75, 
  window.innerWidth/window.innerHeight, 
  0.1, 
  1000
);

// 放置相机到z方向100的位置
camera.position.z = 100;

// 创建一个渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// 把渲染器放到DOM中,这样页面上就可以看到了
document.body.appendChild( renderer.domElement );

光源

你可以设想你创建的场景就像一个放了摄像机的房间并且没有任何光亮,漆黑一片。如果你把一个物体放到你的房间,你任何东西都看不到!所以你需要一个光源照到物体上,这样就可以呈现到摄像机的视野中了。这有几种不同的光源,它们会产生不同的影响。想要获得各种光源全面的介绍,你可以看这篇文章 ,我节选了文章的部分来大概描述下:

方向光源: 一个巨大的光源从远方的一个方向照过来(想象一下太阳)。

氛围光源: 很弱的光源以及柔和的颜色。

点光源: 光线来自每个方向,并且有一个有限的范围(想象一下白炽灯)。

聚光灯: 就像生活中的聚光灯。

极光: 来自天花板和地板的环境光(没有方向)。

Three.js 创建光源

/* 我们在场景中创建一个立方体 (不用担心,如果你对这个部分不熟悉,我会在后面的文章中详细写几何体和材料 )*/
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);

/* 我们需要添加一个光源,这样我们就可以看到立方体了 (就像我们在一间屋子打开了一盏白炽灯) */
var light = new THREE.PointLight(0xFFFF00);
/* 放置光源照向地方体 */
light.position.set(10, 0, 25);
scene.add(light);

有了以上这几个部分,你可以构建一个基础的Three.js场景了!我已经把代码放到了codePen上,所以你可以通过改变相机、光源、视野的位置来看看他们之间是怎样相互影响的:

<iframe height='300' scrolling='no' title='A basic Three.js scene' src='//codepen.io/rachsmith/embed/qbKvdd/?height=300&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen A basic Three.js scene by Rachel Smith (@rachsmith) on CodePen. </iframe>

在未来的文章中我将聚焦于几何体,材料,用户输入,3D矢量数学,阴影等!