JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
<div id="container"></div>

CSS

#container {
    height: 400px;
    width: 800px;
    background-color:black;
}

JavaScript

// SCENE
var scene = new THREE.Scene();



var VIEW_ANGLE = 45,
    ASPECT = 2;
NEAR = .01;
FAR = 10000000;

var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);

// RENDERER
var renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
})
renderer.setSize(800, 400);
$('#container').append(renderer.domElement);

// AMBIENT LIGHT
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);


var sphere = new THREE.Mesh(new THREE.SphereGeometry(200, 32, 16), new THREE.MeshPhongMaterial({
    color: 0xffffff
}));
scene.add(sphere);

// THIS WORKS
//var position = new THREE.Vector3(0, 0, 0);

// THIS DOESN'T
var position = new THREE.Vector3(-83645,476449,412912);

sphere.position.copy(position);
camera.position.copy(position);
camera.position.setZ(position.z + 1000);
camera.lookAt(position);

$('#container').click(function (e) {
    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();

    mouse.x = (e.clientX / 800) * 2 - 1;
    mouse.y = -(e.clientY / 400) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    
    var intersects = raycaster.intersectObjects(scene.children, true);
    
    if(intersects.length)
        alert('hit');

    return null;
});

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();