Mercurial > hg > orthanc-stl
diff 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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/Resources/Nexus/threejs.html Tue Apr 09 22:13:01 2024 +0200 @@ -0,0 +1,103 @@ +<!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="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.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> +