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

Share Improve this question Follow edited Dec 27, 2012 at 16:20 three.jsaddict asked Dec 27, 2012 at 15:52 three.jsaddictthree.jsaddict 30522 gold badges99 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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/