three.js 中的 SphereGeometry 形状错误

Question

我试图在 three.js 中渲染一个简单的球体，但由于某种原因我得到了一个扭曲的形状（它是一种垂直的棒状）。

这是我的 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>

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

Answer 1

如文档所示，您的代码中的第二个参数有误

   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.

three.js 中的 SphereGeometry 形状错误

Wrong shape of SphereGeometry in three.js

html

javascript

three.js