常用几何体概念
所有几何体的基类分为Geometry和BufferGeometry两大类，两类几何体直接可以相互转化。
注：以下所有示例材质（材质的具体概念下次再讲）选用均建议用如下：
//第一个参数是几何体颜色 第二个为网格 线框展示 图形容易观察
const material = new THREE.MeshBasicMaterial({ color: 0x8B4C39,wireframe: true });
- 立方几何体（BoxGeometry）
构造器
BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
width — X轴上面的宽度
height — Y轴上面的高度
depth — Z轴上面的深度
widthSegments — （可选）宽度的分段数，默认值是1。
heightSegments — （可选）宽度的分段数，默认值是1。
depthSegments — （可选）宽度的分段数，默认值是1。
new THREE.BoxGeometry( 1, 1, 1 );
- 圆柱几何体（CylinderGeometry）
//构造器
CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radiusTop — 圆柱的顶部半径，默认值是1。
radiusBottom — 圆柱的底部半径，默认值是1。
height — 圆柱的高度，默认值是1。
radialSegments — 圆柱侧面周围的分段数，默认为8。
heightSegments — 圆柱侧面沿着其高度的分段数，默认值为1。
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）
thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。
new THREE.CylinderGeometry( 5, 5, 20, 32 );
- 球几何体（SphereGeometry）
//构造器
SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
radius — 球体半径，默认为1。
widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为8。
heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为6。
phiStart — 指定水平（经线）起始角度，默认值为0。。
phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
thetaStart — 指定垂直（纬线）起始角度，默认值为0。
thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。
该几何体是通过扫描并计算围绕着Y轴（水平扫描）和X轴（垂直扫描）的顶点来创建的。 因此，不完整的球体（类似球形切片）可以通过为phiStart，phiLength，thetaStart和thetaLength设置不同的值来创建， 以定义我们开始（或结束）计算这些顶点的起点（或终点）。
new THREE.SphereGeometry( 5, 32, 32 )
- 圆锥几何体（ConeGeometry）
ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radius — 圆锥底部的半径，默认值为1。
height — 圆锥的高度，默认值为1。
radialSegments — 圆锥侧面周围的分段数，默认为8。
heightSegments — 圆锥侧面沿着其高度的分段数，默认值为1。
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）
thetaLength — 圆锥底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆锥。
new THREE.ConeGeometry( 5, 20, 32 )
####演示代码
注：演示代码中只需替换initObject()中的东西即可，更改几何体形状，替换对应的构造器就可以
<!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>
<!-- 常用相机控制器，依赖文件目录 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(){
//初始化坐标系
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);
//场景添加坐标系
scene.add( axesHelper);
//初始化相机
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 }); //材质
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>
评论区