Mercurial > hg > orthanc-stl
view Resources/Nexus/threejs.html @ 62:b798387b085c
added 3DHOP viewer version 4.3
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Sat, 15 Jun 2024 16:08:52 +0200 |
parents | 9b2a2fcc9878 |
children |
line wrap: on
line source
<!DOCTYPE html> <html lang="en"> <head> <title>Nexus threejs</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 { margin: 0px; overflow: hidden; }</style> <script src="three-84.js"></script> <script src="js/TrackballControls.js"></script> <script src="js/nexus.js"></script> <script src="js/nexus_three.js"></script> </head> <body> <div id="container"></div> </body> <script> var camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 0.1, 100 ); camera.position.z = 4; var controls = new THREE.TrackballControls( camera ); controls.rotateSpeed = 10.0; controls.zoomSpeed = 1.5; controls.panSpeed = 0.8; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; controls.keys = [ 65, 83, 68 ]; controls.addEventListener( 'change', render ); var scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0x050505, 2000, 3500 ); scene.add( new THREE.AmbientLight( 0x444444 ) ); var light1 = new THREE.DirectionalLight( 0xffffff, 1.0 ); light1.position.set( 1, 1, -1 ); scene.add( light1 ); var light2 = new THREE.DirectionalLight( 0xffffff, 1.0 ); light2.position.set( -1, -1, 1 ); scene.add( light2 ); var renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer.setClearColor( scene.fog.color ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight); var container = document.getElementById( 'container'); container.appendChild( renderer.domElement ); /* An appropriate material can be used as a fourth arg for the NexusObject constructor var texture = new THREE.DataTexture( new Uint8Array([1, 1, 1]), 1, 1, THREE.RGBFormat ); texture.needsUpdate = true; var material = new THREE.MeshLambertMaterial( { color: 0xffffff, map: texture } ); */ function getURLParameter(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null; } var model = getURLParameter('model') || "models/gargo.nxz"; var nexus_obj = new NexusObject(model, renderer, render); scene.add(nexus_obj); window.addEventListener( 'resize', onWindowResize, false ); render(); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); controls.handleResize(); controls.update(); render(); } function animate() { requestAnimationFrame( animate ); controls.update(); } function render() { Nexus.beginFrame(renderer.context); renderer.render( scene, camera ); Nexus.endFrame(renderer.context); } animate(); </script> </html>