Three.js увеличивает геометрию бокса только с одной стороны

Я новичок в three.js, и моей первой функцией было создание геометрии коробки, которая может увеличиваться только с одной стороны.

Проблема: при увеличении ширины или высоты объекта две стороны автоматически увеличиваются.

jsFiddle Пример

Итак, я потерял 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?)

Как называется такой алгоритм, где я могу найти хорошие ресурсы для изучения этой цели (новичок)?

Непонятно, чего вы пытаетесь достичь. Вот три хороших ресурса: threejs.org/examples и: github.com/mrdoob/three.js/wiki/Getting-Started

manthrax 10.08.2018 15:25

Попробуйте с этой строкой и без нее в jsFiddle: mesh.applyMatrix( new THREE.Matrix4().makeTranslation( - strength + strength / 2, 0, 0 ) ); измените значение аргумента init (), чтобы понять.

user3703539 10.08.2018 15:38

Да, я вижу, что вы делаете странное преобразование меша ... но почему? и чего вы пытаетесь достичь на высоком уровне?

manthrax 10.08.2018 15:46

Нет, это моя полная функция, я добился того, что хотел! Я не могу этого понять: - сила + сила / 2 Почему это работает? и я ищу хорошие ресурсы, чтобы изучить алгоритм 3D-геометрии ... чтобы не искать формулу случайным образом

user3703539 10.08.2018 15:51

Это не совсем алгоритм. Это просто трансформация какая-то. Но я до сих пор не понимаю, ЧТО вы пытаетесь достичь. Если бы я понял, чего вы пытались достичь, я мог бы посоветовать вам более эффективные способы. Результат -strength + Strength / 2 зависит от приоритета оператора. Если вы заключите некоторые части выражения в круглые скобки, это может сделать его более понятным. как (-сила) + (сила / 2)

manthrax 10.08.2018 16:14

Вы пытаетесь масштабировать куб от его края, а не от его центральной точки?

manthrax 10.08.2018 16:15

Например. вы можете просто сместить куб в верхний левый угол, как вы это делаете сейчас ... например, .makeTranslation (100,100,100), а затем просто использовать mesh.scale.set (10,20,30) или что-то еще для управления масштабированием. .. Как правило, вы не хотите выполнять mesh.applyMatrix более одного раза ... поскольку это медленная операция, потому что она изменяет фактические вершины и приведет к дрейфу, если вы продолжите применять преобразования к вершинам снова и снова. Вместо этого вы хотите использовать mesh.scale и mesh.position для управления вещами, поскольку это отдельные значения, которые предназначены для динамического обновления.

manthrax 10.08.2018 16:19
1
7
893
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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

Ответ принят как подходящий

Кроме того, вы можете сдвинуть геометрию с помощью метода .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>

Мощный ! Не могли бы вы объяснить этот 2.5 + Math.sin(time) * 2, как вы находите такую ​​формулу? Спасибо!

user3703539 10.08.2018 19:05

@ user3703539 Пожалуйста :) Что ж ... Функция sinus дает вам значения в диапазоне от -1 до 1, поэтому, когда вы умножаете ее на 2, вы получите диапазон от -2 до 2) Я использовал 2 только в случай примера, чтобы показать, как все работает :)

prisoner849 10.08.2018 19:14

Другие вопросы по теме