Three Test

This is not working right

by R Omer

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <script src="https://threejs.org/examples/js/controls/TransformControls.js"></script>
    
    <title>Raycaster</title>
</head>

<body>
  <canvas id="canvas"></canvas>
</body>

</html>

CSS

html,body {
  width: 100vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;
}

#canvas {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  border: 1px solid #fbfbfb;
}

JavaScript

var renderer, scene, camera, orbitControls, transformControls, geometry, material, INTERSECTED, selected, selectedBox, selectedBoxHelper, hoverBox, hoverBoxHelper, showHoverBox = true;
const pointer = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
var canvas = $("#canvas");
var width = canvas.width();
var height = canvas.height();
/*
____ ____ _  _ ____ ____ ____ 
|    |__| |\/| |___ |__/ |__| 
|___ |  | |  | |___ |  \ |  |
*/
  camera = new THREE.PerspectiveCamera(90, width / height, 1, 1000);
  camera.position.set(250, 50, 250);


function init() {

/*
____ ____ _  _ ___  ____ ____ ____ ____ 
|__/ |___ |\ | |  \ |___ |__/ |___ |__/ 
|  \ |___ | \| |__/ |___ |  \ |___ |  \ 
*/
  renderer = new THREE.WebGLRenderer({
    canvas: canvas[0],
    antialias: true,
    alpha: true
  });

  renderer.setSize(width, height);
/*
____ ____ ____ _  _ ____ 
[__  |    |___ |\ | |___ 
___] |___ |___ | \| |___
*/
  scene = new THREE.Scene();

/*
 __   __   __    ___    __ ___  __      
/  \ |__) |__) |  |    /    |  |__) |   
\__/ | \  |__) |  |    \__  |  | \  |__ 
*/

orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
        orbitControls.update();
        orbitControls.addEventListener( 'change', render );

/*
___ ____ ____ _  _ ____ ____ ____ ____ _  _    ____ ___ ____ _    
 |  |__/ |__| |\ | [__  |___ |  | |__/ |\/|    |     |  |__/ |    
 |  |  \ |  | | \| ___] |    |__| |  \ |  |    |___  |  |  \ |___ 
*/
    transformControls = new THREE.TransformControls( camera, renderer.domElement );
    transformControls.size = 0.6;
    transformControls.addEventListener( 'change', function ( event ) {
        selectedBox.setFromObject(selected, true);
        hoverBox.setFromObject(selected, true);
        animate();
    });
    transformControls.addEventListener( 'dragging-changed', function ( event ) {
        orbitControls.enabled = ! event.value;
    });
    transformControls.addEventListener('mouseDown', function () {
        showHoverBox =...