Docker

- Update three in static file
2024-08-24 20:46:11 +02:00
parent 7c14bf2836
commit b5d13ccf6f
2000 changed files with 2010104 additions and 59 deletions
--- a/docker-compose/requirements/nginx/static/three/examples/misc_lookat.html
+++ b/docker-compose/requirements/nginx/static/three/examples/misc_lookat.html
@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js misc - lookAt</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+			body {
+				background-color: #fff;
+				color: #444;
+			}
+
+			a {
+				color: #08b;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Object3D.lookAt() example</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from '/static/three/build/three.module.js';
+
+			import Stats from 'three/addons/libs/stats.module.js';
+
+			let camera, scene, renderer, stats;
+
+			let sphere;
+
+			let mouseX = 0, mouseY = 0;
+
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove );
+
+			init();
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera.position.z = 3200;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
+
+				sphere = new THREE.Mesh( new THREE.SphereGeometry( 100, 20, 20 ), new THREE.MeshNormalMaterial() );
+				scene.add( sphere );
+
+				const geometry = new THREE.CylinderGeometry( 0, 10, 100, 12 );
+				geometry.rotateX( Math.PI / 2 );
+
+				const material = new THREE.MeshNormalMaterial();
+
+				for ( let i = 0; i < 1000; i ++ ) {
+
+					const mesh = new THREE.Mesh( geometry, material );
+					mesh.position.x = Math.random() * 4000 - 2000;
+					mesh.position.y = Math.random() * 4000 - 2000;
+					mesh.position.z = Math.random() * 4000 - 2000;
+					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 2;
+					scene.add( mesh );
+
+				}
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 10;
+				mouseY = ( event.clientY - windowHalfY ) * 10;
+
+			}
+
+			//
+
+			function animate() {
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				const time = Date.now() * 0.0005;
+
+				sphere.position.x = Math.sin( time * 0.7 ) * 2000;
+				sphere.position.y = Math.cos( time * 0.5 ) * 2000;
+				sphere.position.z = Math.cos( time * 0.3 ) * 2000;
+
+				for ( let i = 1, l = scene.children.length; i < l; i ++ ) {
+
+					scene.children[ i ].lookAt( sphere.position );
+
+				}
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+				camera.lookAt( scene.position );
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>