Question

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

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

所以我花了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>

Answer 2

另一个选择：

var container = new THREE.Object3D()
var boxMesh = new THREE.Mesh(new THREE.BoxGeometry(1,1,1));
boxMesh.position.set(0.5,0.5,0.5)
container.add(boxMesh)

scene.add(container)

container.scale.set(strength,200,200);

https://en.wikipedia.org/wiki/Scene_graph

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

2 个答案: