javascript
/
three.js
peilaus alkaen https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
							<!DOCTYPE html>
<html lang="en">
<head>
    <title>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
        }

        #viewpoints {
            background-color: gray;
            z-index: 101;
            position: absolute;
            width: 140px;
            top: 10px;
            left: 10px;
            padding: 2px;
            border: 1px solid white;
        }

        #viewpoints div {
            width: inherit;
        }
    </style>

</head>

<body>
<div id="info">
    <a href="http://threejs.org" target="_blank">three.js / VrmlParser</a> -
    vrml format loader test using VrmlParser -
</div>
<div id="viewpoints">
    <h4>Viewpoints from the VRML file</h4>
</div>

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

<script src="js/loaders/VRMLLoader.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/controls/FlyControls.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/controls/TrackballControls.js"></script>

<script>

	var container;

	var camera, controls, scene, renderer, dirLight;

	var animation;

	// setup a clock
	var clock = new THREE.Clock();

	init();
	animate();

	function resetControls() {
		controls             = new THREE.FlyControls(camera);
		controls.rotateSpeed = 1;
		controls.zoomSpeed   = 0.2;
		controls.panSpeed    = 0.2;
		controls.enableZoom  = true;
		controls.enablePan   = true;
	}

	function setupLight() {
		if ( ! dirLight ) {
			dirLight = new THREE.DirectionalLight(0xaaaaaa);
			dirLight.position.set(500, 500, 1000).normalize();
			dirLight.castShadow = false;
		}
		camera.add(dirLight);
		camera.add(dirLight.target);
	}

	function selectViewpoint(event, vrmlConverter) {
		var viewpoint = event.target.dataset.name;
		console.log('clicked ' + viewpoint);
		camera = vrmlConverter.viewpoints[ viewpoint ].getCamera();
		setupLight();
		resetControls();
		animation.addClickSupport(camera, renderer);
	}

	function init() {
		camera            = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e5);
		camera.position.z = 4;
		camera.position.y = 3;
		camera.position.x = 0;

		scene = new THREE.Scene();

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

		scene.add(camera);

		setupLight();
		resetControls();

		var debug         = true;
		var vrmlConverter = new VrmlParser.Renderer.ThreeJs(debug);
		// renderer

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

		// add support for animation and interaction
		animation = new VrmlParser.Renderer.ThreeJs.Animation(debug);
		animation.addClickSupport(camera, renderer);

		// initialize the viewpoinst with the camera from the global scope
		vrmlConverter.viewpoints = {
			reset: {
				getCamera: function () {
					return this.camera;
				}, name: 'surrounding_reset', camera: camera
			}
		}; // key value store of cameras based on VRML viewpoint nodes, stored by their name.

		var vrmlLoader = new THREE.VRMLLoader(vrmlParser, new THREE.LoadingManager(), true);

		var onLoad = function (vrmlTree) {
            vrmlConverter.render(vrmlTree, scene);

			var viewpointSelector = document.getElementById('viewpoints');

			for ( a in vrmlConverter.viewpoints ) {
				if ( typeof a === 'string' ) {
					var option       = document.createElement('div');
					option.innerHTML = a;
					option.setAttribute('data-name', a);
					viewpointSelector.appendChild(option);
					option.addEventListener('click', function (event) {
						selectViewpoint(event, vrmlConverter);
					});
				}
			}

		};

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

		var onProgress = function () {

		}

		vrmlLoader.load('models/vrml/house.wrl', onLoad, onProgress, onError);

		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);
		var delta = clock.getDelta();
		if ( undefined !== controls ) {
			controls.update(delta);
		}
		animation.update(delta);
		renderer.render(scene, camera);
	}

</script>

</body>
</html>