SphereGeometry 球面

—> Geometry

类似于 CircleGeometry 圆形是由正多边形的边数不断增多, 使得它看起来趋向于圆; 那么 SphereGeometry 也是由多面体不断细分而得到. widthSegments, heightSegments 的默认值较小, 需要把它们设高才像个球面. phiStart 和 phiLength 是负责x轴水平角度, 而 thetaStart 和 thetaLength 则是负责y轴垂直角度.

function SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ) { } var geometry = new THREE.SphereGeometry(4, 40, 40, 0, Math.PI*2, 0, Math.PI*2), material = new THREE.MeshBasicMaterial({color: 0x663399, side: THREE.DoubleSide}), sphere = new THREE.Mesh( geometry, material ); scene.add( sphere );

Parameters

radius widthSegments heightSegments phiStart phiLength thetaStart thetaLength
1 8 6 0 Math.PI * 2 0 Math.PI
半径 宽度分段数 高度分段数 水平开始角度 水平闭合角度 垂直开始角度 垂直闭合角度

Methods 继承自 Geometry 并自动调用

fromBufferGeometry( new SphereBufferGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ) )
mergeVertices( )

SphereBufferGeometry

function SphereBufferGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ) var geometry = new THREE.SphereBufferGeometry(4, 40, 40, 0, Math.PI*2, 0, Math.PI*2), material = new THREE.MeshBasicMaterial({color: 0x663399, side: THREE.DoubleSide}), sphere = new THREE.Mesh( geometry, material ); scene.add( sphere );

Methods 继承自 BufferGeometry 并自动调用

setIndex( )
addAttribute( )

图解API

1. 缩放动画: 修改 vertices

甚至可以划分为两个半圆去修改. 点开查看

const geometry = new THREE.SphereBufferGeometry(10, 40, 40); const material = new THREE.PointsMaterial({ color: 0x009900 }); const particles = new THREE.Points(geometry, material); scene.add(particles); function animate(){ const vertices = particles.geometry.attributes.position.array; step += 0.001; for(let i = 0; i < vertices.length; i+=3 ){ vertices[i] *= step; vertices[i+1] *= step; vertices[i+2] *= step; } particles.geometry.attributes.position.needsUpdate = true; } 2. 贴图

纹理Texture来渲染球面模型. 点开查看