0

Есть объект в сцене children[6] его нужно повернуть относительно его же оси, а не глобальной оси координат. Но ось нужно сместить к краю объекта.

выше превью, как хотелось бы чтобы работал поворот

5

1 ответ 1

2

Безотносительно исходного кода в приведенных ссылках, изменение высоты в зависимости от угла - сплошная тригонометрия:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 5, 10);
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);

var roofGeom = new THREE.PlaneGeometry(5, 5, 2, 1);
roofGeom.rotateX(-Math.PI * 0.5);

var roof = new THREE.Mesh(roofGeom, new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
scene.add(roof);

var params = {
  pitch: 40
}
var gui = new dat.GUI();
gui.add(params, "pitch", 20, 60).onChange(setHeight);

setHeight(params.pitch);

// Вся магия происходит в этой функции. В нее передается угол (в градусах)
function setHeight(value) {
  let angle = THREE.Math.degToRad(value); // преобразуем градусы в радианы
  // вся суть магии тут - чтобы найти длину противолежащего катета,
  // нужно длину прилежащего катета умножить на тангенс угла
  let height = Math.tan(angle) * 2.5; // 2.5 - половина ширины крыши в проекции на плоскость XZ
  // хак - я знаю, что в моей геометрии 6 точек и те, которые в середине, имеют индексы 1 и 4
  roofGeom.vertices[1].y = height;
  roofGeom.vertices[4].y = height;
  // здесь обязательно нужно ставить этот флаг в true, иначе никакого смещения точек не будет видно
  roofGeom.verticesNeedUpdate = true;
  // хороший тон - пересчитать нормали для того, чтобы тени отображались корректно 
  roofGeom.computeFaceNormals();
  roofGeom.computeVertexNormals();
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.min.js"></script>

2
  • курто. а можешь объяснить (в комментариях) построчно или по циклам что - где происходит в твоем коде? СПС! 12 апр 2018 в 23:13
  • 1
    @MaxKievSky Обновил ответ. Добавил комментарии в код сниппета. 13 апр 2018 в 7:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.