PMVLedBulbEditor

by murgiaMarco

HTML

<html lang="en">
	<head>
		<title>three.js webgl - geometry hierarchy</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="https://threejs.org/files/main.css">
	</head>
	<body>

		<script type="module">



			import * as THREE from 'https://threejs.org//build/three.module.js';

			import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';

			let camera, scene, renderer, stats, group;

			let mouseX = 0, mouseY = 0;

			let windowHalfX = window.innerWidth / 2;
			let windowHalfY = window.innerHeight / 2;

        let materialLedOff = new THREE.MeshBasicMaterial( {color: 0x000000} );

        let materialLedOn = new THREE.MeshBasicMaterial( {color: 0xffffff} );
			
      
      let ledArray = [];
      
      
      init();
			animate();

			function init() {

        let  zDistance = 9;

			  let  hMax = 30;
        let  lMax = 10;
        
        let  space = 10;
        
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
        
        var commandAxe = (hMax < lMax) ? lMax : hMax;
        
				camera.position.z = zDistance * commandAxe;
camera.position.x += ((lMax * space)/2) - space;				
				/* camera.position.x = 0 */;
         
         camera.position.y += ((hMax * space)/2) - space;

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xffffff );
				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );

				const panel = new THREE.BoxBufferGeometry( lMax * space,  hMax * space , 2 );

				const led = new THREE.SphereGeometry( 5, 32, 32 );
        let materialPanel = new THREE.MeshBasicMaterial( {color: 0xFF232323} );


				group = new THREE.Group();
			        
       	const meshPanel = new THREE.Mesh( panel, materialPanel );
              meshPanel.position.x += ((lMax * space)/2) - space;;
              meshPanel.position.y += ((hMax *...