javascript - 使用透视相机时，近平面和远平面使用哪个轴？

Question

我创建了一个示例项目并阅读了一篇精彩的文章 tutorial在 Three.js 上，但在创建透视相机时没有很好地描述一件事。

当创建一个对象并将其添加到场景中的默认位置 (0,0,0) 并设置相机并将其向后移动 10 个单位以使该对象易于可见时，我指定了一个近平面和远平面0.1 和 1000。我不确定这是在哪个轴上指定的，但是无论在哪个轴上指定，默认对象上的任何轴都不可见 >= 0.1近平面和远平面指定可见对象必须位于这些平面之间。

有人可以解释为什么我的对象在场景中可见，近平面和远平面是哪个轴，或者提供一个非常有用的链接来描述它，因为我找不到可以很好解释的链接。

如果有兴趣，请输入以下代码。

import * as THREE from 'three';
import 'bootstrap';
import css from '../css/custom_css.css';

let scene = new THREE.Scene();

/* Constants */
let WIDTH = window.innerWidth;
let HEIGHT = window.innerHeight;

/* Camera */
let field_of_view = 75;
let aspect_ratio = WIDTH/HEIGHT;
let near_plane = 0.1;
let far_plane = 1000;
let camera = new THREE.PerspectiveCamera(field_of_view, aspect_ratio, near_plane, far_plane);
// every object is initially created at ( 0, 0, 0 )
// we'll move the camera back a bit so that we can view the scene
camera.position.set( 0, 0, 10 );

/* Renderer */
let renderer = new THREE.WebGLRenderer({antialias:true, canvas: my_canvas });
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0xE8E2DD, 1);

// Create the shape
let geometry = new THREE.BoxGeometry(1, 1, 1);
// Create a material, colour or image texture
let material = new THREE.MeshBasicMaterial( {
    color: 0xFF0000,
    wireframe: true
});

// Cube
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Game Logic
let update = function(){
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.005;
};

// Draw Scene
let render = function(){
  renderer.render(scene, camera);
};

// Run game loop, update, render, repeat
let gameLoop = function(){
    requestAnimationFrame(gameLoop);

    update();
    render();
};

gameLoop();

Answer 1

透视相机的近平面和远平面是相对于相机本身的，它们不在全局场景轴之一上。

在你的情况下，近平面是平面 0.1沿着相机的中心轴或“看”向量距相机的单位，远平面是平面 1000单位远。渲染的事物必须位于相机“视锥体”内的这两个平面之间。

因此，在您的示例中，由于相机正在查看该对象，并且该对象是 10单位之外，它位于视锥体内，因此可见。

请观看此 YouTube 视频以获得更直观的表示:https://www.youtube.com/watch?v=KyTaxN2XUyQ