JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
JavaScript
var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 10E5);
camera.position.set(0, 500, -500);
camera.lookAt(new THREE.Vector3(0,0,0));
camera.updateProjectionMatrix();
function pointToScreen(point) {
var p = point.clone();
var vector = p.project(camera);
vector.x = (vector.x + 1) / 2 * window.innerWidth;
vector.y = -(vector.y - 1) / 2 * window.innerHeight;
return vector;
}
console.log(window.innerWidth, window.innerHeight);
console.log('Expected at (0, 0, 0):', window.innerWidth/2, window.innerHeight/2);
console.log('Actual at (0, 0, 0):', pointToScreen(new THREE.Vector3(0, 0, 0)).x, pointToScreen(new THREE.Vector3(0, 0, 0)).y);
console.log('Expected (1, 1, 1) to be in the top right of the screen')
console.log('Actual at (1, 1, 1):', pointToScreen(new THREE.Vector3(1, 1, 1)).x, pointToScreen(new THREE.Vector3(1, 1, 1)).y);