Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <title>three.js webgl - trackball 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> - trackball controls<br /> | |
| MOVE mouse & press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan | |
| </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 Stats from 'three/addons/libs/stats.module.js'; | |
| import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; | |
| import { TrackballControls } from 'three/addons/controls/TrackballControls.js'; | |
| let perspectiveCamera, orthographicCamera, controls, scene, renderer, stats; | |
| const params = { | |
| orthographicCamera: false | |
| }; | |
| const frustumSize = 400; | |
| init(); | |
| animate(); | |
| function init() { | |
| const aspect = window.innerWidth / window.innerHeight; | |
| perspectiveCamera = new THREE.PerspectiveCamera( 60, aspect, 1, 1000 ); | |
| perspectiveCamera.position.z = 500; | |
| orthographicCamera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 ); | |
| orthographicCamera.position.z = 500; | |
| // world | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color( 0xcccccc ); | |
| scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 ); | |
| const geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 ); | |
| const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ); | |
| for ( let i = 0; i < 500; i ++ ) { | |
| const mesh = new THREE.Mesh( geometry, material ); | |
| mesh.position.x = ( Math.random() - 0.5 ) * 1000; | |
| mesh.position.y = ( Math.random() - 0.5 ) * 1000; | |
| mesh.position.z = ( Math.random() - 0.5 ) * 1000; | |
| 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 ); | |
| // renderer | |
| renderer = new THREE.WebGLRenderer( { antialias: true } ); | |
| renderer.setPixelRatio( window.devicePixelRatio ); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| document.body.appendChild( renderer.domElement ); | |
| stats = new Stats(); | |
| document.body.appendChild( stats.dom ); | |
| // | |
| const gui = new GUI(); | |
| gui.add( params, 'orthographicCamera' ).name( 'use orthographic' ).onChange( function ( value ) { | |
| controls.dispose(); | |
| createControls( value ? orthographicCamera : perspectiveCamera ); | |
| } ); | |
| // | |
| window.addEventListener( 'resize', onWindowResize ); | |
| createControls( perspectiveCamera ); | |
| } | |
| function createControls( camera ) { | |
| controls = new TrackballControls( camera, renderer.domElement ); | |
| controls.rotateSpeed = 1.0; | |
| controls.zoomSpeed = 1.2; | |
| controls.panSpeed = 0.8; | |
| controls.keys = [ 'KeyA', 'KeyS', 'KeyD' ]; | |
| } | |
| function onWindowResize() { | |
| const aspect = window.innerWidth / window.innerHeight; | |
| perspectiveCamera.aspect = aspect; | |
| perspectiveCamera.updateProjectionMatrix(); | |
| orthographicCamera.left = - frustumSize * aspect / 2; | |
| orthographicCamera.right = frustumSize * aspect / 2; | |
| orthographicCamera.top = frustumSize / 2; | |
| orthographicCamera.bottom = - frustumSize / 2; | |
| orthographicCamera.updateProjectionMatrix(); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| controls.handleResize(); | |
| } | |
| function animate() { | |
| requestAnimationFrame( animate ); | |
| controls.update(); | |
| stats.update(); | |
| render(); | |
| } | |
| function render() { | |
| const camera = ( params.orthographicCamera ) ? orthographicCamera : perspectiveCamera; | |
| renderer.render( scene, camera ); | |
| } | |
| </script> | |
| </body> | |
| </html> | |