javascript - 如何居中和缩放对象threejs

标签 javascript html 3d three.js

我正在使用以下代码来缩放和居中使用 ObjectLoader 加载的 msgpack 压缩对象,但它无法正常工作。我认为我的对象有旋转,因此导致奇怪的行为。在某些对象上,它成功居中,但在其他对象上居中偏移并且缩放也不正确。

在此片段中,result 是来自 ObjectLoader 的场景。我的想法是该对象的结构不是很好,但我不确定。我希望图像上的表格或任何其他用户输入的网格位于网格的顶部,居中并缩放,以便最大尺寸为 1 个单位。

每个正方形的尺寸为 0.25,轴位于 0,0,0 http://i.stack.imgur.com/fkKYC.png

    // result is a threejs scene        
    var geometry = result.children[0].geometry;
    var mesh = result.children[0];
    geometry.computeBoundingBox();
    var middle = new THREE.Vector3();
    middle.x        = ( geometry.boundingBox.max.x + geometry.boundingBox.min.x ) / 2;
    middle.y        = -geometry.boundingBox.min.y;
    middle.z        = ( geometry.boundingBox.max.z + geometry.boundingBox.min.z ) / 2;
    middle.negate();
    mesh.position.copy(middle);
    // scales the mesh up to maxsize
    var maxSize = 1;
    // gets the biggest axis
    var maxVal = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
    if (maxVal < geometry.boundingBox.max.y - geometry.boundingBox.min.y) {
        maxVal = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
    }
    if (maxVal < geometry.boundingBox.max.z - geometry.boundingBox.min.z) {
        maxVal = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
    // scales the current size proportional to the maxval, times maxsize
    mesh.scale.divideScalar(maxVal * maxSize);

    self.scene.add(result);

最佳答案

而不是调用 geometry.computeBoundingBox(); 调用 geometry.center(); 然后你不需要 middle.xmiddle.z,您只需调用 mesh.translateY() 而无需摆弄 middle

关于javascript - 如何居中和缩放对象threejs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32058478/

相关文章:

javascript - 运行回归测试时不断出现 TypeError : config. suite.split is not a function

javascript - 显示具有相同属性值的对象中的最新条目

r - 使用 rgl grid3d 补全缺失的行

web - Web 浏览器的无标记 AR?

opengl - 如何剪切任意形状的纹理?

javascript - 使用 JS 和 CSS 使 header 仅适用于蜂窝媒体

javascript - 无法从 everyauth 获取自定义用户

javascript - 单击按钮时变量未更新?

javascript - 使用 html 表显示 MySql 数据

javascript - 动态附加内容(包括内联 JavaScript 和样式)时出现问题