event

by jscastro76

HTML

<script src="https://threejs.org/build/three.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  
  <canvas id="myCanvas"/>

CSS

body {
			background-color: #fff;
			margin: 0px;
			overflow: hidden;
		}

JavaScript

var mesh, renderer,
		  scene,
		  controls,
		  camera,
		  container = document.getElementById('myCanvas');

		//RENDERER
		renderer = new THREE.WebGLRenderer({
		  canvas: container,
		  antialias: true
		});
		//renderer.setClearColor(0x000000);
		renderer.setPixelRatio(window.devicePixelRatio); //device pixel ratio
		renderer.setSize(window.innerWidth, window.innerHeight); //canvas size

		init();

		function init() {


		  scene = new THREE.Scene();
		  scene.background = new THREE.Color(0x999999);
		  var light = new THREE.AmbientLight(0xffffff);
		  light.position.set(0.5, 1.0, 0.5).normalize();
		  scene.add(light);
		  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		  camera.position.fromArray([-20, 10, -140]);
		  scene.add(camera);

		  controls = new THREE.OrbitControls(camera, container);
		  controls.maxPolarAngle = Math.PI / 2.2;
		  controls.minPolarAngle = Math.PI / 2.2;
		  controls.minAzimuthAngle = -Math.PI * 1.1;
		  controls.maxAzimuthAngle = Math.PI * 1.1;

		  var gridHelper = new THREE.GridHelper(400, 40, 0x0000ff, 0x808080);
		  gridHelper.position.y = 0;
		  gridHelper.position.x = 0;
		  scene.add(gridHelper);

		  // geometry
		  var geometry = new THREE.SphereGeometry(20, 12, 8);

		  // material
		  var material = new THREE.MeshToonMaterial({
		    color: 0x00ffff,
		    opacity: 0.7,
		  });

		  // mesh
		  mesh = new THREE.Mesh(geometry, material);
      try {
      //mesh.addEventListener('ObjectChanged', onObjectChanged, false);
      } catch (e) {
      console.log(e);
      
      }
		  scene.add(mesh);
		  render();
		}

function onObjectChanged(e) {
			//console.log(e.detail.object);
		}


		function render() {
		  requestAnimationFrame(render);
		  //controls.update();
		  mesh.position.x -= 0.1;
      let e = new CustomEvent('ObjectChanged', { detail: { object: this }, bubbles: true, cancelable: true });
			mesh.dispatchEvent(e);
		  camera.lookAt(mesh.position);
		 ...