以下文章即Learn Threejs 第三版英文翻譯學(xué)習(xí)記錄，可以到正版書店購(gòu)買對(duì)應(yīng)書籍蒜危。
這章內(nèi)容內(nèi)容中，你將學(xué)到睹耐，創(chuàng)建場(chǎng)景辐赞、添加對(duì)象、添加相機(jī)疏橄。常見的對(duì)象有Plane（面）占拍、Cube（立方體）略就、Sphere（球體）、Camera（相機(jī)）晃酒、Axes（坐標(biāo)軸表牢，其中X坐標(biāo)軸為紅色，Y坐標(biāo)軸為綠色贝次，Z坐標(biāo)軸為藍(lán)色）崔兴；
下面我將帶你運(yùn)行代碼，查看效果：
? ? //創(chuàng)建場(chǎng)景和攝像機(jī)
? ? // const scene = new THREE.Scene();
? ? // //創(chuàng)建攝像機(jī) *視角范圍 180 （45） *窗口的長(zhǎng)寬比 *攝像機(jī)位置 默認(rèn)0.1? *攝像頭從那里結(jié)束渲染 默認(rèn) 1000
? ? // const camera = new THREE.PerspectiveCamera("75",window.innerWidth/window.innerHeight,"0.1","1000");
? ? // //創(chuàng)建渲染器
? ? // const renderer = new THREE.WebGLRenderer();
? ? // //設(shè)置渲染器場(chǎng)景的大小
? ? // renderer.setSize(window.innerWidth,window.innerHeight);
? ?// renderer.setClearColor(new THREE.Color(0x000000));
以上代碼蛔翅，我們將創(chuàng)建了Scene（場(chǎng)景）敲茄，Camera（相機(jī)），Renderer（渲染器）山析，場(chǎng)景對(duì)象是一個(gè)容器堰燎，用于存放和渲染的所有對(duì)象、以及各種燈光效果笋轨。沒有這個(gè)場(chǎng)景對(duì)象秆剪，Threejs將無法渲染任何對(duì)象。更多相關(guān)場(chǎng)景內(nèi)容在第二節(jié)呈現(xiàn)爵政。這些對(duì)象代碼將創(chuàng)建一個(gè)Threejs程序示例仅讽。如何渲染一個(gè)球體、立方體對(duì)象钾挟，然后將這些對(duì)象加入到場(chǎng)景中洁灵，接下來介紹。
第一部分掺出，我們將創(chuàng)建一個(gè)Camera對(duì)象徽千， 這個(gè)Camera對(duì)象旨在向我們說明，將什么對(duì)象渲染到場(chǎng)景里蛛砰。在第二小節(jié)的例子中罐栈，你可以學(xué)到關(guān)于相機(jī)的一些參數(shù)。
接下來泥畅，我們定義了Render荠诬，這個(gè)Render對(duì)象負(fù)責(zé)將Camera看到的內(nèi)容計(jì)算并渲染出來。
我們通過WebGLRenderer創(chuàng)建出一個(gè)Render位仁，它將會(huì)渲染出樣例中的結(jié)果柑贞。
如果你查看了官網(wǎng)提供的例子，你就會(huì)注意到有很多不同于WebGLRender的renderers提供給我們使用聂抢，有基于畫布的渲染器钧嘶、基于CSS的渲染器（CSS2DRenderer/CSS3DRenderer）、基于SVG的渲染器（SVGRenderer）琳疏，可是即使他們能夠渲染一些簡(jiǎn)單的場(chǎng)景有决，我也不建議你們使用闸拿，開發(fā)人員已經(jīng)不在維護(hù)。（無法應(yīng)用于密集型CPU程序书幕、未能更好的支持材質(zhì)陰影等）
我們給渲染器設(shè)置一個(gè)背景色/渲染器的尺寸,使用window.winnerwidth,這些尺寸的意思是我要加載一個(gè)像瀏覽器尺寸大小的渲染器新荤。
這樣我們就創(chuàng)建出一個(gè)簡(jiǎn)單的Screen、Render台汇、Camera苛骨。可是什么東西都沒有苟呐，接下來將為您介紹如何添加一個(gè)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)建了一個(gè)坐標(biāo)系類（傳入的20表示各坐標(biāo)軸的長(zhǎng)度）牵素，使用screen.add方法严衬，我們將axis添加到Scene中去，下一步两波，創(chuàng)建一個(gè)平面瞳步，首先我們定義了這個(gè)plane的尺寸闷哆，這里60是width腰奋。同樣，我們需要告訴這個(gè)plane的外觀抱怔，比如顏色和透明度劣坊，在Threejs中 ,我們定義了一個(gè)Material的對(duì)象，它用來給Plane等設(shè)置顏色或者貼圖屈留。示例中我們創(chuàng)建了一個(gè)簡(jiǎn)單的顏色貼圖局冰，我們使用Plane和Material創(chuàng)建出一個(gè)Mesh對(duì)象，（此處Mesh作者個(gè)人理解Match,component,然后mask類似的一個(gè)概念）灌危，在我們將這個(gè)Plane添加到Scene之前康二，我們還需要給這個(gè)Plane設(shè)置正確的位置，順便將X軸做了90度旋轉(zhuǎn)勇蝙。如果您對(duì)這里的相關(guān)屬性感興趣沫勿，可以查看第二小節(jié)的示例。這個(gè)示例將為您提供各種旋轉(zhuǎn)味混，位置等屬性的介紹〔ⅲ現(xiàn)在我們有了Plane，就可以將Plane添加到Scene中翁锡，就像我們添加Axes一樣的道理蔓挖。
立方體和球體對(duì)象的添加和這個(gè)是相同的道理，但是如果wireframe屬性設(shè)置為true馆衔，我們看到的是一個(gè)線性圖像瘟判，并不是一個(gè)實(shí)體對(duì)象怨绣，讓我們繼續(xù)進(jìn)行下一步，
camera.position.set(-30, 40, 30);?
camera.lookAt(scene.position);
document.getElementById("webgl-output").appendChild(renderer.domElement);?
renderer.render(scene, camera);
以上拷获，我們將所有的對(duì)象都加入到了Scene中梨熙，并且給Plane設(shè)置的位置，randerer也可以將camera的內(nèi)容渲染出來刀诬。在這一小部分代碼中咽扇，我們調(diào)用了camera.position.set方法，使得Camera陕壹，X方向移動(dòng)-30质欲，Y方向移40，Z方向移動(dòng)了30（看到了從上到下的俯視效果） 糠馆，確保我們的camera可以看到我們創(chuàng)建的對(duì)象嘶伟，我們使用camera.lookat方法將相機(jī)的焦點(diǎn)注意到場(chǎng)景的正中央，默認(rèn)是（0又碌，0九昧，0）點(diǎn)位。所有的這些通過div標(biāo)簽元素輸出到頁面上毕匀。
在下一節(jié)的課程中铸鹰，我們將介紹場(chǎng)景燈光、陰影和更多的材料皂岔，還有事件動(dòng)畫蹋笼。
