CODEWITHSUNDEEP
javascriptthree.jsparent-child
PritamP
PritamP

Reputation: 13

Parent child relationship in Three.js

I have created one Cube with width=2083, height =1987, depth =0. Then I have drawn another cube of height =40, width=80, depth =0 and made the second cube as a child of first cube.I have set position of child cube such as it will come inside parent cube .child cube's position is(x= -1210, y= -880)

        camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 8000;


        var parentCube = new THREE.Mesh(new THREE.BoxGeometry(2083,1987,0), new THREE.MeshBasicMaterial({color:0xaa00ff}));

        childCube = new THREE.Mesh(new THREE.BoxGeometry(80, 40, 0), new   THREE.MeshBasicMaterial({color: 0x00ff00}) );
        childCube.position.x = -1210;
        childCube.position.y = -880;
        childCube.position.z = 0;
        parentCube.add(childCube);

The problem is child cube gets drawn outside the parent cube.

Furthermore, if I remove parent child relationship then childCube gets drawn as expected inside the parentCube.

Upvotes: 1

Views: 2714

Answers (1)

bjorke
bjorke

Reputation: 3305

When you define a parent-child relationship, the child's position is relative to the parent.

So to place a child at the parent's center, use position (0,0,0)

Your example position is indeed outside the parent's bounds.

Upvotes: 2

Related Questions