Home

Index

How to use the BoxBufferGeometry function from three

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

three.BoxBufferGeometry is a Three.js built-in class that generates a box-shaped buffer geometry.

MIP.js

20
21
22
23
24
25
26
27
28
29
config.samples = config.samples || 512.0;
config.gradient_step = config.gradient_step || 0.005;
config.interpolation = typeof (config.interpolation) !== 'undefined' ? config.interpolation : true;

const randomMul = typeof (window.randomMul) !== 'undefined' ? window.randomMul : 255.0;
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const modelMatrix = new THREE.Matrix4();
const translation = new THREE.Vector3();
const rotation = new THREE.Quaternion();
const scale = new THREE.Vector3();

115

803

primitives.js

GitHub: PrismarineJS/prismarine-viewer

20
21
22
23
24
25
26
27
28
29

const sx = primitive.end.x - primitive.start.x
const sy = primitive.end.y - primitive.start.y
const sz = primitive.end.z - primitive.start.z

const boxGeometry = new THREE.BoxBufferGeometry(sx, sy, sz, sx, sy, sz)
boxGeometry.attributes.positionStart = boxGeometry.attributes.position.clone()

const gridGeometry = GridBoxGeometry(boxGeometry, false)
const grid = new THREE.LineSegments(gridGeometry, new THREE.LineBasicMaterial({ color }))

163

+ 11 other calls in file

How does three.BoxBufferGeometry work?

three.BoxBufferGeometry is a class in the Three.js library that creates a buffer geometry representing a box (cuboid) in 3D space, with each face made up of two triangles, each of which consists of three vertices. It can be customized with various properties such as width, height, depth, and number of segments, among others. The resulting geometry can be used to create a mesh object that can be added to a Three.js scene.

food.js

GitHub: kentywang/Agamari

32
33
34
35
36
37
38
39
40
41

// Create THREE object based on initial data parameters
let { type, parms, x, y, z } = this.initialData;
switch (type) {
  case 'box':
    geometry = new THREE.BoxBufferGeometry( parms[0], parms[1], parms[2] );
    material = new THREE.MeshPhongMaterial( {color: someColors[color], shading: THREE.FlatShading} );
    shape = new CANNON.Box(new CANNON.Vec3(parms[0] / 2, parms[1] / 2, parms[2] / 2));
    break;
  case 'moon':

ThreeDPenSkin.js

GitHub: CSDTs/CScratch-3d-render

56
57
58
59
60
61
62
63
64
65
    );
}

drawCube (penAttributes, dimensions, position, rotation) {
    this._addObjectFromGeometry(
        new three.BoxBufferGeometry(dimensions[0], dimensions[1], dimensions[2]),
        position,
        rotation,
        penAttributes.color4f
    );

304

+ 3 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
// create a new box buffer geometry with width = 1, height = 1, depth = 1
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);

// create a new mesh with the geometry and a basic material
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);

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

This example creates a new BoxBufferGeometry object with a width, height, and depth of 1. It then creates a Mesh object with the geometry and a basic green material, and adds it to the scene. The BoxBufferGeometry represents a box-shaped geometry, defined by a set of vertices and faces. The Buffer prefix in the name indicates that this geometry is stored in a buffer for improved performance.

Hill.js

GitHub: shaungt1/sketch-threejs

14
15
16
17
18
19
20
21
22
23
  this.obj = this.createObj();
  this.obj.rotation.set(0, 0.3 * Math.PI, 0);
}
createObj() {
  const geometry = new THREE.InstancedBufferGeometry();
  const baseGeometry = new THREE.BoxBufferGeometry(40, 1, 10);
  geometry.copy(baseGeometry);

  const height = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
  const offsetX = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);

260

main.js

GitHub: fagan2888/EuroGridLayer

69
70
71
72
73
74
75
76
77
78
pointCloud.geometry.boundingBox = null;
const pointsContainer = new THREE.Object3D();
pointsContainer.add(pointCloud);
viewer.scene.add(pointsContainer);

