Есть объект в сцене children[6] его нужно повернуть относительно его же оси, а не глобальной оси координат. Но ось нужно сместить к краю объекта.
-
1А можно ли где-то посмотреть на минимальный воспроизводимый пример?– prisoner84912 апр 2018 в 6:12
-
Мой проект archivisions.github.io/index.html копия из apps.muellerinc.com/design– Max KievSky12 апр 2018 в 9:52
-
в проекте apps.muellerinc.com/design ползунок pitch отвечает за наклон крыши. вот его мне и нужно скопировать. (сделать на своем проекте)– Max KievSky12 апр 2018 в 10:00
-
благодарю. стало понятнее )– prisoner84912 апр 2018 в 14:44
-
Скачал конфигуратор, там нашел main.js dropmefiles.com/itTae там наверняка есть то что нужно. но пока сложно понять как срабатывает изменение угла.– Max KievSky12 апр 2018 в 16:12
Добавить комментарий
|
1 ответ
Безотносительно исходного кода в приведенных ссылках, изменение высоты в зависимости от угла - сплошная тригонометрия:
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>
-
курто. а можешь объяснить (в комментариях) построчно или по циклам что - где происходит в твоем коде? СПС! 12 апр 2018 в 23:13
-
1