Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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");
}