I'm trying to render a simple sphere in three.js but for some reason I get a distorted shape (it's a sort of a vertical stick shape).
Here's my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visualizer</title>
<link rel="icon" type="image/png" href="favicon-32x32.png">
</head>
<body>
<script src="build/three.min.js"></script>
<script src="js/OrbitControls.js" ></script>
<script src="js/RGBELoader.js"></script>
<script src="js/GLTFLoader.js"></script>
<script src="js/index.js"></script>
</body>
</html>
and the js
let scene, camera, renderer, controls, pointlight;
function init() {
scene = new THREE.Scene()
renderer = new THREE.WebGL1Renderer({alpha:true,antialias:true})
renderer.setSize(window.innerWidth,window.innerHeight)
document.body.appendChild(renderer.domElement)
camera = new THREE.PerspectiveCamera(50,window.innerWidth,window.innerHeight,1,1000)
camera.position.set(0,0,500)
controls = new THREE.OrbitControls(camera, renderer.domElement)
pointlight = new THREE.PointLight(0xffffff,1)
pointlight.position.set(200,200,200)
scene.add(pointlight)
let ballGeo = new THREE.SphereGeometry(200,64,64)
let ballMat = new THREE.MeshPhysicalMaterial()
let ballMesh = new THREE.Mesh(ballGeo,ballMat)
scene.add(ballMesh)
animate()
}
function animate(){
controls.update()
renderer.render(scene, camera)
requestAnimationFrame(animate)
}
init()
As the doc show, the second parameter is wrong in your code
PerspectiveCamera( fov, aspect, near, far )
fov - vertical viewing angle of the camera cone
aspect- aspect ratio of camera visual cone
near- near clipping plane of camera viewing cone
far - far clipping plane of camera viewing cone.