|
|
@@ -1,214 +1,214 @@
|
|
|
<!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
|
|
|
+ <head>
|
|
|
+ <title>three.js webgl - loader - VRML</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;
|
|
|
}
|
|
|
- }; // key value store of cameras based on VRML viewpoint nodes, stored by their name.
|
|
|
|
|
|
- var vrmlLoader = new THREE.VRMLLoader(vrmlParser, new THREE.LoadingManager(), true);
|
|
|
+ #info {
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 100;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
|
|
|
- var onLoad = function (vrmlTree) {
|
|
|
- vrmlConverter.render(vrmlTree, scene);
|
|
|
+ #info a, .button {
|
|
|
+ color: #f00;
|
|
|
+ font-weight: bold;
|
|
|
+ text-decoration: underline;
|
|
|
+ cursor: pointer
|
|
|
+ }
|
|
|
|
|
|
- var viewpointSelector = document.getElementById('viewpoints');
|
|
|
+ #viewpoints {
|
|
|
+ background-color: gray;
|
|
|
+ z-index: 101;
|
|
|
+ position: absolute;
|
|
|
+ width: 140px;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+ padding: 2px;
|
|
|
+ border: 1px solid white;
|
|
|
+ }
|
|
|
|
|
|
- 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);
|
|
|
- });
|
|
|
- }
|
|
|
+ #viewpoints div {
|
|
|
+ width: inherit;
|
|
|
}
|
|
|
+ </style>
|
|
|
|
|
|
- };
|
|
|
+ </head>
|
|
|
|
|
|
- var onError = function (error) {
|
|
|
- var request = error.target;
|
|
|
- if ( 404 === request.status ) {
|
|
|
- console.log('VRML Document not found at ' + request.responseURL);
|
|
|
- }
|
|
|
- console.log(error);
|
|
|
+ <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;
|
|
|
}
|
|
|
|
|
|
- var onProgress = function () {
|
|
|
+ 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);
|
|
|
}
|
|
|
|
|
|
- vrmlLoader.load('models/vrml/house.wrl', onLoad, onProgress, onError);
|
|
|
+ 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();
|
|
|
|
|
|
- container = document.createElement('div');
|
|
|
- document.body.appendChild(container);
|
|
|
- container.appendChild(renderer.domElement);
|
|
|
+ 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);
|
|
|
|
|
|
- window.addEventListener('resize', onWindowResize, false);
|
|
|
+ // 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- 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);
|
|
|
+ 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);
|
|
|
}
|
|
|
- animation.update(delta);
|
|
|
- renderer.render(scene, camera);
|
|
|
- }
|
|
|
|
|
|
-</script>
|
|
|
+ </script>
|
|
|
|
|
|
-</body>
|
|
|
+ </body>
|
|
|
</html>
|
Mr.doob