以下文章即Learn Threejs 第三版英文翻译学习记录，可以到正版书店购买对应书籍。
这章内容内容中，你将学到，创建场景、添加对象、添加相机。常见的对象有Plane（面）、Cube（立方体）、Sphere（球体）、Camera（相机）、Axes（坐标轴，其中X坐标轴为红色，Y坐标轴为绿色，Z坐标轴为蓝色）；
下面我将带你运行代码，查看效果：
//创建场景和摄像机
// const scene = new THREE.Scene();
// //创建摄像机 *视角范围 180 （45） *窗口的长宽比 *摄像机位置 默认0.1 *摄像头从那里结束渲染 默认 1000
// const camera = new THREE.PerspectiveCamera("75",window.innerWidth/window.innerHeight,"0.1","1000");
// //创建渲染器
// const renderer = new THREE.WebGLRenderer();
// //设置渲染器场景的大小
// renderer.setSize(window.innerWidth,window.innerHeight);
// renderer.setClearColor(new THREE.Color(0x000000));
以上代码，我们将创建了Scene（场景），Camera（相机），Renderer（渲染器），场景对象是一个容器，用于存放和渲染的所有对象、以及各种灯光效果。没有这个场景对象，Threejs将无法渲染任何对象。更多相关场景内容在第二节呈现。这些对象代码将创建一个Threejs程序示例。如何渲染一个球体、立方体对象，然后将这些对象加入到场景中，接下来介绍。
第一部分，我们将创建一个Camera对象， 这个Camera对象旨在向我们说明，将什么对象渲染到场景里。在第二小节的例子中，你可以学到关于相机的一些参数。
接下来，我们定义了Render，这个Render对象负责将Camera看到的内容计算并渲染出来。
我们通过WebGLRenderer创建出一个Render，它将会渲染出样例中的结果。
如果你查看了官网提供的例子，你就会注意到有很多不同于WebGLRender的renderers提供给我们使用，有基于画布的渲染器、基于CSS的渲染器（CSS2DRenderer/CSS3DRenderer）、基于SVG的渲染器（SVGRenderer），可是即使他们能够渲染一些简单的场景，我也不建议你们使用，开发人员已经不在维护。（无法应用于密集型CPU程序、未能更好的支持材质阴影等）
我们给渲染器设置一个背景色/渲染器的尺寸,使用window.winnerwidth,这些尺寸的意思是我要加载一个像浏览器尺寸大小的渲染器。
这样我们就创建出一个简单的Screen、Render、Camera。可是什么东西都没有，接下来将为您介绍如何添加一个Axes、Plane：
var axes = new THREE.AxesHelper(20); scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xAAAAAA });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);
scene.add(plane);
正如你所见，我们创建了一个坐标系类（传入的20表示各坐标轴的长度），使用screen.add方法，我们将axis添加到Scene中去，下一步，创建一个平面，首先我们定义了这个plane的尺寸，这里60是width。同样，我们需要告诉这个plane的外观，比如颜色和透明度，在Threejs中 ,我们定义了一个Material的对象，它用来给Plane等设置颜色或者贴图。示例中我们创建了一个简单的颜色贴图，我们使用Plane和Material创建出一个Mesh对象，（此处Mesh作者个人理解Match,component,然后mask类似的一个概念），在我们将这个Plane添加到Scene之前，我们还需要给这个Plane设置正确的位置，顺便将X轴做了90度旋转。如果您对这里的相关属性感兴趣，可以查看第二小节的示例。这个示例将为您提供各种旋转，位置等属性的介绍。现在我们有了Plane，就可以将Plane添加到Scene中，就像我们添加Axes一样的道理。
立方体和球体对象的添加和这个是相同的道理，但是如果wireframe属性设置为true，我们看到的是一个线性图像，并不是一个实体对象，让我们继续进行下一步，
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);
document.getElementById("webgl-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
以上，我们将所有的对象都加入到了Scene中，并且给Plane设置的位置，randerer也可以将camera的内容渲染出来。在这一小部分代码中，我们调用了camera.position.set方法，使得Camera，X方向移动-30，Y方向移40，Z方向移动了30（看到了从上到下的俯视效果） ，确保我们的camera可以看到我们创建的对象，我们使用camera.lookat方法将相机的焦点注意到场景的正中央，默认是（0，0，0）点位。所有的这些通过div标签元素输出到页面上。
在下一节的课程中，我们将介绍场景灯光、阴影和更多的材料，还有事件动画。
网友评论