Холст Threejs не уменьшается при повороте телефона назад
Я использую три библиотеки js, когда я поворачиваю свой телефон, мой компонент в основном увеличивает его размер, но когда я переворачиваю телефон назад, он не меняется обратно, это искажает мою страницу, и половина компонента выходит за пределы страницы, как это сделать отзывчивый?
import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { useEffect, useRef } from "react";
export default function THREE_scene({container}) {
const sizes = {
width:window.innerWidth,
height: 700,
};
const canvas = useRef(null);
const scene = new THREE.Scene();
const loader = new GLTFLoader();
const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height);
var renderer;
camera.position.set(35.6, 37.8, -24.5);
camera.lookAt(-2.28, 0.75, 2.47);
const light = new THREE.PointLight("#FFFFFF", 1000, 100);
light.position.set(20, 28, -10);
scene.add(light);
scene.add(camera);
scene.background = new THREE.Color("#000000");
function init() {
renderer = new THREE.WebGLRenderer({ canvas: canvas.current });
renderer.setSize(sizes.width, sizes.height);
camera.updateProjectionMatrix();
camera.aspect = sizes.width / sizes.height;
}
loader.load("./globe.glb", (gtlf) => {
scene.add(gtlf.scene);
renderer.setAnimationLoop(animate);
});
function animate(timestamp) {
renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera);
scene.children[2].children[0].rotation.y = timestamp / 10000;
}
window.addEventListener("resize", () => {
init()
canvas.current.width = window.innerWidth;
canvas.current.height=window.innerHeight
sizes.width = window.innerWidth;
camera.aspect = sizes.width / sizes.height;
renderer.setSize(sizes.width, sizes.height);
camera.updateProjectionMatrix();
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.render(camera,scene)
});
useEffect(() => {
init();
});
return (
<div>
<canvas id = "webgl" ref = {canvas}></canvas>
</div>
);
}
введите сюда описание изображения
.................................................. .....
Ответы 1
Попробуйте добавить эту функцию и хук эффекта. И настоятельно рекомендуется использовать в вашем сценарии R3F. Хотя бы потому, что в вашем случае Canvas там изначально адаптивный.
function respCanvas() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
useEffect(() => {
init();
window.addEventListener("resize", respCanvas);
return () => {
window.removeEventListener("resize", respCanvas);
};
}, []);
ОБНОВЛЕНИЕ 0
Я подозревал, что вы это имели в виду… и это создает довольно большую головную боль, когда у вас много объектов на холсте. Если это один, то это не имеет большого значения, но если у вас их много, ну, в любом случае.
В этом сценарии масштабирование холста будет определять реакцию внутри этого холста.
Итак, вам придется отдельно настраивать холст и объекты, в вашем случае глобус.
Вы можете сделать это в ванили, а также в GSAP, чтобы слушать изменение размера.
И в этом случае R3F вам тоже не поможет, все равно лучше его использовать, но там изначально отзывчивый Canvas, а не объекты.
let model;
let landscapeScale = 15;
let portraitScale = 2;
//…
function resizeModel() {
if (window.innerWidth > window.innerHeight) {
model.scale.set(landscapeScale, landscapeScale, landscapeScale);
} else {
model.scale.set(portraitScale, portraitScale, portraitScale);
}
}
useEffect(() => {
init();
window.addEventListener("resize", () => {
resizeCanvas();
resizeModel();
});
window.addEventListener("orientationchange", () => {
resizeModel();
});
return () => {
window.removeEventListener("resize", resizeCanvas);
window.removeEventListener("orientationchange", resizeModel);
};
}, []);
https://codepen.io/Lucas_Mas/full/BaeZYxO
@TakeshiSzentagothai Ммм, что значит «льстить»? Я подозреваю, что вы имеете в виду. Однако можете ли вы создать CodePen для решения этой проблемы?
Не могу развернуть реакцию на codepen. Вместо этого у меня есть это. Хотя здесь не описана «плоская» проблема, но это демонстрирует мою проблему, если вы используете телефон и переворачиваете его. dml199.github.io/fin_adv
Я прикрепил файл с проблемой под изображением.
@TakeshiSzentagothai По моему мнению, приложение по вашей ссылке работает именно так, как должно… Вы говорите о глобусе, потому что он не подходит к портрету?
Да, когда я поворачиваю холст телефона, масштабируется, чтобы соответствовать размеру, когда я поворачиваюсь назад, он не масштабируется, а только компоненты страницы, поэтому он выходит за пределы размера страницы.
Сейчас то же самое, но объект стал более плоским