2l4u.RU - Cоздание игр ОНЛАЙН: Создаём WebGL сцену на странице

четверг, 7 февраля 2013 г.

Создаём WebGL сцену на странице

Я уже писал, что для создания WebGL нужно, чтобы у вас был новый FireFox или Chrome.

Теперь нужно создать папку и положить в неё файл three.js
После этого, в этой папке нужно создать текстовой файл и вставить следующий код:

<script src="three.min.js"></script>

<body>
       <script>

           var container, stats;
            var camera, scene, renderer;
            var cube, plane;

            var targetRotation = 0;
            var targetRotationOnMouseDown = 0;
            var mouseX = 0;
            var mouseXOnMouseDown = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init();
            animate();

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.y = 150;
                camera.position.z = 500;

                scene = new THREE.Scene();

                // Cube

                var materials = [];

                for ( var i = 0; i < 6; i ++ ) {

                materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );

                }

                cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
                cube.position.y = 150;
                scene.add( cube );

                // Plane

                plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
                plane.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
                scene.add( plane );

                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );

                container.appendChild( renderer.domElement );



                document.addEventListener( 'mousedown', onDocumentMouseDown, false );
                document.addEventListener( 'touchstart', onDocumentTouchStart, false );
                document.addEventListener( 'touchmove', onDocumentTouchMove, false );


                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }




            function onDocumentMouseDown( event ) {

                event.preventDefault();

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mouseup', onDocumentMouseUp, false );
                document.addEventListener( 'mouseout', onDocumentMouseOut, false );

                mouseXOnMouseDown = event.clientX - windowHalfX;
                targetRotationOnMouseDown = targetRotation;

            }


            function onDocumentMouseMove( event ) {

                mouseX = event.clientX - windowHalfX;

                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

            }

            function onDocumentMouseUp( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

            }

            function onDocumentMouseOut( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

            }

            function onDocumentTouchStart( event ) {

                if ( event.touches.length === 1 ) {

                    event.preventDefault();

                    mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotationOnMouseDown = targetRotation;

                }

            }

            function onDocumentTouchMove( event ) {

                if ( event.touches.length === 1 ) {

                    event.preventDefault();

                    mouseX = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

                }

            }




            function animate() {

                requestAnimationFrame( animate );

                render();


            }

            function render() {

                plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
                renderer.render( scene, camera );

            }

</script>

        <p></head><br>
        <body></p>

</body>

После этого сохранить и запустить это файл с помощью Гугл Хром или ФайрФокс

Результат можно посмотреть здесь:
http://2l4u.ru/pub/cube.html

Куб можно вращать мышкой...
Если проанализировать код, то он оказывается очень прозрачным.

Всего две необычных функции
init(); и animate();

В inite создаётся камера, сцена, массив материалов на каждую сторону куба. Кубу присваиваются материалы, каждой стороне свой. Создаётся плоскость, присваивается материал. Плоскость в нашем случае играет роль тени. Плоскость вращается вместе с кубом.
Создаются слушатели событий, нужные чтобы перехватить нажатия мыши. Создаётся рендер, для трансляции сцены, присваивается слою... всё!

Напоминаю, что WebGL технология новая и работает преимущественно в новом Google Chrome!

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)