Three.Js - Width of View

Three.js - Width of view

You have to be precise here.

You can calculate the visible rectangular region given the camera's field-of-view, camera.fov, and a given distance, dist, from the camera.

Since the object presumably has depth, you have to pick one plane through the mesh, and do the calculation at that distance.

Here is how to calculate the visible height and width for a given distance dist from the camera.

var vFOV = THREE.MathUtils.degToRad( camera.fov ); // convert vertical fov to radians

var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

var width = height * camera.aspect;           // visible width

three.js r.117

Three.js set plane size to full view

82.842 is correct, but the field of view angle of the PerspectiveCamera is the angle on the y-axis (vertical).

To compute the field of view you have to use the tangents (tan). The field of view along the y axis is

fov_y = z * tan(angle / 2) * 2

Apply that to your code:

let ang_rad = 45.0 * Math.PI / 180;
let fov_y = 100 * Math.tan(ang_rad / 2) * 2;
var planeGeometry = 
    new THREE.PlaneGeometry(fov_y * window.innerWidth / window.innerHeight, fov_y);

Respectively

let ang_rad = camera.fov * Math.PI / 180;
let fov_y = camera.position.z * Math.tan(ang_rad / 2) * 2;
var planeGeometry = new THREE.PlaneGeometry(fov_y * camera.aspect, fov_y);

You can simplify the computation by retrieving the focal length (.getFocalLength ()) and the film height (.getFilmHeight()):

let fov_y = camera.position.z * camera.getFilmHeight() / camera.getFocalLength();
var planeGeometry = new THREE.PlaneGeometry(fov_y * camera.aspect, fov_y);

---

function init() {    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);    scene.add(camera);
    camera.position.x = 0;    camera.position.y = 0;    camera.position.z = 100;    camera.lookAt(scene.position); // (0, 0, 0)
    var renderer = new THREE.WebGLRenderer();    renderer.setClearColor(new THREE.Color(0xe3e3e3));    renderer.setPixelRatio(window.devicePixelRatio);    renderer.setSize(window.innerWidth, window.innerHeight);    renderer.shadowMap.enabled = true;
    var spotLight = new THREE.SpotLight(0xffffff);    spotLight.position.set(50, 50, 50);    spotLight.castShadow = true;    scene.add(spotLight);
    // I want to put Plane's size as full background. not (82, 82 * window.innerHeight / window.innerWidth)    let ang_rad = camera.fov * Math.PI / 180;    let fov_y = camera.position.z * Math.tan(ang_rad / 2) * 2;    var planeGeometry = new THREE.PlaneGeometry(fov_y * camera.aspect, fov_y);    var planeMaterial = new THREE.MeshLambertMaterial({color: 0x123abc});    var plane = new THREE.Mesh(planeGeometry, planeMaterial);    plane.receiveShadow = true;    plane.position.x = 0;    plane.position.y = 0;    plane.position.z = 0;
    scene.add(plane);
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.position.x = 2    cube.position.y = 10    cube.position.z = 2
    cube.castShadow = true
    scene.add(cube);
    document.getElementById("WebGL-output").appendChild(renderer.domElement);    renderer.render(scene, camera);}window.onload = init;

<script src="https://rawcdn.githack.com/mrdoob/three.js/r113/build/three.js"></script>#<div id="WebGL-output"></div>

How to make a Plain Three.js Canvas span across the view height and width of a webpage using React?

You should be able to use those same units and measurements, but using the native CSS instead of a JavaScript function, in the style prop:

vh(100) turns into 100vh, vw(100) to 100vw.

One reason the package may not be available is perhaps because it is meant to be used with React Native.

THREE.JS: Get object size with respect to camera and object position on screen

You can compute the visible height for a given distance from the camera using the formulas explained in Three.js - Width of view.

var vFOV = camera.fov * Math.PI / 180;        // convert vertical fov to radians
var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

In your case the camera FOV is 45 degrees, so

vFOV = PI/4. 

(Note: in three.js the camera field-of-view FOV is the vertical one, not the horizontal one.)

The distance from the camera to the front face (important!) of the cube is 750 - 500 - 50 = 200. Therefore, the visible height in your case is

height = 2 * tan( PI/8 ) * 200 = 165.69.

Since the front face of the cube is 100 x 100, the fraction of the visible height represented by the cube is

fraction = 100 / 165.69 = 0.60.

So if you know the canvas height in pixels, then the height of the cube in pixels is 0.60 times that value.

The link I provided shows how to compute the visible width, so you can do that calculation in a similar fashion if you need it.

---

Related Topics