فهرست منبع

Examples: webgl_loader_3dm clean up.

Mr.doob 4 سال پیش
والد
کامیت
342946c839
1فایلهای تغییر یافته به همراه24 افزوده شده و 31 حذف شده
  1. 24 31
      examples/webgl_loader_3dm.html

+ 24 - 31
examples/webgl_loader_3dm.html

@@ -8,21 +8,21 @@
 		<style>
 			#loader {
 				border: 5px solid #f3f3f3; /* Light grey */
-                border-top: 5px solid #3d3d3d; /* Grey */
-                border-radius: 50%;
-                width: 40px;
-                height: 40px;
-                animation: spin 1s linear infinite;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                z-index: 2;
-            }
-			
+				border-top: 5px solid #3d3d3d; /* Grey */
+				border-radius: 50%;
+				width: 40px;
+				height: 40px;
+				animation: spin 1s linear infinite;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				z-index: 2;
+			}
+
 			@keyframes spin {
-                0% { transform: rotate(0deg); }
-                100% { transform: rotate(360deg); }
-            }
+				0% { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
 		</style>
 	</head>
 
@@ -41,9 +41,8 @@
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			let container, controls;
 			let camera, scene, renderer;
-			let gui;
+			let controls, gui;
 
 			init();
 			animate();
@@ -51,23 +50,24 @@
 			function init() {
 
 				THREE.Object3D.DefaultUp = new THREE.Vector3( 0, 0, 1 );
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputEncoding = THREE.sRGBEncoding;
+				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 26, - 40, 5 );
 
 				scene = new THREE.Scene();
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
 				directionalLight.position.set( 0, 0, 2 );
-				directionalLight.castShadow = true;
-				directionalLight.intensity = 2;
 				scene.add( directionalLight );
 
 				const loader = new Rhino3dmLoader();
 				loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/[email protected]/' );
-
 				loader.load( 'models/3dm/Rhino_Logo.3dm', function ( object ) {
 
 					scene.add( object );
@@ -78,15 +78,7 @@
 
 				} );
 
-				const width = window.innerWidth;
-				const height = window.innerHeight;
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( width, height );
-				container.appendChild( renderer.domElement );
-
-				controls = new OrbitControls( camera, container );
+				controls = new OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', resize );
 
@@ -116,6 +108,7 @@
 			function initGUI( layers ) {
 
 				gui = new GUI( { width: 300 } );
+
 				const layersControl = gui.addFolder( 'layers' );
 				layersControl.open();