123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js webgl - arcball 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">
- </head>
- <body>
- <div id="info">
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - arcball controls<br/>
- <a href="http://www.polycount.com/forum/showthread.php?t=130641" target="_blank" rel="noopener">Cerberus(FFVII Gun) model</a> by Andrew Maximov.
- </div>
- <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 { ArcballControls } from 'three/addons/controls/ArcballControls.js';
- import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
- import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
- const cameras = [ 'Orthographic', 'Perspective' ];
- const cameraType = { type: 'Perspective' };
- const perspectiveDistance = 2.5;
- const orthographicDistance = 120;
- let camera, controls, scene, renderer, gui;
- let folderOptions, folderAnimations;
- const arcballGui = {
- gizmoVisible: true,
- setArcballControls: function () {
- controls = new ArcballControls( camera, renderer.domElement, scene );
- controls.addEventListener( 'change', render );
- this.gizmoVisible = true;
- this.populateGui();
- },
- populateGui: function () {
- folderOptions.add( controls, 'enabled' ).name( 'Enable controls' );
- folderOptions.add( controls, 'enableGrid' ).name( 'Enable Grid' );
- folderOptions.add( controls, 'enableRotate' ).name( 'Enable rotate' );
- folderOptions.add( controls, 'enablePan' ).name( 'Enable pan' );
- folderOptions.add( controls, 'enableZoom' ).name( 'Enable zoom' );
- folderOptions.add( controls, 'cursorZoom' ).name( 'Cursor zoom' );
- folderOptions.add( controls, 'adjustNearFar' ).name( 'adjust near/far' );
- folderOptions.add( controls, 'scaleFactor', 1.1, 10, 0.1 ).name( 'Scale factor' );
- folderOptions.add( controls, 'minDistance', 0, 50, 0.5 ).name( 'Min distance' );
- folderOptions.add( controls, 'maxDistance', 0, 50, 0.5 ).name( 'Max distance' );
- folderOptions.add( controls, 'minZoom', 0, 50, 0.5 ).name( 'Min zoom' );
- folderOptions.add( controls, 'maxZoom', 0, 50, 0.5 ).name( 'Max zoom' );
- folderOptions.add( arcballGui, 'gizmoVisible' ).name( 'Show gizmos' ).onChange( function () {
- controls.setGizmosVisible( arcballGui.gizmoVisible );
- } );
- folderOptions.add( controls, 'copyState' ).name( 'Copy state(ctrl+c)' );
- folderOptions.add( controls, 'pasteState' ).name( 'Paste state(ctrl+v)' );
- folderOptions.add( controls, 'reset' ).name( 'Reset' );
- folderAnimations.add( controls, 'enableAnimations' ).name( 'Enable anim.' );
- folderAnimations.add( controls, 'dampingFactor', 0, 100, 1 ).name( 'Damping' );
- folderAnimations.add( controls, 'wMax', 0, 100, 1 ).name( 'Angular spd' );
- }
- };
- init();
- function init() {
- const container = document.createElement( 'div' );
- document.body.appendChild( container );
- renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
- renderer.setPixelRatio( window.devicePixelRatio );
- renderer.setSize( window.innerWidth, window.innerHeight );
- renderer.toneMapping = THREE.ReinhardToneMapping;
- renderer.toneMappingExposure = 3;
- renderer.domElement.style.background = 'linear-gradient( 180deg, rgba( 0,0,0,1 ) 0%, rgba( 128,128,255,1 ) 100% )';
- container.appendChild( renderer.domElement );
- //
- scene = new THREE.Scene();
- camera = makePerspectiveCamera();
- camera.position.set( 0, 0, perspectiveDistance );
- const material = new THREE.MeshStandardMaterial();
- new OBJLoader()
- .setPath( 'models/obj/cerberus/' )
- .load( 'Cerberus.obj', function ( group ) {
- const textureLoader = new THREE.TextureLoader().setPath( 'models/obj/cerberus/' );
- material.roughness = 1;
- material.metalness = 1;
- const diffuseMap = textureLoader.load( 'Cerberus_A.jpg', render );
- diffuseMap.colorSpace = THREE.SRGBColorSpace;
- material.map = diffuseMap;
- material.metalnessMap = material.roughnessMap = textureLoader.load( 'Cerberus_RM.jpg', render );
- material.normalMap = textureLoader.load( 'Cerberus_N.jpg', render );
- material.map.wrapS = THREE.RepeatWrapping;
- material.roughnessMap.wrapS = THREE.RepeatWrapping;
- material.metalnessMap.wrapS = THREE.RepeatWrapping;
- material.normalMap.wrapS = THREE.RepeatWrapping;
- group.traverse( function ( child ) {
- if ( child.isMesh ) {
- child.material = material;
- }
- } );
- group.rotation.y = Math.PI / 2;
- group.position.x += 0.25;
- scene.add( group );
- render();
- new RGBELoader()
- .setPath( 'textures/equirectangular/' )
- .load( 'venice_sunset_1k.hdr', function ( hdrEquirect ) {
- hdrEquirect.mapping = THREE.EquirectangularReflectionMapping;
- scene.environment = hdrEquirect;
- render();
- } );
- window.addEventListener( 'keydown', onKeyDown );
- window.addEventListener( 'resize', onWindowResize );
- //
- gui = new GUI();
- gui.add( cameraType, 'type', cameras ).name( 'Choose Camera' ).onChange( function () {
- setCamera( cameraType.type );
- } );
- folderOptions = gui.addFolder( 'Arcball parameters' );
- folderAnimations = folderOptions.addFolder( 'Animations' );
- arcballGui.setArcballControls();
- render();
- } );
- }
- function makeOrthographicCamera() {
- const halfFovV = THREE.MathUtils.DEG2RAD * 45 * 0.5;
- const halfFovH = Math.atan( ( window.innerWidth / window.innerHeight ) * Math.tan( halfFovV ) );
- const halfW = perspectiveDistance * Math.tan( halfFovH );
- const halfH = perspectiveDistance * Math.tan( halfFovV );
- const near = 0.01;
- const far = 2000;
- const newCamera = new THREE.OrthographicCamera( - halfW, halfW, halfH, - halfH, near, far );
- return newCamera;
- }
- function makePerspectiveCamera() {
- const fov = 45;
- const aspect = window.innerWidth / window.innerHeight;
- const near = 0.01;
- const far = 2000;
- const newCamera = new THREE.PerspectiveCamera( fov, aspect, near, far );
- return newCamera;
- }
- function onWindowResize() {
- if ( camera.type == 'OrthographicCamera' ) {
- const halfFovV = THREE.MathUtils.DEG2RAD * 45 * 0.5;
- const halfFovH = Math.atan( ( window.innerWidth / window.innerHeight ) * Math.tan( halfFovV ) );
- const halfW = perspectiveDistance * Math.tan( halfFovH );
- const halfH = perspectiveDistance * Math.tan( halfFovV );
- camera.left = - halfW;
- camera.right = halfW;
- camera.top = halfH;
- camera.bottom = - halfH;
- } else if ( camera.type == 'PerspectiveCamera' ) {
- camera.aspect = window.innerWidth / window.innerHeight;
- }
- camera.updateProjectionMatrix();
- renderer.setSize( window.innerWidth, window.innerHeight );
- render();
- }
- function render() {
- renderer.render( scene, camera );
- }
- function onKeyDown( event ) {
- if ( event.key === 'c' ) {
- if ( event.ctrlKey || event.metaKey ) {
- controls.copyState();
- }
- } else if ( event.key === 'v' ) {
- if ( event.ctrlKey || event.metaKey ) {
- controls.pasteState();
- }
- }
- }
- function setCamera( type ) {
- if ( type == 'Orthographic' ) {
- camera = makeOrthographicCamera();
- camera.position.set( 0, 0, orthographicDistance );
- } else if ( type == 'Perspective' ) {
- camera = makePerspectiveCamera();
- camera.position.set( 0, 0, perspectiveDistance );
- }
- controls.setCamera( camera );
- render();
- }
- </script>
- </body>
|