Home

Index

How to use the PlaneGeometry function from three

Find comprehensive JavaScript three.PlaneGeometry code examples handpicked from public code repositorys.

three.PlaneGeometry is a class in the Three.js library that creates a flat rectangular surface in three-dimensional space.

index.js

454
455
456
457
458
459
460
461
462
463
464
465


function showGround() {
    scene.add(new THREE.GridHelper(500, 50))


    let obj = new THREE.Mesh(
        new THREE.PlaneGeometry(500, 500),
        new THREE.MeshBasicMaterial({
            color: 0x888888,
            transparent: true,
            opacity: 0.1,

+ 5 other calls in file

denseview.js

GitHub: audunsh/evince

94
95
96
97
98
99
100
101
102
103

//let aCurveFloat32 = new Float32Array(this.pos.buffer); //, 3);

//geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

const plane_1_geometry = new THREE.PlaneGeometry( 1, 1 );
const plane_1_material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
let plane_1_mesh = new THREE.Mesh( plane_1_geometry, plane_1_material );

this.scene.add(plane_1_mesh);

+ 2 other calls in file

How does three.PlaneGeometry work?

three.PlaneGeometry is a class in the Three.js library that creates a 2D plane in 3D space, with a specified width, height, and number of segments for each dimension, by generating vertices and faces. It inherits from three.Geometry.

PostEffectBright.js

GitHub: notghettolenny/sketch-threejs

15
16
17
18
19
20
21
22
23
24

  this.createObj();
}
createObj() {
  // Define Geometry
  const geometry = new THREE.PlaneGeometry(2, 2);

  // Define Material
  const material = new THREE.RawShaderMaterial({
    uniforms: this.uniforms,

259

textureSlides.js

GitHub: alan-wu/ZincJS

16
17
18
19
20
21
22
23
24
25
this.createSlides = slideSettings => {
  if (!this.morph) this.morph = new THREE.Group();
  if (this.texture && this.texture.isTextureArray && this.texture.isReady()) {
    slideSettings.forEach(slide => {
      if (slide.direction && slide.value) {
        const geometry = new THREE.PlaneGeometry( 1, 1 );
        geometry.translate(0.5, 0.5, 0);
        const uniforms = shader.getUniforms();
        uniforms.diffuse.value = this.texture.impl;
        uniforms.depth.value = this.texture.size.depth;

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
import * as THREE from "three";

// Create a new plane geometry with width and height of 10
const geometry = new THREE.PlaneGeometry(10, 10);

// Create a new material for the geometry
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });

// Create a new mesh with the geometry and material
const mesh = new THREE.Mesh(geometry, material);

// Add the mesh to the scene
scene.add(mesh);

This code creates a new PlaneGeometry with a width and height of 10, creates a new material with a white color, creates a new mesh with the geometry and material, and adds the mesh to the scene.

index.js

GitHub: avin/generative

189
190
191
192
193
194
195
196
197

// ---------------------------------------------
// Земля
// ---------------------------------------------
{
  const geometry = new THREE.PlaneGeometry(200, 200, 100, 100);
  const plane = new THREE.Mesh(geometry, floorMaterial);
  plane.rotation.x = -Math.PI * 0.5;
  scene.add(plane);

+ 5 other calls in file

main.js

GitHub: mattdesl/filmic-gl

87
88
89
90
91
92
93
94
95
96
ground.wrapS = THREE.RepeatWrapping;
ground.wrapT = THREE.RepeatWrapping;
ground.repeat.x = 15;
ground.repeat.y = 15;

var planeGeo = new THREE.PlaneGeometry(1000, 1000, 10, 10);
planeGeo.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
var floor = new THREE.Mesh(
    planeGeo, new THREE.MeshLambertMaterial({map:ground})
);

index.js

GitHub: nfbinteractive/Bear71VR_OpenSource

85
86
87
88
89
90
91
92
93
94
  this.ripplePointCloud.unregister(rippler);
}

RippleMap.prototype.generatePreviewObject = function() {
  return new THREE.Mesh(
    new THREE.PlaneGeometry(1, 1, 1, 1),
    new THREE.MeshBasicMaterial({
      map: this.texture
    })
  );

+ 7 other calls in file

README.md?plain=1

GitHub: haosong/3D-Online-FPS

143
144
145
146
147
148
149
150
151
152
至此整个项目的外部环境被成功构造完了。本质上这个游戏世界就是一个贴了6张图的边长为10000的正方体。

### 2.8 Ground
由于是一个射击游戏，我们不能让玩家在这个10000的正方体里到处飞，所以我们创建一块地，来作为玩家的战场。我们用Three.js自带的PlaneGeometry来创建一个大小为1000*1000的平面作为战场：
```javascript
geometry = new THREE.PlaneGeometry(1000, 1000, 100, 100);
```
有了Geometry之后，我们开始考虑地板的材质。传统的纯色地板或是简单的贴一张图已经不能够展现这个游戏的浮夸了，所以我们用Three.js中的face类，创建出一个个三角形，然后为每个三角形设置随机的vertexColors。最后把这些三角形铺设在这个PlaneGeometry上。
```
for (var i = 0, l = geometry.faces.length; i < l; i++) {

crosshairs.js

GitHub: namel/veri

58
59
60
61
62
63
64
65
66
67
if (sprite.width && sprite.height) {
    sprite.repeatX = sprite.width / sprite.texture.image.width;
    sprite.repeatY = sprite.height / sprite.texture.image.height;
}
sprite.texture.repeat.set(sprite.repeatX, sprite.repeatY);
var geometry = new THREE.PlaneGeometry(sprite.objWidth, sprite.objHeight, 1, 1);
var spriteMaterial = new THREE.MeshBasicMaterial({
    transparent: true,
    map: sprite.texture,
    side: THREE.DoubleSide

index.js

GitHub: star8ks/sketch

47
48
49
50
51
52
53
54
55
56
57
58
  transparent: true,
  side: THREE.DoubleSide
});


//make a box, hidden until the texture has loaded
const geo = new THREE.PlaneGeometry(100, 100);


const skyWindow = new THREE.Mesh(geo, shaderMat);
app.scene.add(skyWindow);
app.camera.lookAt(skyWindow.position);

+ 53 other calls in file

index.js

GitHub: Troveup/HEMesh

62
63
64
65
66
67
68
69
70
71
72
    //}
}


function testHalfEdge( scene, iterationMax = 0) {
    // var seedGeom = new THREE.BoxGeometry( 1, 1, 1 );
    // var seedGeom = new THREE.PlaneGeometry( 1, 1, 1 );
    var seedGeom = generate2HoleCube();
    var seedMesh = new THREE.Mesh( seedGeom, material );
    scene.add( seedMesh );

+ 2 other calls in file

World.js

GitHub: KleoPetroff/storyboarder

45
46
47
48
49
50
51
52
53
54
let material = new THREE.MeshToonMaterial({ map: texture, side: THREE.FrontSide })
// material.transparent = true
// material.blending = THREE.MultiplyBlending
material.opacity = 1

let geometry = new THREE.PlaneGeometry( 135 / 3, 135 / 3, 32 )
let object = new THREE.Mesh( geometry, material )
object.userData.type = 'ground'
object.rotation.x = -Math.PI / 2
// shift slightly to allow for OutlineEffect

263

index.jsx

GitHub: scottlawsonbc/stldiff

21
22
23
24
25
26
27
28
29
30
    directionalLight.position.normalize();
    scene.add(directionalLight);
}

function initPlane() {
    var geometry = new THREE.PlaneGeometry(400, 400, 20, 20);
    var material = new THREE.MeshBasicMaterial({ color: 0x01425f, wireframe: true });
    var plane = new THREE.Mesh(geometry, material);
    scene.add(plane);
}

world.js

GitHub: exaquark/exaquark-vue

199
200
201
202
203
204
205
206
207
208
let light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 0.75)
light.position.set(0.5, 1, 0.75)
instance.scene.add(light)

// create a floor
var floorGeometry = new THREE.PlaneGeometry(2000, 2000, 100, 100)
floorGeometry.rotateX(-Math.PI / 2)
for (let i = 0, l = floorGeometry.faces.length; i < l; i++) {
  var face = floorGeometry.faces[i]
  face.vertexColors[0] = new THREE.Color().setHSL(Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75)

+ 3 other calls in file

background.js

GitHub: funwithtriangles/polyop-ceremony

20
21
22
23
24
25
26
27
28
29

guiFolder.add(params, 'bounceAmp', 0, 1);
guiFolder.add(params, 'pulseAmp', 0, 1);
guiFolder.add(params, 'scale', 1, 10);

swampGeometry = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight * 1.1);

swampMaterial = new THREE.ShaderMaterial( {

        uniforms: {

ParticleSystem.js

GitHub: JordanMachado/particles-attraction

10
11
12
13
14
15
16
17
18
19

const width = 256;
const height = 256;
this.dataPos = new Float32Array(width * height * 4);
this.dataVel = new Float32Array(width * height * 4);
const geo = new THREE.PlaneGeometry(10, 10, 36);
this.geom = new THREE.Geometry();
this.geom = new THREE.BufferGeometry();

const vertices = new Float32Array(width * height * 3);

THREE.Terrain.js

GitHub: godrin/antargis.js

95
96
97
98
99
100
101
102
103
104
var scene = new THREE.Object3D();
// Planes are initialized on the XY plane, so rotate so Z is up.
scene.rotation.x = -0.5 * Math.PI;

var mesh = new THREE.Mesh(
    new THREE.PlaneGeometry(options.xSize, options.ySize, options.xSegments, options.ySegments),
    options.material
);

var v = mesh.geometry.vertices;

+ 3 other calls in file

index.js

GitHub: msfeldstein/20-Portals

23
24
25
26
27
28
29
30
31
32
renderer.gammaInput = true
renderer.gammaOutput = true
renderer.autoClear = false
document.body.appendChild(renderer.domElement)
document.body.style.margin = 0
var groundGeometry = new THREE.PlaneGeometry(100, 100, 20, 20)
groundGeometry.dynamic = true
for (var i = 0; i < groundGeometry.vertices.length; i++) {
        var vert = groundGeometry.vertices[i]
        vert.z = noise.simplex3(vert.x, vert.y, 0) * 3

scatter.js

GitHub: vidartf/ipyvolume

46
47
48
49
50
51
52
53
54
55
        var face = new THREE.Face3( indices[0], indices[1+j], indices[2+j])
        this.geo_cat.faces.push(face)
    }
}
this.geo_square_2d = new THREE.PlaneGeometry(2, 2, 1, 1)
this.geo_point_2d = new THREE.PlaneGeometry(0.1, 0.1, 1, 1)
this.geo_triangle_2d = new THREE.CircleGeometry(1, 3, Math.PI/2);
this.geo_circle_2d = new THREE.CircleGeometry(1, 32, Math.PI/2);

//this.geo = new THREE.ConeGeometry(0.2, 1)

236

+ 3 other calls in file

main.js

GitHub: hanbollar/Music-Visualizer

190
191
192
193
194
195
196
197
198
199

}

function createMesh() {
// initialize a simple plane with adam's face as material
  planeTop = new THREE.PlaneGeometry(planeDim, planeDim, planeDim, planeDim);
  planeBottom = new THREE.PlaneGeometry(planeDim, planeDim, planeDim, planeDim);
  // make appear double sided
  planeBottom.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI ) );
  planeTop.applyMatrix( new THREE.Matrix4().makeRotationZ( Math.PI ));

+ 3 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About