I recently completed a project and went through an informative tutorial on three.js. However, I found the explanation lacking when it came to creating the perspective camera.
In my project, I placed an object at the default location of (0,0,0) in the scene, and then moved the camera back by 10 units to ensure visibility. I specified a near plane of 0.1 and a far plane of 1000. Despite this setup, I am unsure about which axis these planes are oriented on. None of the default object's axes are greater than or equal to 0.1, as required by the near and far planes for visibility.
Can someone clarify why the object is still visible in the scene, shed light on the orientation of the near and far planes, or provide a comprehensive resource that explains this concept effectively?
For those interested, here's the code snippet:
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);
// Setting initial object position at ( 0, 0, 0 ) and moving camera back slightly
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);
// Defining material with color and wireframe properties
let material = new THREE.MeshBasicMaterial({
color: 0xFF0000,
wireframe: true
});
// Cube creation
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Game Logic - rotating the cube
let update = function(){
cube.rotation.x += 0.01;
cube.rotation.y += 0.005;
};
// Render Scene
let render = function(){
renderer.render(scene, camera);
};
// Running the game loop for updating and rendering continuously
let gameLoop = function(){
requestAnimationFrame(gameLoop);
update();
render();
};
gameLoop();