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