Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <title>three.js webgl - map controls</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: #ccc; | |
| color: #000; | |
| } | |
| a { | |
| color: #f00; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="info"> | |
| <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - map controls | |
| </div> | |
| <!-- Import maps polyfill --> | |
| <!-- Remove this when import maps will be widely supported --> | |
| <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "../build/three.module.js", | |
| "three/addons/": "./jsm/" | |
| } | |
| } | |
| </script> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; | |
| import { MapControls } from 'three/addons/controls/MapControls.js'; | |
| let camera, controls, scene, renderer; | |
| init(); | |
| //render(); // remove when using next line for animation loop (requestAnimationFrame) | |
| animate(); | |
| function init() { | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color( 0xcccccc ); | |
| scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 ); | |
| renderer = new THREE.WebGLRenderer( { antialias: true } ); | |
| renderer.setPixelRatio( window.devicePixelRatio ); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| document.body.appendChild( renderer.domElement ); | |
| camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 ); | |
| camera.position.set( 400, 200, 0 ); | |
| // controls | |
| controls = new MapControls( camera, renderer.domElement ); | |
| //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop) | |
| controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled | |
| controls.dampingFactor = 0.05; | |
| controls.screenSpacePanning = false; | |
| controls.minDistance = 100; | |
| controls.maxDistance = 500; | |
| controls.maxPolarAngle = Math.PI / 2; | |
| // world | |
| const geometry = new THREE.BoxGeometry( 1, 1, 1 ); | |
| geometry.translate( 0, 0.5, 0 ); | |
| const material = new THREE.MeshPhongMaterial( { color: 0xeeeeee, flatShading: true } ); | |
| for ( let i = 0; i < 500; i ++ ) { | |
| const mesh = new THREE.Mesh( geometry, material ); | |
| mesh.position.x = Math.random() * 1600 - 800; | |
| mesh.position.y = 0; | |
| mesh.position.z = Math.random() * 1600 - 800; | |
| mesh.scale.x = 20; | |
| mesh.scale.y = Math.random() * 80 + 10; | |
| mesh.scale.z = 20; | |
| mesh.updateMatrix(); | |
| mesh.matrixAutoUpdate = false; | |
| scene.add( mesh ); | |
| } | |
| // lights | |
| const dirLight1 = new THREE.DirectionalLight( 0xffffff ); | |
| dirLight1.position.set( 1, 1, 1 ); | |
| scene.add( dirLight1 ); | |
| const dirLight2 = new THREE.DirectionalLight( 0x002288 ); | |
| dirLight2.position.set( - 1, - 1, - 1 ); | |
| scene.add( dirLight2 ); | |
| const ambientLight = new THREE.AmbientLight( 0x222222 ); | |
| scene.add( ambientLight ); | |
| // | |
| window.addEventListener( 'resize', onWindowResize ); | |
| const gui = new GUI(); | |
| gui.add( controls, 'screenSpacePanning' ); | |
| } | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| } | |
| function animate() { | |
| requestAnimationFrame( animate ); | |
| controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true | |
| render(); | |
| } | |
| function render() { | |
| renderer.render( scene, camera ); | |
| } | |
| </script> | |
| </body> | |
| </html> | |