I'm having trouble rendering a simple sphere in three.js because it's appearing distorted (looking more like a vertical stick).
Below is my HTML code:
<!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 here's the javascript part:
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()