PlaneGeometry是二维平面几何体，看上去是扁平的，因为它只有两个维度，给定宽高，即可创建这种几何体。
示例：PlaneGeometry.html
构造函数
PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)参数
width ：沿着X轴的宽度，默认值为1
height：沿着Y轴的高度，默认为1
widthSegments ：宽度分段数，默认为1
heightSegments：高度分段数，默认为1
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PlaneGeometry 平面几何</title>
<style>
body {
margin: 0;
overflow: hidden; /*溢出隐藏*/
}
</style>
<script src="../../libs/build/three-r93.min.js"></script>
<script src="../../libs/examples/js/controls/OrbitControls.js"></script>
<script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
<script src="../../libs/examples/js/libs/stats.min.js"></script>
<script src="../../libs/examples/js/Detector.js"></script>
<script src="../../libs/examples/js/utils/SceneUtils.js"></script>
</head>
<body>
<script>
let stats = initStats();
let scene, camera, renderer, plane, controls, guiControls;
/* 场景 */
function initScene() {
scene = new THREE.Scene();
}
/* 相机 */
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 10, 200);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
/* 渲染器 */
function initRenderer() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
/* 灯光 */
function initLight() {
}
/* 控制器 */
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 添加惯性
controls.enableDamping = true;
}
/* 调试插件 */
let gui;
function initGui() {
guiControls = new function () {
this.width = plane.children[0].geometry.parameters.width;
this.height = plane.children[0].geometry.parameters.height;
this.widthSegments = plane.children[0].geometry.parameters.widthSegments;
this.heightSegments = plane.children[0].geometry.parameters.heightSegments;
this.redraw = function () {
scene.remove(plane);
plane = createMesh(new THREE.PlaneGeometry(guiControls.width, guiControls.height, guiControls.widthSegments, guiControls.heightSegments));
scene.add(plane);
};
};
gui = new dat.GUI({width:300});
gui.add(guiControls, 'width',0, 200).onChange(guiControls.redraw);
gui.add(guiControls, 'height',0, 200).onChange(guiControls.redraw);
gui.add(guiControls, 'widthSegments',0, 20).onChange(guiControls.redraw);
gui.add(guiControls, 'heightSegments',0, 20).onChange(guiControls.redraw);
}
/* 场景中的内容 */
function initContent() {
plane = createMesh(new THREE.PlaneGeometry(50, 100, 10, 10));
scene.add(plane);
}
/* 创建网格 */
function createMesh(geometry) {
let meshMaterial = new THREE.MeshNormalMaterial();
meshMaterial.side = THREE.DoubleSide;
let wireFrameMaterial = new THREE.MeshBasicMaterial();
wireFrameMaterial.wireframe = true;
let plane = new THREE.SceneUtils.createMultiMaterialObject(geometry, [meshMaterial, wireFrameMaterial]);
return plane;
}
/* 性能插件 */
function initStats() {
let stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
return stats;
}
/* 更新 */
function update() {
stats.update();
controls.update();
}
/* 初始化 */
function init() {
// 兼容性判断，若不兼容会提示信息
if (!Detector.webgl) Detector.addGetWebGLMessage();
initScene();
initCamera();
initRenderer();
initLight();
initControls();
initContent();
initGui();
window.addEventListener('resize', onWindowResize, false);
}
/* 窗口变动触发的方法 */
function onWindowResize() {
// 重新设置相机的宽高比
camera.aspect = window.innerWidth / window.innerHeight;
// 更新相机投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
}
/* 循环渲染 */
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
update();
}
/* 页面绘制完后加载 */
window.onload = function () {
init();
animate();
};
</script>
</body>
</html>