以下文章即Learn Threejs 第三版英文翻譯學習記錄，可以到正版書店購買對應書籍。

這章內(nèi)容內(nèi)容中，你將學到，創(chuàng)建場景、添加對象、添加相機。常見的對象有Plane（面）、Cube（立方體）、Sphere（球體）、Camera（相機）、Axes（坐標軸，其中X坐標軸為紅色，Y坐標軸為綠色，Z坐標軸為藍色）；

下面我將帶你運行代碼，查看效果：

? ? //創(chuàng)建場景和攝像機

? ? // const scene = new THREE.Scene();

? ? // //創(chuàng)建攝像機 *視角范圍 180 （45） *窗口的長寬比 *攝像機位置 默認0.1? *攝像頭從那里結(jié)束渲染 默認 1000

? ? // const camera = new THREE.PerspectiveCamera("75",window.innerWidth/window.innerHeight,"0.1","1000");

? ? // //創(chuàng)建渲染器

? ? // const renderer = new THREE.WebGLRenderer();

? ? // //設置渲染器場景的大小

? ? // renderer.setSize(window.innerWidth,window.innerHeight);

? ?// renderer.setClearColor(new THREE.Color(0x000000));

以上代碼，我們將創(chuàng)建了Scene（場景），Camera（相機），Renderer（渲染器），場景對象是一個容器，用于存放和渲染的所有對象、以及各種燈光效果。沒有這個場景對象，Threejs將無法渲染任何對象。更多相關場景內(nèi)容在第二節(jié)呈現(xiàn)。這些對象代碼將創(chuàng)建一個Threejs程序示例。如何渲染一個球體、立方體對象，然后將這些對象加入到場景中，接下來介紹。

第一部分，我們將創(chuàng)建一個Camera對象， 這個Camera對象旨在向我們說明，將什么對象渲染到場景里。在第二小節(jié)的例子中，你可以學到關于相機的一些參數(shù)。

接下來，我們定義了Render，這個Render對象負責將Camera看到的內(nèi)容計算并渲染出來。

我們通過WebGLRenderer創(chuàng)建出一個Render，它將會渲染出樣例中的結(jié)果。

如果你查看了官網(wǎng)提供的例子，你就會注意到有很多不同于WebGLRender的renderers提供給我們使用，有基于畫布的渲染器、基于CSS的渲染器（CSS2DRenderer/CSS3DRenderer）、基于SVG的渲染器（SVGRenderer），可是即使他們能夠渲染一些簡單的場景，我也不建議你們使用，開發(fā)人員已經(jīng)不在維護。（無法應用于密集型CPU程序、未能更好的支持材質(zhì)陰影等）

我們給渲染器設置一個背景色/渲染器的尺寸,使用window.winnerwidth,這些尺寸的意思是我要加載一個像瀏覽器尺寸大小的渲染器。

這樣我們就創(chuàng)建出一個簡單的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);

正如你所見，我們創(chuàng)建了一個坐標系類（傳入的20表示各坐標軸的長度），使用screen.add方法，我們將axis添加到Scene中去，下一步，創(chuàng)建一個平面，首先我們定義了這個plane的尺寸，這里60是width。同樣，我們需要告訴這個plane的外觀，比如顏色和透明度，在Threejs中 ,我們定義了一個Material的對象，它用來給Plane等設置顏色或者貼圖。示例中我們創(chuàng)建了一個簡單的顏色貼圖，我們使用Plane和Material創(chuàng)建出一個Mesh對象，（此處Mesh作者個人理解Match,component,然后mask類似的一個概念），在我們將這個Plane添加到Scene之前，我們還需要給這個Plane設置正確的位置，順便將X軸做了90度旋轉(zhuǎn)。如果您對這里的相關屬性感興趣，可以查看第二小節(jié)的示例。這個示例將為您提供各種旋轉(zhuǎn)，位置等屬性的介紹?，F(xiàn)在我們有了Plane，就可以將Plane添加到Scene中，就像我們添加Axes一樣的道理。

立方體和球體對象的添加和這個是相同的道理，但是如果wireframe屬性設置為true，我們看到的是一個線性圖像，并不是一個實體對象，讓我們繼續(xù)進行下一步，

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的內(nèi)容渲染出來。在這一小部分代碼中，我們調(diào)用了camera.position.set方法，使得Camera，X方向移動-30，Y方向移40，Z方向移動了30（看到了從上到下的俯視效果） ，確保我們的camera可以看到我們創(chuàng)建的對象，我們使用camera.lookat方法將相機的焦點注意到場景的正中央，默認是（0，0，0）點位。所有的這些通過div標簽元素輸出到頁面上。

在下一節(jié)的課程中，我們將介紹場景燈光、陰影和更多的材料，還有事件動畫。