/*     var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
    geometry.translate( 0, 0.5, 0 );
    var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
    for ( var i = 0; i < 500; i ++ ) {
        var mesh = new THREE.Mesh( geometry, material );

+ 9 other calls in file

testobject.js

GitHub: FAC-11/FACgame

4
5
6
7
8
9
10
11
12
13
OBJLoader(THREE);
const MTLLoader = require('three-mtl-loader');

const getObj6 = () => {
  const obj6 = new THREE.Mesh(
    new THREE.BoxBufferGeometry(10, 10, 10),
    new THREE.MeshBasicMaterial({
      color: 0xffff00,
      wireframe: false,
    }),

+ 3 other calls in file

index.md?plain=1

GitHub: ryannjohnson/tutorial-chromebookplaystore-webgl

233
234
235
236
237
238
239
240
241
242
this.renderer.domElement.className = 'space-droid__canvas';
this.renderer.domElement.style.opacity = 1;
element.appendChild(this.renderer.domElement);

// Sample box to fill our scene.
const geometry = new THREE.BoxBufferGeometry(10, 10, 10);
const material = new THREE.MeshLambertMaterial({ color: 0x00ffbb });
this.sampleMesh = new THREE.Mesh(geometry, material);
this.sampleMesh.position.set(0, 0, 0);
this.sampleMesh.rotation.set(0, 0, 0);

World.js

GitHub: KleoPetroff/storyboarder

126
127
128
129
130
131
132
133
134
135
  object.position.y = -0.03
  return object
}

const wallsFactory = ({ width, height, length }) => {
  let geometry = new THREE.BoxBufferGeometry(
    width,
    height,
    length
  )

263

table.js

GitHub: JesungKoo/glb2usdz

63
64
65
66
67
68
69
70
71
const legColor = 0x000000;

const legPosX = (width - legT)/2;
const legPosY = (length - legT)/2;

const topGeo = new THREE.BoxBufferGeometry(width, topT, length);
const topMat = new THREE.MeshStandardMaterial( { color: topColor } );
const top = new THREE.Mesh( topGeo, topMat );
top.position.set(0, height + topT/2, 0);

+ 3 other calls in file

MousePad.js

GitHub: B-Reel/vr-madebymakers

18
19
20
21
22
23
24
25
26
27

this.intersectPoint = new THREE.Vector3();
this.intersectPoint2 = new THREE.Vector3();

var tempHand = new THREE.Mesh(
  new THREE.BoxBufferGeometry(0.1, 0.1, 0.1, 1, 1, 1),
  new THREE.MeshNormalMaterial()
);

this.h1 = tempHand;

TransformControls.js

GitHub: MozillaReality/mred

704
705
706
707
708
709
710
711
712

// reusable geometry

var arrowGeometry = new THREE.CylinderBufferGeometry( 0, 0.05, 0.2, 12, 1, false);

var scaleHandleGeometry = new THREE.BoxBufferGeometry( 0.125, 0.125, 0.125);

var lineGeometry = new THREE.BufferGeometry( );
lineGeometry.addAttribute('position', new THREE.Float32BufferAttribute( [ 0, 0, 0,	1, 0, 0 ], 3 ) );

latticeview.js

GitHub: audunsh/evince

116
117
118
119
120
121
122
123
124
125
    this.camera.position.z = 2*Math.abs(this.box[2]);
    
}

let baseGeometry = new THREE.SphereBufferGeometry(.3);
//let baseGeometry = new THREE.BoxBufferGeometry(1.0,1.0,1.0);
let instancedGeometry = new THREE.InstancedBufferGeometry().copy(baseGeometry);
let instanceCount = this.state.length;
instancedGeometry.maxInstancedCount = instanceCount;
//let material = new THREE.ShaderMaterial();

moving_head.js

GitHub: ASLS-org/studio

1095
1096
1097
1098
1099
1100
1101
1102
1103
1104

}

static prepareBoxHelperInstance() {

  let boxHelperGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
  let boxHelperMaterial = new THREE.MeshBasicMaterial({
    side: THREE.BackSide,
    wireframe: true,
    color: 'rgb(30, 69, 185)',

+ 3 other calls in file

geometries.js

GitHub: rahul2512/cgNA_plus_web

381
382
383
384
385
386
387
388
389
390
var height = 4.2;
var purine_width = 6.0;
var pyrimidine_width = 3.6;
var geometry;// = new THREE.BoxGeometry(1,1,1);
if (nuc == 'A')
    geometry = new THREE.BoxBufferGeometry(height, purine_width,     thickness);
else if (nuc == 'C')
    geometry = new THREE.BoxBufferGeometry(height, pyrimidine_width, thickness);
else if (nuc == 'G')
    geometry = new THREE.BoxBufferGeometry(height, purine_width,     thickness);

+ 17 other calls in file

mesh.js

GitHub: zDawnING/MyLearnWebGL

66
67
68
69
70
71
72
73
74
75
/**
 * 创建指定材质立方体
 * @return {[type]} [description]
 */
const createCube = (material) => {
        let geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
        return new THREE.Mesh(geometry, material);
}

/**

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About