Как ререндерить threeJs без удаления канваса из DOM?

Question

[js_123]

Здравствуйте, есть ли способ перерисовать сферу? Проблема в том, что когда пользователь меняет размер окна, нужно менять размеры сферы. Размер сферы в свою очередь зависит от размера канваса (высота, ширина окна). Возможно ли перерерисовать сферу не влезая в 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)
            });

Comments

[Kovalsky]

google -> "threejs resize"

[xmoonlight]

Kovalsky, гениально! ;)

[js_123]

xmoonlight, Не то слово (мне помогло)