three.js raycast test 2

by giladdarshan

HTML

<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
    body {
        margin: 0px;
        border: none;
        height: 100%;
        overflow: hidden;
        font-family: Futura, "Trebuchet MS", Arial, sans-serif;
        font-size: 24px;
        font-style: normal;
        font-variant: normal;
        font-weight: 700;
        line-height: 26.4px;
    }
</style>

<head></head>

<body>
</body>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
    {
        "imports": {
            "three": "https://threejs.org/build/three.module.js",
            "threeModules/": "https://threejs.org/examples/jsm/",
            "three-mesh-bvh": "https://giladdarshan.github.io/3dd_tests/three-mesh-bvh/three-mesh-bvh.module.js"
        }
    }
</script>
</html>

JavaScript

import * as THREE from 'three';
import {OrbitControls} from 'threeModules/controls/OrbitControls.js';
import * as BVH from 'three-mesh-bvh';

THREE.Mesh.prototype.raycast = BVH.acceleratedRaycast;
THREE.BufferGeometry.prototype.computeBoundsTree = BVH.computeBoundsTree;
THREE.BufferGeometry.prototype.disposeBoundsTree = BVH.disposeBoundsTree;

let camera, scene, renderer, ocontrols, localToCameraAxesPlacement, axesHelper;
function init() {
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xb0b0b0);

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
    camera.position.set(0, 50, 50);
    camera.lookAt(0, 0, 0);
    scene.add(camera);
    
    ocontrols = new OrbitControls( camera, renderer.domElement );;
    ocontrols.target.set(0, 0, 0);
    ocontrols.update();
    
    const gridHelperSize = 600;
    const gridHelperDivisions = 270;
    let gridHelper = new THREE.GridHelper(600, 270, "black", "gray");
    axesHelper = new THREE.AxesHelper(0.2);
      
    scene.add(gridHelper);
    // -1.3 * this.camera.aspect, -1.1, -2
    localToCameraAxesPlacement = new THREE.Vector3(-0.7 * camera.aspect, -0.6, -2);

    scene.add(axesHelper);
    
    animate();
}

function animate() {

    requestAnimationFrame(animate);
    ocontrols.update();
    camera.updateMatrixWorld();
    let axesPlacement = camera.localToWorld(localToCameraAxesPlacement.clone());
    axesHelper.position.copy(axesPlacement);
    renderer.render(scene, camera);

}

init();


let geometry = new THREE.CylinderGeometry( 5, 0, 10, 6 );
let material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
let mesh1 = new THREE.Mesh(geometry, material);
mesh1.position.set(0, -6,...