javascript - Three.js 仅从一侧增加盒子几何形状

Question

我是 Three.js 的新手，我的第一个功能是创建一个只能从一侧增加的盒子几何形状。

问题:当您增加对象的宽度或高度时，两侧会自动增加。

jsFiddle Example

所以我花了 1 个小时来找到好的算法:

    geometry = new THREE.BoxGeometry(strength, 200, 200);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.applyMatrix( new THREE.Matrix4().makeTranslation( - strength + strength / 2, 0, 0 ) );

有人可以解释一下:- 强度 + 强度/2 (如果我将强度增加 1，则翻译只是 -0.5 而不是 -1 ？)

这种算法的名称是什么，我可以在哪里找到很好的资源来学习这个目的(初学者)？

Answer 1

此外，您可以使用 .translate() 方法移动几何图形，因此场景图中不会有容器对象:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var boxGeom = new THREE.BoxGeometry();
boxGeom.translate(0.5, 0.5, 0); // pivot point is shifted
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
scene.add(box);

var clock = new THREE.Clock();
var delta = 0;
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  delta = clock.getDelta();
  time += delta;

  box.scale.set(2.5 + Math.sin(time) * 2, 1.5, 1.5);

  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>