body{
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="becaf2accab5adebdfe9de">[email protected]</a>/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9beffda1feddbfb7eed2decdebfc8ee9e5e6afc2e483")(dbece">[email protected]">(dbece-ecabcde")</a>;
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 5, 20);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper());
let halfSize = new THREE.Vector3(0.19511961936950684, 0.2595798969268799, 0.34599775820970535);
let rotMat = new THREE.Matrix3().identity();
let rot = new THREE.Matrix4().identity().setFromMatrix3(rotMat);
let g = new THREE.SphereGeometry(1, 36, 18);
g.scale(halfSize.x, halfSize.y, halfSize.z);
let obj = new THREE.Mesh(g, new THREE.MeshNormalMaterial());
obj.position.set(4.453294992446899, 7.885950803756714, 0.4816467687487602);
obj.rotation.setFromRotationMatrix(rot);
obj.updateMatrixWorld();
scene.add(obj);
let gH = new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3(1, 1, 1),
new THREE.Vector3(1, 1, -1),
new THREE.Vector3(1, -1, -1),
new THREE.Vector3(1, -1, 1),
new THREE.Vector3(-1, 1, 1),
new THREE.Vector3(-1, 1, -1),
new THREE.Vector3(-1, -1, -1),
new THREE.Vector3(-1, -1, 1)
]);
gH.setIndex([
0, 1, 1, 2, 2, 3, 3, 0,
4, 5, 5, 6, 6, 7, 7, 4,
0, 4, 1, 5, 2, 6, 3, 7
])
let mH = new THREE.LineBasicMaterial({ color: "yellow" });
let oH = new THREE.LineSegments(gH, mH);
oH.scale.copy(halfSize);
oH.position.copy(obj.position);
oH.rotation.setFromRotationMatrix(rot);
scene.add(oH);
renderer.setAnimationLoop(_ => {
renderer.render(scene, camera);
});
</script>