PlaneGeometry 平面

—> Geometry

这是 Three.js 里的最简单的二维图形, 你只需传入 width、height 参数即可. 当两者相等时, 绘制出一个正方形, 而当不等时, 便是矩形. widthSegments, heightSegments 是宽和高的分段数, 当材质使用 MeshBasicMaterial 并且把 wireframe 设成true时, 便可看见.

function PlaneGeometry( width, height, widthSegments, heightSegments ) { } var geometry = new THREE.PlaneGeometry(6, 4), material = new THREE.MeshBasicMaterial({ color: #663399 }), plane = new THREE.Mesh( geometry, material ); scene.add( plane );

Parameters

width height widthSegments heightSegments
1 1 1 1
宽度 高度 宽度分段数 高度分段数

Methods 继承自 Geometry 并自动调用

fromBufferGeometry( new PlaneBufferGeometry( width, height, widthSegments, heightSegments ) )
mergeVertices( )

PlaneBufferGeometry

function PlaneBufferGeometry( width, height, widthSegments, heightSegments ) { } var geometry = new THREE.PlaneBufferGeometry(6, 4), material = new THREE.MeshBasicMaterial({ color: #663399 }), plane = new THREE.Mesh( geometry, material ); scene.add( plane );

Methods 继承自 BufferGeometry 并自动调用

setIndex( )
addAttribute( )

图解API

1. 平面可以不平: 修改 vertices

vertices 随你修改, 平面不一定是平的. PlaneBufferGeometry 和 PlaneGeometry 分别是以下两种写法. 点开查看

const bufferGeometry = new THREE.PlaneBufferGeometry(20, 20, widthSegments, heightSegments); bufferGeometry.rotateX(-Math.PI/2); const vertices = bufferGeometry.attributes.position.array; for(let i = 1; i < vertices.length; i+=3){ vertices[i] = Math.random() * h; } const geometry = new THREE.PlaneGeometry(20, 20, widthSegments, heightSegments); geometry.rotateX(-Math.PI/2); const vertices =geometry.vertices; for(let i = 0; i < vertices.length; i++){ vertices[i].y = Math.random() * h; } 2. 贴图

纹理Texture来渲染平面模型. 如果想减少失真, 请设置图片的长宽为2的n次方, PlaneGeometry的width和height也按照此比例来设置. 点开查看