Как отключить масштабирование объекта в three.js

Рейтинг: 0Ответов: 1Опубликовано: 13.04.2023

Пишу код для игральной кости. При изменении ширины экрана и перезагрузке страницы куб становится непропорциональным, т.е как-то сам масштабируется. Можно это как-то отключить? Код создания куба:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(400, 400);

var material = [
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_1.png') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_6.png') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_3.png') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_4.png') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_5.png') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_2.png') })
];
var cube = new THREE.Mesh(new THREE.BoxGeometry(3.5, 3.5, 3.5), material);

scene.add(cube);

camera.position.z = 5;
javascript html 3d three.js
Источник: Stack Overflow на русском

Ответы

▲ 0Принят
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / 
window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({ canvas: 
document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

var material = [
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_1.png') }),
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_6.png') }),
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_3.png') }),
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_4.png') }),
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_5.png') }),
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/texture/dice_2.png') })
];
var cube = new THREE.Mesh(new THREE.BoxGeometry(3.5, 3.5, 3.5), material);

scene.add(cube);

camera.position.z = 5;

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize, false);