javascript - boundingSphere 为 null - TextGeometry，ThreeJS

Question

我是 ThreeJS 的新手，正在努力学习，所以我基本上创建了一个呈现 3D 的文本，我正在使用 TextGeometry，我需要该对象的大小(如宽度/高度)以始终将对象居中。

我正在尝试这样；

   var objToCenter = scene.getObjectById(textGeoID);
   var hey = objToCenter.geometry.boundingSphere.center.x;
   console.log(hey);

首先，我找到对象，然后将 boundingSphere.center.x 值分配给新变量。但是我收到“boundingSphere is null”错误。

当我尝试 console.log objectToCenter 时，对象在那里并且 boundingSphere 不是 null 但是当我尝试 objectToCenter.boundingSphere 它说空。有趣的是，当我进入控制台并编写这些行时，它工作得很好。

我的完整代码:(不知何故 fontloader 无法从源 url 加载字体，但它在 localhost 中工作，所以请在 localhost 中尝试代码，否则你看不到这里的文本)

// Scene, Camera, Renderer, GUI
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer( { antialias:true } );
var gui = new dat.GUI({name: 'Control Panel'});

// Renderer and Camera Settings
renderer.setSize( window.innerWidth, window.innerHeight-4 );
renderer.shadowMap.enabled = false;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild( renderer.domElement );
camera.position.set( 10, 10, 500 );

// Axiss Helper and Orbit Controls
var axesHelper = new THREE.AxesHelper( 500 );
scene.add( axesHelper );
var controls = new THREE.OrbitControls( camera, renderer.domElement );

// Variables for TextGeometry
var textData = {
    text: "Yunus Emre Uzun",
    size: 40,
    height: 5,
    curveSegments: 12,
    font: "helvetiker",
    weight: "regular",
    bevelEnabled: false,
    bevelThickness: 1,
    bevelSize: 0.5,
    bevelOffset: 0.0,
    bevelSegments: 3
};

var textGeoID = null;
function generateTextGeometry() {
    if (textGeoID!=null) {
        console.log('ID: ' + textGeoID);
        var object = scene.getObjectById(textGeoID);
        //console.log('Object:');
        //console.log(object);
        object.geometry.dispose();
        scene.remove(object);
    }
  
    var loader = new THREE.FontLoader();
    loader.load( 'https://clofro.com/cdn/fonts/helvetiker_regular.typeface.json', function ( font ) {
        var textGeometry = new THREE.TextGeometry( textData.text, {
            font: font,
            size: textData.size,
            height: textData.height,
            curveSegments: textData.curveSegments,
            bevelEnabled: textData.bevelEnabled,
            bevelThickness: textData.bevelThickness,
            bevelSize: textData.bevelSize,
            bevelOffset: textData.bevelOffset,
            bevelSegments: textData.bevelSegments
        } );
      
        var textMaterial = new THREE.MeshBasicMaterial( { color: 0x444444, wireframe: true } );
        var meshedObject = new THREE.Mesh( textGeometry, textMaterial );
        meshedObject.position.set(-212, -15, 20 /* 15 */);
        scene.add(meshedObject);
        textGeoID = meshedObject.id;
      
       
        centerTheText();
    } );
}

function centerTheText() {
    var objToCenter = scene.getObjectById(textGeoID);
    console.log('Object bellow is objToCenter and its id is: ' + objToCenter.id);
    console.log(objToCenter);
    console.log('Error bellow is for: objToCenter.geometry.boundingSphere.center.x');
    var hey = objToCenter.geometry.boundingSphere.center.x;
    console.log(hey);
}

generateTextGeometry();

gui.add(textData, 'text').onChange(generateTextGeometry);
gui.add(textData, 'size', 5, 100).onChange(generateTextGeometry);















// Add Point Light
var pointLight = new THREE.PointLight(0xffffff, 0.3); pointLight.position.set(50, 0, 150);
pointLight.castShadow = true;
pointLight.shadow.mapSize.width = 2048;
pointLight.shadow.mapSize.height = 2048;
scene.add(pointLight);
// Random colors
//pointLight.color.setHSL(Math.random(), 1, 0.5);

// Add Ambiant Light - halogen ambient light
var ambientLight = new THREE.AmbientLight(0xFFF1E0, 0.4);
scene.add(ambientLight);

var width = 450;
var height = 60;
var intensity = 0.8;
var rectLight = new THREE.RectAreaLight( 0xff0000, intensity,  width, height );
rectLight.position.set( 0, 0, 14 );
rectLight.rotation.y = 6.28;
rectLight.lookAt( 0,0,0 );
scene.add( rectLight )
gui.add(rectLight, 'intensity', 0,5);
rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
rectLight.add( rectLightHelper );








// Create BackBox Shape
var backBoxGeo = new THREE.BoxGeometry(500, 75, 10);
// Create BackBox Material, color, texture
var backBoxMat = new THREE.MeshStandardMaterial( { color: 0xdaf1f9, wireframe: false, flatShading: false } );
var backBox = new THREE.Mesh( backBoxGeo, backBoxMat );
backBox.receiveShadow = true;
scene.add(backBox);
backBox.position.set(0, 0, 0);









// Resize Renderer Function
window.addEventListener('resize', function() {
    renderer.setSize( window.innerWidth, window.innerHeight-4 );
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
});

// Update scene
var update = function() {
    controls.update();
};

// Draw scene
var render = function() {
    renderer.render( scene, camera );
};

// Frame loop (update, render, repeat)
var frameLoop = function() {
    requestAnimationFrame( frameLoop );
    update();
    render();
}

frameLoop();

* {
    margin: 0;
    padding: 0;
}
body { background-color: #000; }

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>threeJS</title>
    </head>
    <body>
      <script src="https://clofro.com/cdn/three.js"></script>
      <script src="https://clofro.com/cdn/dat.gui.min.js"></script>
      <script src="https://clofro.com/cdn/OrbitControls.js"></script>
    </body>
</html>

我和SS的解释；

截图一:

截图2:

为什么会发生？或者我可以使用其他东西来居中我的文本。(设置位置不是固定的，因为 0,0,0 对于框对象和文本是不同的)

Answer 1

当您创建 TextGeometry 的实例时，相应的边界球体尚不可用。但是，它由渲染器自动计算以进行视锥体剔除。

因此，如果您必须在几何体创建后立即访问其边界球体，请调用 objToCenter.geometry.computeBoundingSphere();。

现场演示:https://jsfiddle.net/zcn2tpqy/

three.js R107