Geek asks and answers

CSS 3D Full Page - Camera Implementation

I want my page to be fully 3D space, I don't know much about 3d, but my idea is to have the body as my port view, and the world is the div where my converted content is located. I need a function that takes an orientation and a position vector (or a camera object?) As a parameter and internally with CSS transformations, it transforms the world of the div, so the screen refers to the desired part of the page. Sample page, simple room.

<body>
    <div id="world">
        <section id="left-wall">...</section>
        <section id="right-wall">...</section>
        <section id="front-wall">...</section>
        <section id="floor">...</section>
    </div>
</body>

script.

var cam = Camera(),
    world = document.getElementById("world");
cam.setPosition([x,y,z]);
cam.setOrientation([x,y,z]);
transform(world,cam); // world gets transformed

How could a function be transform()? I am not sure if this is the right approach or if I will do it differently.

+5
source share
1 answer

Keith Clark CSS3 , , HTML, :

<div id="viewport">
    <div id="camera">
        <div id="assembly">
            <!-- Geometry elements inside here -->
        </div>
    </div>
</div>

"" , "", . , -3d , :

#viewport {
    -webkit-perspective: 700px;
}
#camera {
    -webkit-transform-style: preserve-3d;
}

, , 3D- - preserve-3d.

:

function transform(cameraElem, assemblyElem, camera) {
    var orient = camera.getOrientation();
    var pos = camera.getPosition();
    cameraElem.style.WebkitTransform = "rotateX(" + orient[0] + "deg) " + 
                                       "rotateY(" + orient[1] + "deg) " +
                                       "rotateZ(" + orient[2] + "deg)";
    assemblyElem.style.WebkitTransform = "translate3d(" + (-pos[0]) + "px, " +
                                                          (-pos[1]) + "px, " +
                                                          (-pos[2]) + "px)";
}

, HTML- WebKit, Mozilla ( ) .

+11

More articles:


All Articles