how do I get the position of a certain point from BoxGeometry? - three.js

Question

There is a regular BoxGeometry whose dimensions are set relative to a group of objects.
How to get the position of a certain point in this BoxGeometry (x:1, y:1, z:1), relative to the world.

Answer 1

I wrote such a function.
const getBoxVertexPos = (box, side) => {
box = new THREE.Box3().setFromObject(box);
let size = box.getSize(new THREE.Vector3()),
center = box.getCenter(new THREE.Vector3());
return {
x: side[0] > 0 ? (center.x + (size.x / 2)) : (center.x - (size.x / 2)),
y: side[1] > 0 ? (center.y + (size.y / 2)) : (center.y - (size.y / 2)),
z: side[2] > 0 ? (center.z + (size.z / 2)) : (center.z - (size.z / 2)),
}
};
In general, the function does what I need, but something tells me that there is a better way.
let canvas = document.querySelector('canvas');
let width, height;
const canvasSize = () => {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
}
canvasSize();
let renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
let scene = new THREE.Scene();
renderer.setSize(width, height);
let camera = new THREE.PerspectiveCamera(55, width / height, .1, 15);
camera.position.set(3, 3, 3);
camera.aspect = width / height;
// CUBE
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
cube.position.x = .5;
scene.add(cube)
cube.visible = false;
// HELPERS
const boxHelper = new THREE.BoxHelper(cube, 0xffff00);
scene.add(boxHelper);
const axesHelper = new THREE.AxesHelper(2);
scene.add(axesHelper);
const getBoxVertexPos = (box, side) => {
box = new THREE.Box3().setFromObject(box);
let size = box.getSize(new THREE.Vector3()),
center = box.getCenter(new THREE.Vector3());
return {
x: side[0] > 0 ? (center.x + (size.x / 2)) : (center.x - (size.x / 2)),
y: side[1] > 0 ? (center.y + (size.y / 2)) : (center.y - (size.y / 2)),
z: side[2] > 0 ? (center.z + (size.z / 2)) : (center.z - (size.z / 2)),
}
};
let A = getBoxVertexPos(cube, [1, 1, 1]);
const geometryA = new THREE.BoxGeometry(.1,.1,.1);
const materialA = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cubeA = new THREE.Mesh(geometryA, materialA);
cubeA.position.x = A.x;
cubeA.position.y = A.y;
cubeA.position.z = A.z;
scene.add(cubeA);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
const render = () => {
renderer.render(scene, camera);
}
render();
controls.addEventListener('change', render, false);
const resize = () => {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
render()
}
resize();
window.addEventListener('resize', resize);
body {margin: 0; overflow: hidden;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<canvas></canvas>