Здравствуйте, есть ли способ перерисовать сферу? Проблема в том, что когда пользователь меняет размер окна, нужно менять размеры сферы. Размер сферы в свою очередь зависит от размера канваса (высота, ширина окна). Возможно ли перерерисовать сферу не влезая в DOM(сфера начинает глючить)?
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.domElement.className = 'deadstar';
const a = document.getElementById('egg')
a.appendChild(renderer.domElement);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
let tex = new THREE.TextureLoader().load(
"https://solarsystemmm.github.io/3D/texture-moon.png"
);
tex.minFilter = THREE.LinearFilter;
let sphereGeom = new THREE.SphereBufferGeometry(0.7, 32, 32);
let innerSphere = new THREE.Mesh(
sphereGeom,
new THREE.MeshLambertMaterial({
map: tex,
})
);
innerSphere.scale.set(4, 4.5, 4);
scene.add(innerSphere);
window.addEventListener("mousemove", rotating, false);
let rotationFactorY = 0.08;
let rotationFactorX = 0.08;
const maxRotationSpeed = 0.1;
function rotating(e) {
rotationFactorY = 0.2 * (e.clientX - window.innerWidth / 2) / window.innerWidth;
rotationFactorX = 0.2 * (e.clientY - window.innerHeight / 2) / window.innerHeight;
}
let light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.y = window.innerHeight / 2;
light.position.z = window.innerHeight / 1.4;
scene.add(light);
renderer.setAnimationLoop(() => {
innerSphere.rotation.y += maxRotationSpeed * rotationFactorY;
renderer.render(scene, camera);
});
// не работает
window.addEventListener('resize', function (event) {
scene.remove(innerSphere)
});