Mercurial > hg > orthanc-stl

comparison Resources/Nexus/threejs.html @ 45:967f947014ac nexus

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
adding experimental support for nexus models
author Sebastien Jodogne <s.jodogne@gmail.com>
date Tue, 09 Apr 2024 22:13:01 +0200
parents
children 9b2a2fcc9878
comparison
equal deleted inserted replaced
44:111d952e7fa0 45:967f947014ac
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Nexus threejs</title>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7 <style>body { margin: 0px; overflow: hidden; }</style>
8 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script>
9 <script src="js/TrackballControls.js"></script>
10 <script src="js/nexus.js"></script>
11 <script src="js/nexus_three.js"></script>
12 </head>
13
14 <body>
15 <div id="container"></div>
16 </body>
17
18 <script>
19
20 var camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 0.1, 100 );
21 camera.position.z = 4;
22
23 var controls = new THREE.TrackballControls( camera );
24 controls.rotateSpeed = 10.0;
25 controls.zoomSpeed = 1.5;
26 controls.panSpeed = 0.8;
27 controls.noZoom = false;
28 controls.noPan = false;
29 controls.staticMoving = true;
30 controls.dynamicDampingFactor = 0.3;
31 controls.keys = [ 65, 83, 68 ];
32 controls.addEventListener( 'change', render );
33
34 var scene = new THREE.Scene();
35 scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
36 scene.add( new THREE.AmbientLight( 0x444444 ) );
37
38 var light1 = new THREE.DirectionalLight( 0xffffff, 1.0 );
39 light1.position.set( 1, 1, -1 );
40 scene.add( light1 );
41
42 var light2 = new THREE.DirectionalLight( 0xffffff, 1.0 );
43 light2.position.set( -1, -1, 1 );
44 scene.add( light2 );
45
46 var renderer = new THREE.WebGLRenderer( { antialias: false } );
47 renderer.setClearColor( scene.fog.color );
48 renderer.setPixelRatio( window.devicePixelRatio );
49 renderer.setSize( window.innerWidth, window.innerHeight);
50
51 var container = document.getElementById( 'container');
52 container.appendChild( renderer.domElement );
53
54 /* An appropriate material can be used as a fourth arg for the NexusObject constructor
55
56 var texture = new THREE.DataTexture( new Uint8Array([1, 1, 1]), 1, 1, THREE.RGBFormat );
57 texture.needsUpdate = true;
58 var material = new THREE.MeshLambertMaterial( { color: 0xffffff, map: texture } );
59 */
60
61 function getURLParameter(name) {
62 return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
63 }
64
65 var model = getURLParameter('model') || "models/gargo.nxz";
66
67 var nexus_obj = new NexusObject(model, renderer, render);
68 scene.add(nexus_obj);
69
70 window.addEventListener( 'resize', onWindowResize, false );
71 render();
72
73
74 function onWindowResize() {
75
76 camera.aspect = window.innerWidth / window.innerHeight;
77 camera.updateProjectionMatrix();
78
79 renderer.setSize( window.innerWidth, window.innerHeight );
80
81 controls.handleResize();
82 controls.update();
83 render();
84 }
85
86 function animate() {
87 requestAnimationFrame( animate );
88 controls.update();
89 }
90
91 function render() {
92 Nexus.beginFrame(renderer.context);
93 renderer.render( scene, camera );
94 Nexus.endFrame(renderer.context);
95 }
96
97 animate();
98
99 </script>
100
101
102 </html>
103