我是 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 ?)
这种算法的名称是什么,我可以在哪里找到很好的资源来学习这个目的(初学者)?
最佳答案
此外,您可以使用 .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>
关于javascript - Three.js 仅从一侧增加盒子几何形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51786580/