Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 
adamdavi3s
Master
Master

simple on click

I am trying to add a simple on click event to some three.js to fire a function.

As this code stands, it seems to do my console.log on load but then not for any clicks


The relevant code is line 135 and also lines 168+

var _this = this;

  //setup html

  var html = "";

  //add a unique name to the extension in order to prevent conflicts with other extensions.

  //basically, take the object ID and add it to a DIV

  var divName = _this.Layout.ObjectId.replace("\\", "_");

  if (_this.Element.children.length == 0) { //if this div doesn't already exist, create a unique div with the divName

     var ui = document.createElement("div");

     ui.setAttribute("id", divName);

     _this.Element.appendChild(ui);

  } else {

     //if it does exist, empty the div so we can fill it again

     $("#" + divName).empty();

  }

  //****************************************************************************************************************

  //start your extension code here

  //****************************************************************************************************************

  //****************************************************************************************************************

  //Contained here is a nice simple example of drawing a sphere

  initscene(); //kick off the scene build function

  function initscene() {

     // set the scene size

     var WIDTH = 1000,

         HEIGHT = 700;

     // set some camera attributes

     var VIEW_ANGLE = 45,

         ASPECT = WIDTH / HEIGHT,

         NEAR = 0.1,

         FAR = 10000;

     // get the DOM element to attach to

     // - assume we've got jQuery to hand

     var $container = $("#" + divName);

     // create a WebGL renderer, camera

     // and a scene

     var renderer = new THREE.CanvasRenderer();

     renderer.setClearColor(0xff0000, 0); //clear the background

     var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);

     var scene = new THREE.Scene();

     // add the camera to the scene

     scene.add(camera);

     // the camera starts at 0,0,0

     // so pull it back

     camera.position.z = 300;

     // create a point light

     var pointLight = new THREE.PointLight(0xFFFFFF);

     // set its position

     pointLight.position.x = 10;

     pointLight.position.y = 50;

     pointLight.position.z = 10000;

     // add to the scene

     scene.add(pointLight);

     var particlesTotal = 20;

     var positions = [];

     var objects = [];

     var radius = 5,

         segments = 16,

         rings = 16;

     var current = 0;

     var sphereMaterial =

         new THREE.MeshLambertMaterial({

             color: 0xCC0000

         });

     for (var i = 0; i < particlesTotal; i++) {

         var object = new THREE.Mesh(new THREE.SphereGeometry(20 * Math.random(), segments, rings), sphereMaterial);

         object.position.x = Math.random() * 100,

             object.position.y = Math.random() * 100,

             object.position.z = Math.random() * 100;

         scene.add(object);

         objects.push(object);

     }

     renderer.setSize(WIDTH, HEIGHT);

     // attach the render-supplied DOM element

     $container.append(renderer.domElement);

     render();

     _this.click(onclicktest());

     /* var offset = current * particlesTotal * 3;

      var duration = 2000;

      for ( var i = 0, j = offset; i < particlesTotal; i ++, j += 3 ) {

      var object = objects[ i ];

      new TWEEN.Tween( object.position )

      .to( {

      x: positions[ j ],

      y: positions[ j + 1 ],

      z: positions[ j + 2 ]

      }, Math.random() * duration + duration )

      .easing( TWEEN.Easing.Exponential.InOut )

      .start();

      console.log(123);

      }*/

     function render() {

         renderer.render(scene, camera);

     }

  } //end initscene function

  function onclicktest() {

     console.log("got clicked");

  }

0 Replies