|
@@ -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();
|
|
|
|