javascript
/
three.js
spegling av https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<!DOCTYPE html>
<html lang="en">
<head>
    <title>Proof of Concept VRML loading with ThreeJs and VrmlParser</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display: block;
        }

        #info a, .button {
            color: #f00;
            font-weight: bold;
            text-decoration: underline;
            cursor: pointer
        }
    </style>

</head>

<body>
<div id="info">
    <a href="http://threejs.org" target="_blank">three.js / VrmlParser</a> -
    vrml format loader test using VrmlParser -
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js"></script>

<script src="vrml.js"></script>
<script src="Renderer/ThreeJsRenderer.js"></script>

<script type="x-shader/x-vertex" id="vertexShader">

      			varying vec3 vWorldPosition;

      			void main() {

      				vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
      				vWorldPosition = worldPosition.xyz;

      				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

      			}


</script>

<script type="x-shader/x-fragment" id="fragmentShader">

      			uniform vec3 topColor;
      			uniform vec3 bottomColor;
      			uniform float offset;
      			uniform float exponent;

      			varying vec3 vWorldPosition;

      			void main() {

      				float h = normalize( vWorldPosition + offset ).y;
      				gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( h, exponent ), 0.0 ) ), 1.0 );

      			}


</script>
<script>

    var container, stats;

    var camera, controls, scene, renderer;

    var cross;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e10);
        camera.position.z = 6;

        scene = new THREE.Scene();

        scene.fog = new THREE.Fog(0xffffff, 1, 5000);
        scene.fog.color.setHSL(0.6, 0, 1);

        scene.add(camera);

        // light

        var dirLight = new THREE.DirectionalLight(0xffffff);
        dirLight.position.set(200, 200, 1000).normalize();

        var ambientLight = new THREE.AmbientLight(0x444444);
        dirLight.position.set(-200, -200, 1000).normalize();

        camera.add(dirLight);
        scene.add(ambientLight);
        camera.add(dirLight.target);

        // VRML parser example:
        var xhrLoader = new THREE.XHRLoader();
        // onLoad, onProgress, onError
        xhrLoader.load('example.wrl', function (data) {
            try {
                var tree = vrmlParser.parse(data);
            } catch ( e ) {
                console.log('Exception with message ' + e.message);

                if ( undefined !== e.location ) {
                    console.log('Exception at location start: offset: ' + e.location.start.offset + ' line: ' + e.location.start.line + ' column: ' + e.location.start.column);
                    console.log('Exception at location end: offset: ' + e.location.end.offset + ' line: ' + e.location.end.line + ' column: ' + e.location.end.column);
                }

                return;
            }
            console.log(tree);
            var renderer = new VrmlParser.Renderer.ThreeJsRenderer();
            renderer.render(tree, scene);

        }, function () {
        }, function (error) {
            var request = error.target;
            if ( 404 === request.status ) {
                console.log('VRML Document not found at ' + request.responseURL);
            }
            console.log(error);
        });

        // renderer

        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor(0x000000, 1);
        renderer.setSize(window.innerWidth, window.innerHeight);

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

        //

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

    }

    function onWindowResize() {

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

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


    }

    function animate() {

        requestAnimationFrame(animate);

        renderer.render(scene, camera);

    }

</script>

</body>
</html>