Home

Index

How to use the Box3 function from three

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

three.Box3 is a class in the Three.js library that represents a three-dimensional axis-aligned bounding box.

Projector.js

109
110
111
112
113
114
115
116
117
_vC = new THREE.Vector3(),

_vector3 = new THREE.Vector3(),
_vector4 = new THREE.Vector4(),

_clipBox = new THREE.Box3( new THREE.Vector3( - 1, - 1, - 1 ), new THREE.Vector3( 1, 1, 1 ) ),
_boundingBox = new THREE.Box3(),
_points3 = new Array( 3 ),
_points4 = new Array( 4 ),

185

867

+ 21 other calls in file

model-loader.js

GitHub: KleoPetroff/storyboarder

85
86
87
88
89
90
91
92
93
94
  skinning: true,
  shininess: 0,
  flatShading: false,
})

let bbox = new THREE.Box3().setFromObject(mesh)
let height = bbox.max.y - bbox.min.y

let heightX = bbox.max.x - bbox.min.x
let heightY = bbox.max.y - bbox.min.y

263

+ 3 other calls in file

How does three.Box3 work?

three.Box3 is used to represent a three-dimensional bounding box in the Cartesian coordinate system. A bounding box is an imaginary box that surrounds a collection of objects in space. The box is defined by its minimum and maximum x, y, and z coordinates. three.Box3 has the following properties: min: a Vector3 representing the minimum x, y, and z coordinates of the bounding box. max: a Vector3 representing the maximum x, y, and z coordinates of the bounding box. three.Box3 has several methods for working with bounding boxes, including: set(min, max): sets the minimum and maximum coordinates of the bounding box. setFromPoints(points): sets the bounding box to enclose a set of Vector3 points. makeEmpty(): sets the minimum and maximum coordinates of the bounding box to positive and negative infinity, respectively. isEmpty(): returns true if the bounding box is empty (i.e., its minimum coordinates are greater than its maximum coordinates), and false otherwise. expandByPoint(point): expands the bounding box to include the given Vector3 point. expandByVector(vector): expands the bounding box by the given Vector3 vector. expandByScalar(scalar): expands the bounding box uniformly in all dimensions by the given scalar value. containsPoint(point): returns true if the given Vector3 point is contained within the bounding box, and false otherwise. intersectsBox(box): returns true if the given Box3 intersects with this bounding box, and false otherwise. applyMatrix4(matrix): applies the given Matrix4 transformation matrix to the bounding box. three.Box3 is often used for collision detection and for determining the size and position of an object in a 3D scene.

Scene.js

GitHub: K3D-tools/K3D-jupyter

54
55
56
57
58
59
60
61
62
63
64
65
66
}


