0
191
Views¿Cómo visualizar PerspectiveCamera de los tres.js?
Estaba leyendo el tutorial sobre cómo dibujar líneas en la documentación de three.js y el código utilizado se veía así:
El código está bien y no tiene problemas.
<html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="///C:/Users/pc/Desktop/threejs_tutorial/build_threejs.html"></script> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 ); camera.position.set( 0, 0, 100 ); camera.lookAt( 0, 0, 0 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); //create a blue LineBasicMaterial const material = new THREE.LineBasicMaterial( { color: 0x0000ff } ); const points = []; points.push( new THREE.Vector3( - 10, 0, 0 ) ); points.push( new THREE.Vector3( 0, 10, 0 ) ); points.push( new THREE.Vector3( 10, 0, 0 ) ); const geometry = new THREE.BufferGeometry().setFromPoints( points ); const line = new THREE.Line( geometry, material ); scene.add( line ); renderer.render( scene, camera ); </script> </body> </html>Pero lo que me llamó la atención es la parte del código PerspectiveCamera.
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );El primer número es el campo de visión, el segundo número es la relación de aspecto, el tercer número es la distancia desde la cámara hasta el plano de visión cercano y el cuarto es la distancia desde la cámara hasta el plano de visión lejano.
¿Cómo visualizamos la PerspectiveCamera de los tres.js? ¿Se parece a este que imaginé?
1 answers
Answer question0
Visualizar PerspectiveCamera de three.js realmente se ve así:
truePerspectiveCameraVisualization
La altura se determina mediante trigonometría si se conocen la distancia desde la cámara hasta el plano de visión cercano y el ángulo del campo de visión.
El ancho está determinado por la altura multiplicada por la relación de aspecto w = h * (innerW / innerH).