I've made a Rolex cube kind of geometry with difference in "Z axis" between each layer. Now I want to change the camera position so that I could check the geometry is exactly what I was expecting. My question is how to change the camera position while dragging the window and also should be able manipulate the rotation of each individual cone based on mouse event.

Here is my jsfiddle Link: /

sample code but please make sure you visit jsfiddle to get detail idea of my question:

for ( var i = 0; i <nSize; i++)
{
    var k = i%10,
        j = (i-k)/10;

    j = j*2 - 10;
    k = k*2 - 10;

    var cone1 = lc_relationship.sensor1[i].Geometry; 
    scene.add(cone1);
    var cone2 = lc_relationship.sensor2[i].Geometry;
    scene.add(cone2);
    var cone3 = lc_relationship.sensor3[i].Geometry;
    scene.add(cone3);
    cone1.position.set(j, k, lc_relationship.sensor1[i].z_cordinate);
    cone2.position.set(j, k, lc_relationship.sensor2[i].z_cordinate);
    cone3.position.set(j, k, lc_relationship.sensor3[i].z_cordinate);
}

If someone could update my jsfiddle or provide me help is enough.

Thanks in advance.

I've made a Rolex cube kind of geometry with difference in "Z axis" between each layer. Now I want to change the camera position so that I could check the geometry is exactly what I was expecting. My question is how to change the camera position while dragging the window and also should be able manipulate the rotation of each individual cone based on mouse event.

Here is my jsfiddle Link: http://jsfiddle/sagh0900/gfraQ/8/

sample code but please make sure you visit jsfiddle to get detail idea of my question:

for ( var i = 0; i <nSize; i++)
{
    var k = i%10,
        j = (i-k)/10;

    j = j*2 - 10;
    k = k*2 - 10;

    var cone1 = lc_relationship.sensor1[i].Geometry; 
    scene.add(cone1);
    var cone2 = lc_relationship.sensor2[i].Geometry;
    scene.add(cone2);
    var cone3 = lc_relationship.sensor3[i].Geometry;
    scene.add(cone3);
    cone1.position.set(j, k, lc_relationship.sensor1[i].z_cordinate);
    cone2.position.set(j, k, lc_relationship.sensor2[i].z_cordinate);
    cone3.position.set(j, k, lc_relationship.sensor3[i].z_cordinate);
}

If someone could update my jsfiddle or provide me help is enough.

Thanks in advance.

• javascript
• webgl
• three.js

1 Answer 1

I use a empty (null) mesh to add objects instead scene: Mesh

mesh = new THREE.Mesh(new THREE.Geometry());
scene.add(mesh);
/*[...]*/
mesh.add(cone1);
/*[...]*/
mesh.add(cone2);
/*[...]*/
mesh.add(cone3);
/*[...]*/

And add this to rotate this mesh:

var screenW = window.innerWidth;
var screenH = window.innerHeight; /*SCREEN*/
var spdx = 0, spdy = 0; mouseX = 0, mouseY = 0, mouseDown = false; /*MOUSE*/
document.addEventListener('mousemove', function(event) {
    mouseX = event.clientX;
    mouseY = event.clientY;
}, false);
document.body.addEventListener("mousedown", function(event) {
    mouseDown = true
}, false);
document.body.addEventListener("mouseup", function(event) {
    mouseDown = false
}, false);
function animate() {    
    spdy =  (screenH / 2 - mouseY) / 40;
    spdx =  (screenW / 2 - mouseX) / 40;
    if (mouseDown){
        mesh.rotation.x = spdy;
        mesh.rotation.y = spdx;
    }
}

Test: http://jsfiddle/gfraQ/11/