Estoy tratando de representar una esfera simple en three.js pero por alguna razón obtengo una forma distorsionada (es una especie de forma de barra vertical).
Aquí está mi 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>y el 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()Como muestra el documento, el segundo parámetro es incorrecto en su código
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.