|
8 | 8 | <style> |
9 | 9 | #loader { |
10 | 10 | border: 5px solid #f3f3f3; /* Light grey */ |
11 | | - border-top: 5px solid #3d3d3d; /* Grey */ |
12 | | - border-radius: 50%; |
13 | | - width: 40px; |
14 | | - height: 40px; |
15 | | - animation: spin 1s linear infinite; |
16 | | - position: absolute; |
17 | | - top: 50%; |
18 | | - left: 50%; |
19 | | - z-index: 2; |
20 | | - } |
21 | | - |
| 11 | + border-top: 5px solid #3d3d3d; /* Grey */ |
| 12 | + border-radius: 50%; |
| 13 | + width: 40px; |
| 14 | + height: 40px; |
| 15 | + animation: spin 1s linear infinite; |
| 16 | + position: absolute; |
| 17 | + top: 50%; |
| 18 | + left: 50%; |
| 19 | + z-index: 2; |
| 20 | + } |
| 21 | + |
22 | 22 | @keyframes spin { |
23 | | - 0% { transform: rotate(0deg); } |
24 | | - 100% { transform: rotate(360deg); } |
25 | | - } |
| 23 | + 0% { transform: rotate(0deg); } |
| 24 | + 100% { transform: rotate(360deg); } |
| 25 | + } |
26 | 26 | </style> |
27 | 27 | </head> |
28 | 28 |
|
|
41 | 41 |
|
42 | 42 | import { GUI } from './jsm/libs/dat.gui.module.js'; |
43 | 43 |
|
44 | | - let container, controls; |
45 | 44 | let camera, scene, renderer; |
46 | | - let gui; |
| 45 | + let controls, gui; |
47 | 46 |
|
48 | 47 | init(); |
49 | 48 | animate(); |
50 | 49 |
|
51 | 50 | function init() { |
52 | 51 |
|
53 | 52 | THREE.Object3D.DefaultUp = new THREE.Vector3( 0, 0, 1 ); |
54 | | - container = document.createElement( 'div' ); |
55 | | - document.body.appendChild( container ); |
| 53 | + |
| 54 | + renderer = new THREE.WebGLRenderer( { antialias: true } ); |
| 55 | + renderer.setPixelRatio( window.devicePixelRatio ); |
| 56 | + renderer.setSize( window.innerWidth, window.innerHeight ); |
| 57 | + renderer.outputEncoding = THREE.sRGBEncoding; |
| 58 | + document.body.appendChild( renderer.domElement ); |
56 | 59 |
|
57 | 60 | camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 ); |
58 | 61 | camera.position.set( 26, - 40, 5 ); |
59 | 62 |
|
60 | 63 | scene = new THREE.Scene(); |
61 | 64 |
|
62 | | - const directionalLight = new THREE.DirectionalLight( 0xffffff ); |
| 65 | + const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 ); |
63 | 66 | directionalLight.position.set( 0, 0, 2 ); |
64 | | - directionalLight.castShadow = true; |
65 | | - directionalLight.intensity = 2; |
66 | 67 | scene.add( directionalLight ); |
67 | 68 |
|
68 | 69 | const loader = new Rhino3dmLoader(); |
69 | 70 | loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/[email protected]/' ); |
70 | | - |
71 | 71 | loader.load( 'models/3dm/Rhino_Logo.3dm', function ( object ) { |
72 | 72 |
|
73 | 73 | scene.add( object ); |
|
78 | 78 |
|
79 | 79 | } ); |
80 | 80 |
|
81 | | - const width = window.innerWidth; |
82 | | - const height = window.innerHeight; |
83 | | - |
84 | | - renderer = new THREE.WebGLRenderer( { antialias: true } ); |
85 | | - renderer.setPixelRatio( window.devicePixelRatio ); |
86 | | - renderer.setSize( width, height ); |
87 | | - container.appendChild( renderer.domElement ); |
88 | | - |
89 | | - controls = new OrbitControls( camera, container ); |
| 81 | + controls = new OrbitControls( camera, renderer.domElement ); |
90 | 82 |
|
91 | 83 | window.addEventListener( 'resize', resize ); |
92 | 84 |
|
|
116 | 108 | function initGUI( layers ) { |
117 | 109 |
|
118 | 110 | gui = new GUI( { width: 300 } ); |
| 111 | + |
119 | 112 | const layersControl = gui.addFolder( 'layers' ); |
120 | 113 | layersControl.open(); |
121 | 114 |
|
|
0 commit comments