CODEWITHSUNDEEP
javascripthtmlthree.js
Muteking
Muteking

Reputation: 1513

Wrong shape of SphereGeometry in three.js

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()

Upvotes: 0

Views: 106

Answers (1)

huangyu ma
huangyu ma

Reputation: 26

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.

Upvotes: 1

Related Questions