Mercurial > hg > orthanc-stl
comparison Resources/Nexus/threejs.html @ 45:967f947014ac nexus
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 |