JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
JavaScript
/* DEFAULT INITS */
let scene;
(function init() {
let camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 10;
camera.position.x = 10;
camera.position.y = 10;
scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement);
var axes = new THREE.AxesHelper(1);
scene.add(axes);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
})();
/* ==== OWN CODE HERE ==== */
// Returns the center point of the 3D mesh object
function getCenterPointOfMesh(mesh) {
var box = new THREE.Box3().setFromObject(mesh);
var center = new THREE.Vector3();
box.getCenter(center);
return center;
}
let fromObject; // the 3D Mesh object, from which the rays are going to be casted, always the plane-kind
// Example of 3DMesh, some similar are in use, but as groups/inside the group loaded from json file
(function create_fromObject() {
let fromObject_geometry = new THREE.Geometry();
fromObject_geometry.vertices.push(new THREE.Vector3(0, 0, 0));
fromObject_geometry.vertices.push(new THREE.Vector3(0, 1, 0));
fromObject_geometry.vertices.push(new THREE.Vector3(0, 1, 1));
fromObject_geometry.vertices.push(new THREE.Vector3(0, 1, 1));
fromObject_geometry.vertices.push(new THREE.Vector3(0, 0, 1));
fromObject_geometry.vertices.push(new THREE.Vector3(0, 0, 0));
fromObject_geometry.faces.push(new THREE.Face3(0, 1, 2));
fromObject_geometry.faces.push(new THREE.Face3(3, 4, 5));
fromObject_geometry.computeFaceNormals();
fromObject = new THREE.Mesh(fromObject_geometry, new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }));
scene.add(fromObject);
fromObject.position.x = 2;
fromObject.position.z = 2;
fromObject.position.y = 2;
})();
let sphere;// Creates Visual...