I recently started using Threejs and encountered an issue with positioning geometry. I'm trying to place the geometry at the bottom with half of it cut off, so only half should be visible. However, when I use position.setY(-300), the geometry moves down but also stretches. I'm not sure what I'm doing wrong or how to position the geometry correctly without distorting its aspect ratio. Can someone help me solve this problem?
Here is the link to the fiddle and code: link to fiddle
var camera, scene, renderer;
var geometry, material, muesum;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 600;
scene = new THREE.Scene();
geometry = new THREE.IcosahedronGeometry(350, 2);
material = new THREE.MeshPhongMaterial({
wireframe: true,
});
muesum = new THREE.Mesh(geometry, material);
scene.add(muesum);
muesum.position.setY(-300);
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
muesum.rotation.x += 0.001;
muesum.rotation.y += 0.002;
renderer.clear();
renderer.render(scene, camera);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>