function getSceneBoundingBox(K3D) {
    /* jshint validthis:true */


    const sceneBoundingBox = new THREE.Box3();
    let objectBoundingBox;
    let world = K3D.getWorld();


    Object.keys(world.ObjectsListJson).forEach(function (K3DIdentifier) {

116

804

ThreeHelpers.js

GitHub: kevzettler/VoxLords

10
11
12
13
14
15
16
17
18
19

    var color = ( hex !== undefined ) ? hex : 0x888888;

    this.object = object;

    this.box = new THREE.Box3();

    THREE.Mesh.call( this, new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshBasicMaterial( { color: color, wireframe: true } ) );

};

+ 5 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Import Three.js and create a scene
import * as THREE from "three";
const scene = new THREE.Scene();

// Create a Box3 object and set its initial min and max values
const box = new THREE.Box3();
box.set(new THREE.Vector3(-1, -1, -1), new THREE.Vector3(1, 1, 1));

// Create a mesh and add it to the scene
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Update the bounding box to include the mesh
box.setFromObject(mesh);

// Check if the bounding box contains a point
const point = new THREE.Vector3(0, 0, 0);
if (box.containsPoint(point)) {
  console.log("The bounding box contains the point");
}

// Expand the bounding box by a scalar value
box.expandByScalar(0.5);

// Apply a transformation matrix to the bounding box
const matrix = new THREE.Matrix4().makeTranslation(1, 0, 0);
box.applyMatrix4(matrix);

// Check if the bounding box intersects with another box
const otherBox = new THREE.Box3();
otherBox.set(new THREE.Vector3(-2, -2, -2), new THREE.Vector3(-1, -1, -1));
if (box.intersectsBox(otherBox)) {
  console.log("The bounding boxes intersect");
}

In this example, we create a Box3 object box and set its initial minimum and maximum values to (-1, -1, -1) and (1, 1, 1), respectively. We then create a BoxGeometry and a Mesh object and add the mesh to the scene. We update the box object to include the mesh by calling setFromObject(mesh). We then create a Vector3 object point and check if it is contained within the bounding box by calling containsPoint(point). We expand the bounding box by calling expandByScalar(0.5), which increases the minimum and maximum values by 0.5 in all dimensions. Finally, we apply a translation matrix to the bounding box by calling applyMatrix4(matrix), and check if the bounding box intersects with another Box3 object otherBox by calling intersectsBox(otherBox).

THREEUtil.js

GitHub: VCityTeam/UD-Viz

148
149
150
151
152
153
154
155
156
157
 * @param {THREE.Object3D} obj - the object to fit inside the projection plane of the shadow camera
 * @param {THREE.DirectionalLight} dirLight - the light with the shadow camera
 */
bindLightTransform: function (offset, phi, theta, obj, dirLight) {
  // Computing boundingSphere
  const bb = new THREE.Box3().setFromObject(obj);
  const center = bb.getCenter(new THREE.Vector3());
  const bsphere = bb.getBoundingSphere(new THREE.Sphere(center));
  const sphericalPoint = new THREE.Spherical(
    bsphere.radius + offset,

+ 4 other calls in file

zincObject.js

GitHub: alan-wu/ZincJS

359
360
361
362
363
364
365
366
367
368
 */
ZincObject.prototype.getClosestVertexIndex = function() {
  let closestIndex = -1;
  if (this.morph) {
    let position = this.morph.geometry.attributes.position;
    let boundingBox = new THREE.Box3().setFromBufferAttribute(position);
    let center = new THREE.Vector3();
    boundingBox.getCenter(center);
    if (position && boundingBox) {
      let distance = -1;

+ 44 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2176
2177
2178
2179
2180
2181
2182
2183
2184
2185
 * @param {GLTFParser} parser
 */
function computeBounds(geometry, primitiveDef, parser) {
  var attributes = primitiveDef.attributes;

  var box = new THREE.Box3();

  if (attributes.POSITION !== undefined) {
    var accessor = parser.json.accessors[attributes.POSITION];
    var min = accessor.min;

+ 14 other calls in file

index.js

GitHub: OpenSlicer/OpenSlicer

198
199
200
201
202
203
204
205
206
207


group.add(wireframeObj)
group.add(mainObj)

let bb = new THREE.Box3().setFromObject(mainObj)
normalsHelper = new THREE.FaceNormalsHelper(mainObj, bb.getSize(new THREE.Vector3()).length() / 20, 0x0000ff, 1)
group.add(normalsHelper)

mainGeom.computeBoundingSphere()

+ 5 other calls in file

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
 * Given a compartment object, place the camera focus on it.
 * @param {object} compartment - Three object representing the compartment
 * @return null
 */
centerCameraAroundCompartment(compartment) {
  const boundingBox = new THREE.Box3().setFromObject(compartment);
  this.camera.position.set(boundingBox.min.x - 10, boundingBox.min.y - 10, boundingBox.min.z - 10);
  this.trackControls.update();
  const boxCenter = boundingBox.getCenter();
  this.trackControls.target = boxCenter;

+ 3 other calls in file

Frame3DPlanar.js

GitHub: VCityTeam/UD-Viz

74
75
76
77
78
79
80
81
82

// requester compute near far
this.itownsView.addFrameRequester(
  itowns.MAIN_LOOP_EVENTS.AFTER_CAMERA_UPDATE,
  () => {
    const bb = new THREE.Box3().setFromObject(this.scene);
    computeNearFarCamera(this.camera, bb.min, bb.max);
  }
);

+ 41 other calls in file

MarchingCubes.js

GitHub: zziyifan/Medical-AI-learning-1

123
124
125
126
127
128
129
130
131
geometry.boundingSphere = new THREE.Sphere(
    new THREE.Vector3(0.5 * sizeX, 0.5 * sizeY, 0.5 * sizeZ),
    new THREE.Vector3(0.5 * sizeX, 0.5 * sizeY, 0.5 * sizeZ).length(),
);

geometry.boundingBox = new THREE.Box3(
    new THREE.Vector3(0.0, 0.0, 0.0),
    new THREE.Vector3(sizeX, sizeY, sizeZ),
);

+ 4 other calls in file

glyphset.js

GitHub: alan-wu/ZincJS

31
32
33
34
35
36
37
38
39
40
let morphVertices = false;
this.isGlyphset = true;
let _transformMatrix = new THREE.Matrix4();
const _bot_colour = new THREE.Color();
const _top_colour = new THREE.Color();
const _boundingBox1 = new THREE.Box3();
const _boundingBox2 = new THREE.Box3();
const _boundingBox3 = new THREE.Box3();
const _points = [];
const _current_positions = [];

+ 29 other calls in file

TextureText.js

GitHub: zziyifan/Medical-AI-learning-1

120
121
122
123
124
125
126
127
128
129

texture.needsUpdate = true;

sprite.position.fromArray(object.positions, index * 3);
sprite.scale.set(size, size, size);
sprite.boundingBox = new THREE.Box3().setFromCenterAndSize(
    new THREE.Vector3(),
    new THREE.Vector3(size, size, size),
);
if (config.model_matrix) {

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

3920
3921
3922
3923
3924
3925
3926
3927
3928
3929
3930
3931
3932
3933
3934




function computeBounds( geometry, primitiveDef, parser ) {


    const attributes = primitiveDef.attributes;
    const box = new THREE.Box3();


    if ( attributes.POSITION !== undefined ) {


        const accessor = parser.json.accessors[ attributes.POSITION ];

index.cjs

GitHub: Brakebein/node-three-gltf

2443
2444
2445
2446
2447
2448
2449
2450
2451
2452
        return Promise.all(pending);
    });
}
function computeBounds(geometry, primitiveDef, parser) {
    const attributes = primitiveDef.attributes;
    const box = new three.Box3();
    if (attributes.POSITION !== undefined) {
        const accessor = parser.json.accessors[attributes.POSITION];
        const min = accessor.min;
        const max = accessor.max;

shapes.js

GitHub: howardwang0620/bubble-dxf-parser

137
138
139
140
141
142
143
144
145
});
var material = new THREE.MeshBasicMaterial({ color: color });
var text = new THREE.Mesh(geometry, material);

// Measure what we rendered.
var measure = new THREE.Box3();
measure.setFromObject(text);

var textWidth = measure.max.x - measure.min.x;

+ 3 other calls in file

transformation.js

GitHub: rendoir/feup-thesis

129
130
131
132
133
134
135
136
137
138
let geometry = new THREE.ShapeBufferGeometry( shape );
geometry.computeBoundingBox();
let mesh = new THREE.Mesh( geometry, 
    new THREE.MeshBasicMaterial( { color: this._getColor(i, states.length), side: THREE.DoubleSide, 
        transparent: true, opacity: this._getOpacity(i, states.length) } ) );
state.boundingBox = new THREE.Box3().copy(geometry.boundingBox);
group.add( mesh );

// Expand bounding box
if (this.sceneBoundingBox === null)

+ 7 other calls in file

index.js

GitHub: msfeldstein/20-Portals

58
59
60
61
62
63
64
65
66
document.body.addEventListener('keypress', () => {
        showOther = !showOther
})
var clock = new THREE.Clock()
scene1.updateMatrixWorld()
var portalBox = new THREE.Box3().setFromObject(scene1.portal)
var helper = new THREE.BoundingBoxHelper(scene1.portal)
helper.update()
// scene1.add(helper)

logo_thing.js

GitHub: max0ne/logo_thing

128
129
130
131
132
133
134
135
136
137
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(containerDom.clientWidth, containerDom.clientHeight);
containerDom.appendChild(renderer.domElement);

scene.add(obj);
const boundingBox = new THREE.Box3().setFromObject(obj);

'xyz'.split('').forEach((axis) => {
  obj.position[axis] = - (boundingBox.max[axis] + boundingBox.min[axis]) / 2;
});

ArcballControls.js

GitHub: BaurTokenov/three-js-editor-2

1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
}
if (this._state == STATE.SCALE || this._state == STATE.FOCUS || this._state == STATE.ANIMATION_FOCUS) {
    this._tbRadius = this.calculateTbRadius(this.camera);
    if (this.adjustNearFar) {
        const cameraDistance = this.camera.position.distanceTo(this._gizmos.position);
        const bb = new three_1.Box3();
        bb.setFromObject(this._gizmos);
        const sphere = new three_1.Sphere();
        bb.getBoundingSphere(sphere);
        const adjustedNearPosition = Math.max(this._nearPos0, sphere.radius + sphere.center.length());

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About