常用幾何體概念
所有幾何體的基類分為Geometry和BufferGeometry兩大類，兩類幾何體直接可以相互轉(zhuǎn)化。
注：以下所有示例材質(zhì)（材質(zhì)的具體概念下次再講）選用均建議用如下：
//第一個(gè)參數(shù)是幾何體顏色 第二個(gè)為網(wǎng)格 線框展示 圖形容易觀察
const material = new THREE.MeshBasicMaterial({ color: 0x8B4C39,wireframe: true });
立方幾何體（BoxGeometry）
構(gòu)造器
BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
width — X軸上面的寬度
height — Y軸上面的高度
depth — Z軸上面的深度
widthSegments — （可選）寬度的分段數(shù)，默認(rèn)值是1。
heightSegments — （可選）寬度的分段數(shù)，默認(rèn)值是1宅静。
depthSegments — （可選）寬度的分段數(shù)，默認(rèn)值是1站欺。
new THREE.BoxGeometry( 1, 1, 1 );
立方體
圓柱幾何體（CylinderGeometry）
//構(gòu)造器
CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radiusTop — 圓柱的頂部半徑姨夹，默認(rèn)值是1究驴。
radiusBottom — 圓柱的底部半徑，默認(rèn)值是1匀伏。
height — 圓柱的高度洒忧，默認(rèn)值是1。
radialSegments — 圓柱側(cè)面周圍的分段數(shù)够颠，默認(rèn)為8熙侍。
heightSegments — 圓柱側(cè)面沿著其高度的分段數(shù)，默認(rèn)值為1履磨。
openEnded — 一個(gè)Boolean值蛉抓，指明該圓錐的底面是開放的還是封頂?shù)摹ＤJ(rèn)值為false剃诅，即其底面默認(rèn)是封頂?shù)摹?thetaStart — 第一個(gè)分段的起始角度巷送，默認(rèn)為0。（three o'clock position）
thetaLength — 圓柱底面圓扇區(qū)的中心角矛辕，通常被稱為“θ”（西塔）笑跛。默認(rèn)值是2*Pi，這使其成為一個(gè)完整的圓柱聊品。
new THREE.CylinderGeometry( 5, 5, 20, 32 );
圓柱體
球幾何體（SphereGeometry）
//構(gòu)造器
SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
radius — 球體半徑飞蹂，默認(rèn)為1。
widthSegments — 水平分段數(shù)（沿著經(jīng)線分段）翻屈，最小值為3陈哑，默認(rèn)值為8。
heightSegments — 垂直分段數(shù)（沿著緯線分段）伸眶，最小值為2惊窖，默認(rèn)值為6。
phiStart — 指定水平（經(jīng)線）起始角度厘贼，默認(rèn)值為0界酒。。
phiLength — 指定水平（經(jīng)線）掃描角度的大小涂臣，默認(rèn)值為 Math.PI * 2盾计。
thetaStart — 指定垂直（緯線）起始角度，默認(rèn)值為0赁遗。
thetaLength — 指定垂直（緯線）掃描角度大小，默認(rèn)值為 Math.PI族铆。
該幾何體是通過掃描并計(jì)算圍繞著Y軸（水平掃描）和X軸（垂直掃描）的頂點(diǎn)來創(chuàng)建的岩四。 因此，不完整的球體（類似球形切片）可以通過為phiStart哥攘，phiLength剖煌，thetaStart和thetaLength設(shè)置不同的值來創(chuàng)建材鹦， 以定義我們開始（或結(jié)束）計(jì)算這些頂點(diǎn)的起點(diǎn)（或終點(diǎn)）。
new THREE.SphereGeometry( 5, 32, 32 )
球幾何體
圓錐幾何體（ConeGeometry）
ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radius — 圓錐底部的半徑耕姊，默認(rèn)值為1桶唐。
height — 圓錐的高度，默認(rèn)值為1茉兰。
radialSegments — 圓錐側(cè)面周圍的分段數(shù)尤泽，默認(rèn)為8。
heightSegments — 圓錐側(cè)面沿著其高度的分段數(shù)规脸，默認(rèn)值為1坯约。
openEnded — 一個(gè)Boolean值，指明該圓錐的底面是開放的還是封頂?shù)哪肌ＤJ(rèn)值為false闹丐，即其底面默認(rèn)是封頂?shù)摹?thetaStart — 第一個(gè)分段的起始角度，默認(rèn)為0被因。（three o'clock position）
thetaLength — 圓錐底面圓扇區(qū)的中心角卿拴，通常被稱為“θ”（西塔）。默認(rèn)值是2*Pi梨与，這使其成為一個(gè)完整的圓錐惋耙。
new THREE.ConeGeometry( 5, 20, 32 )
圓錐體
演示代碼
注：演示代碼中只需替換initObject()中的東西即可，更改幾何體形狀行剂，替換對應(yīng)的構(gòu)造器就可以
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 800px;
background-color: white;
}
</style>
<script src="./js/three.js"></script>
<!-- 常用相機(jī)控制器处面，依賴文件目錄 three.js\examples\js\controls -->
<script src="./js/OrbitControls.js"></script>
</head>
<body>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
<script>
var axesHelper;
var renderer;
var scene;
var camera;
var orbitcontrols;
init();
function init(){
//初始化坐標(biāo)系
axesHelper = new THREE.AxesHelper( 10000 );
axesHelper.position.y = 0;
// 初始化渲染器
let width = document.getElementById('canvas-frame').clientWidth;
let height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
// 初始化場景
scene = new THREE.Scene();
scene.background = new THREE.Color(0XFFFFFF);
//場景添加坐標(biāo)系
scene.add( axesHelper);
//初始化相機(jī)
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.set(0,15,0);
camera.up.set(0,1,0)
camera.lookAt(0, 0, 0)
//初始化引擎控制
orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
orbitcontrols.rotateSpeed = -0.25;
initObject() ;
}
function initObject() {
//BoxGeometry(1, 50, 50) 立方體
//CylinderGeometry( 5, 5, 20, 32 ) 圓柱體
//ConeGeometry( 5, 20, 32 ) 圓錐體
//SphereGeometry( 5, 50, 50 ) 球體
const geometry = new THREE.BoxGeometry( 5, 50, 50 ); //幾何體 直接替換上述幾何體就可以看到不同的畫面
const material = new THREE.MeshBasicMaterial({ color: 0x8B4C39,wireframe: true }); //材質(zhì)
var cube = new THREE.Mesh(geometry,material)
scene.add(cube);
}
function threeStart() {
renderer.clear();
requestAnimationFrame( threeStart );
orbitcontrols.update(); // required when damping is enabled
renderer.render( scene, camera );
}
</script>
</body>
</html>
