view Resources/Nexus/threejs.html @ 63:1fd6d0f8fdc9

clarifying the versions of the viewers
author Sebastien Jodogne <s.jodogne@gmail.com>
date Sat, 15 Jun 2024 16:17:41 +0200
parents b798387b085c
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>