0 Replies Latest reply: Oct 5, 2016 8:53 AM by Adam Davies RSS

    simple on click

    Adam Davies

      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");
      
      
        }