javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - geometry - cube</title>
        <meta charset="utf-8">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

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

        <script>

            var camera, camera2, scene, renderer;
            var mesh, texture;

            init();
            animate();

            function init() {

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth / 2, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                renderer2 = new THREE.WebGLRenderer();
                renderer2.setPixelRatio( window.devicePixelRatio );
                renderer2.setSize( window.innerWidth / 2, window.innerHeight );
                document.body.appendChild( renderer2.domElement );

                //

                camera = new THREE.PerspectiveCamera( 70, (window.innerWidth / 2) / window.innerHeight, 1, 1000 );
                camera.position.z = 400;

                camera2 = new THREE.PerspectiveCamera( 100, (window.innerWidth / 2) / window.innerHeight, 1, 1000 );
                camera2.position.z = 400;

                scene = new THREE.Scene();

                var geometry = new THREE.BoxGeometry( 200, 200, 200 );

                texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
                texture.anisotropy = renderer.getMaxAnisotropy();

                var material = new THREE.MeshBasicMaterial( { map: texture } );

                mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );

                //

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

            }

            function onWindowResize() {

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

                renderer.setSize( window.innerWidth / 2, window.innerHeight );
                renderer2.setSize( window.innerWidth / 2, window.innerHeight );

            }

            var i = 0;
            function animate() {

                requestAnimationFrame( animate );

                mesh.rotation.x += 0.005;
                mesh.rotation.y += 0.01;

                i += 1;
                mesh.material.color.setHex(0xffff00 + Math.sin(i / 100) * 128 + 128);

                renderer.render( scene, camera );
                renderer2.render( scene, camera2 );

            }

        </script>

    </body>
</html>