How to use the BoxHelper function from three

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

THREE.BoxHelper is a built-in class in the THREE.js library for JavaScript that creates a wireframe box around a given 3D object for visualization and debugging purposes.

_web3d.js

667
668
669
670
671
672
673
674
675
676
    obj_bg.position.set(0, 5, 0);
    obj_bg.material = new THREE.MeshLambertMaterial({
        emissive: 0x593b00
    });

    // const box_helper = new THREE.BoxHelper( obj_bg, 0xffff00 );
    // scene.add(box_helper);

    console.log(obj_bg);
},

+ 5 other calls in file

newItem.js

GitHub: winnext/ReactPlanner

107
108
109
110
111
112
113
114
115
  color: element.properties.get('color')
});

var mesh = new _three.Mesh(geometry, material);

var box = new _three.BoxHelper(mesh, !element.selected ? _reactPlanner.ReactPlannerSharedStyle.LINE_MESH_COLOR.unselected : _reactPlanner.ReactPlannerSharedStyle.MESH_SELECTED);
box.material.linewidth = 2;
box.renderOrder = 1000;
mesh.add(box);

How does three.BoxHelper work?

The THREE.BoxHelper class in the THREE.js library for JavaScript is used to create a wireframe box around a given 3D object for visualization and debugging purposes. When instantiated, a THREE.BoxHelper object takes a single argument: the 3D object that the wireframe box should be created around. The resulting box will be sized and positioned to match the size and position of the object. The THREE.BoxHelper object itself is a subclass of THREE.LineSegments, which means that it is a three-dimensional object that is made up of a series of lines. These lines define the edges of the wireframe box. By default, the THREE.BoxHelper object is created with a white line material and no shading or texturing. However, the material and other visual properties of the box can be customized by modifying the properties of the THREE.LineSegments object that is returned by the THREE.BoxHelper constructor. For example, you could set the color of the wireframe box to red and the linewidth to 2 using code like this: csharp Copy code {{{{{{{ class="!whitespace-pre hljs language-csharp">const box = new THREE.BoxBufferGeometry(1, 1, 1); const mesh = new THREE.Mesh(box); const helper = new THREE.BoxHelper(mesh); helper.material.color.set(0xff0000); helper.material.linewidth = 2; scene.add(helper); In this example, we first create a THREE.BoxBufferGeometry object representing a 1x1x1 box, and use it to create a THREE.Mesh object. We then create a THREE.BoxHelper object with the THREE.Mesh object as its argument, and modify the color and linewidth properties of its material object to customize the appearance of the wireframe box. Finally, we add the THREE.BoxHelper object to the scene so that it will be rendered along with the other objects in the scene. In summary, THREE.BoxHelper is a built-in class in the THREE.js library for JavaScript that creates a wireframe box around a given 3D object for visualization and debugging purposes. The resulting box is a THREE.LineSegments object that defines the edges of the wireframe box, and can be customized by modifying the properties of its material object.

kye-three.js

GitHub: hupeky/three-cheesecake

287
288
289
290
291
292
293
294
295
/********* get inverse and send to origin *************/
var originalMatrix = new THREE.Matrix4(); // stores the original transformations of object
var invertedMatrix = new THREE.Matrix4(); // stores the original transformations of object

var Box3 = new THREE.Box3(); // box utlity, getsize and getcenter
var BoxHelper = new THREE.BoxHelper(); // for displaying bounding box, wireframe, 
var center = new THREE.Vector3(); 
var dimensions = new THREE.Vector3();
var bboxGeom = new THREE.BoxGeometry(); // geometry for holding bounding box, needed for ray collision

+ 5 other calls in file

simulator.js

GitHub: jjvanassen/flow

171
172
173
174
175
176
177
178
179
180
}
agentDat.position = posArray;
agentDat.orientation = orArray;

// bounding box
var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( sceneProp.SceneSize, sceneProp.SceneSize, sceneProp.SceneSize) ) );
helper.material.color.setHex( 0x404040);
helper.material.blending = THREE.AdditiveBlending;
helper.material.transparent = true;
helper.name = "helper";

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
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const box = new THREE.BoxBufferGeometry(1, 1, 1);
const mesh = new THREE.Mesh(box);
const helper = new THREE.BoxHelper(mesh);
helper.material.color.set(0xff0000);
helper.material.linewidth = 2;

scene.add(mesh);
scene.add(helper);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

In this example, we first create a THREE.Scene object, a THREE.PerspectiveCamera object, and a THREE.WebGLRenderer object to set up the THREE.js scene. We then create a THREE.BoxBufferGeometry object representing a 1x1x1 box, and use it to create a THREE.Mesh object. We also create a THREE.BoxHelper object with the THREE.Mesh object as its argument, and modify its material properties to customize the appearance of the wireframe box. We add both the THREE.Mesh object and the THREE.BoxHelper object to the scene using the add method, and set the position of the camera so that the scene is visible. Finally, we define an animate function that rotates the THREE.Mesh object and calls the render method of the THREE.WebGLRenderer object to update the scene each frame. When you run this example in a web browser, you should see a rotating cube with a red wireframe box around it, like this:

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About