using Node.setPosition seems to magnify the Node and changes the scale

[pandafinity]

If you have a Node with the following everything is ok:

Node.setAlign(0,0) .setOrigin(.5,.5) .setMountPoint(.5,.5) .setScale(1,1);

But since I need the Node to rotate I have to use 'setPosition' so have the following:

Node.setAlign(0,0) .setOrigin(.5,.5) .setMountPoint(.5,.5) .setScale(1,1) .setPosition(0, 0, 300);

This makes the Node bigger than it is - in fact makes the Node bigger than it's Parent Node.

[talves]

@pandafinity that is the way perspective works in 3d space. :)

Read: https://desandro.github.io/3dtransforms/docs/perspective.html

[trusktr]

@pandafinity Yep, when you have perspective enabled (with camera.setDepth(...)) then everything is realistically 3D, so if you bring it forward (.setPosition(0, 0, 300);) then it'll appear to get bigger just like you'd expect in a real 3D world.

Now, try animating it's rotation and you'll see the effect.

For example, paste the following into one of the code boxes on famous.org:

'use strict';

var famous = require('famous');

// Famous dependencies
var DOMElement = famous.domRenderables.DOMElement;
var FamousEngine = famous.core.FamousEngine;
var Camera = famous.components.Camera;

// Initialize with a scene; then, add a 'node' to the scene root
var scene = FamousEngine.createScene()

var camera = new Camera(scene);
camera.setDepth(500)

var logo = scene.addChild();

// Create an [image] DOM element providing the logo 'node' with the 'src' path
new DOMElement(logo, { tagName: 'img' })
    .setAttribute('src', './images/famous-logo.svg');

// Chainable API
logo
    // Set size mode to 'absolute' to use absolute pixel values: (width 250px, height 250px)
    .setSizeMode('absolute', 'absolute', 'absolute')
    .setAbsoluteSize(250, 250)
    // Center the 'node' to the parent (the screen, in this instance)
    .setAlign(0.5, 0.5)
    // Set the translational origin to the center of the 'node'
    .setMountPoint(0.5, 0.5)
    // Set the rotational origin to the center of the 'node'
    .setOrigin(0.5, 0.5);

// Add a spinner component to the logo 'node' that is called, every frame
var spinner = logo.addComponent({
    onUpdate: function(time) {
        logo.setRotation(0, time / 1000, 0);
        logo.requestUpdateOnNextTick(spinner);
    }
});

// Let the magic begin...
logo.requestUpdate(spinner);
FamousEngine.init();

Now the rotating logo actually looks 3D (which the example should've had by default, since it looks better).

[michaelobriena]

As everyone has mentioned this is intended. Objects closer to the camera will appear large than ones further away when perspective is applied. https://en.wikipedia.org/wiki/Vanishing_point

@pandafinity feel free to ask to have this reopen if you still have questions.

[pandafinity]

Actually seems I have not expressed myself properly. I 'get' what everyone is trying to say with regards to 'perspective' and the distance to the camera... and everyones example is based on one object on one node attached to the scene, with nothing else on the page.

What I am saying is that if you have a 'page' that has modules within (that build that page) you can't then have reusable modules. For Example....You have a page that has a section that has a grid of cells (photos or album covers for example), each cell in the grid has information on the back of each cell that is revealed if you rotate the grid cell. To have one page viewed on a tablet or website you can't have things zoomed in or 'jump out' of that page or module . So is everyone saying I can't have 3d transformation on any part of that page if I want to keep a 'page' look and feel?

If you were making a cartoon or computer animation you simply animate that one object and the rest of the screen (page) doesn't move...like a transparent overlay... Are you all saying that because everything in a Scene is based on 1 Z-Axis I can't do what I actually want?

[michaelobriena]

You can do this by having multiple scenes on your page.

[pandafinity]

Ahhhhhhh... ok. That helps a lot thank you - saves me focusing on the wrong things. Is there an equation to calculate the CPU overhead per Scene or is it based on Node numbers? Happy for you to close this as my problem is fixed with multiple Scenes.

Thank you :)

[michaelobriena]

Performance scales with number of nodes not scenes so feel free to spring up new ones where needed. Note that the number of DOM updates on a frame contributes more to the FPS than does number of nodes in the scene.

[michaelobriena]

That said, don't create extra nodes if you don't need to.

[michaelobriena]

Sorry for the miscommunication :)

[pandafinity]

Cheers, I appreciate you coming back to help :)

I'll go play and see what happens..

Thanks again!