'how do I get the position of a certain point from BoxGeometry?

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.

enter image description here



Solution 1:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 De.Minov