example updates

example/customMaterial.js

@@ -15,7 +15,7 @@ import {
 	Sphere,
 } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
+import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 
 let camera, controls, scene, renderer, tiles, orthoCamera;
@@ -270,7 +270,7 @@ function init() {
 	window.addEventListener( 'resize', onWindowResize, false );
 
 	// GUI
-	const gui = new dat.GUI();
+	const gui = new GUI();
 	gui.width = 300;
 	gui.add( params, 'orthographic' );
 	gui.add( params, 'material', { DEFAULT, GRADIENT, TOPOGRAPHIC_LINES, LIGHTING } )

example/index.js

@@ -34,7 +34,7 @@ import { FlyOrbitControls } from './FlyOrbitControls.js';
 import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
-import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
+import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 
 const ALL_HITS = 1;
@@ -247,7 +247,7 @@ function init() {
 
 
 	// GUI
-	const gui = new dat.GUI();
+	const gui = new GUI();
 	gui.width = 300;
 
 	const tileOptions = gui.addFolder( 'Tiles Options' );

example/ionExample.js

@@ -35,7 +35,7 @@ import { FlyOrbitControls } from './FlyOrbitControls.js';
 import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
-import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
+import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 
 const ALL_HITS = 1;
@@ -348,7 +348,7 @@ function init() {
 
 
 	// GUI
-	const gui = new dat.GUI();
+	const gui = new GUI();
 	gui.width = 300;
 
 	const ionOptions = gui.addFolder( 'Ion' );

example/mars.js

@@ -12,7 +12,7 @@ import {
 	FogExp2,
 } from 'three';
 import { FlyOrbitControls } from './FlyOrbitControls.js';
-import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
+import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 
 let camera, controls, scene, renderer;
 let groundTiles, skyTiles;
@@ -82,7 +82,7 @@ function init() {
 	onWindowResize();
 	window.addEventListener( 'resize', onWindowResize, false );
 
-	const gui = new dat.GUI();
+	const gui = new GUI();
 	gui.add( params, 'fog' ).onChange( v => {
 
 		scene.fog = v ? fog : null;

example/offscreenShadows.js

@@ -14,7 +14,7 @@ import {
 	Sphere,
 } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
+import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 
 let camera, controls, scene, renderer, tiles, orthoCamera;
@@ -81,7 +81,7 @@ function init() {
 	document.body.appendChild( renderer.domElement );
 
 	camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
-	camera.position.set( - 21, 13, 25 );
+	camera.position.set( - 56, 232, 260 );
 
 	orthoCamera = new OrthographicCamera();
 
@@ -95,14 +95,15 @@ function init() {
 	dirLight = new DirectionalLight( 0xffffff, 1.25 );
 	dirLight.position.set( - 100, 40, 10 );
 	dirLight.castShadow = true;
-	dirLight.shadow.bias = - 0.00001;
+	dirLight.shadow.bias = - 1e-4;
+	dirLight.shadow.normalBias = 0.2;
 	dirLight.shadow.mapSize.setScalar( 2048 );
 
 	const shadowCam = dirLight.shadow.camera;
-	shadowCam.left = - 100;
-	shadowCam.bottom = - 100;
-	shadowCam.right = 100;
-	shadowCam.top = 100;
+	shadowCam.left = - 120;
+	shadowCam.bottom = - 120;
+	shadowCam.right = 120;
+	shadowCam.top = 120;
 	shadowCam.updateProjectionMatrix();
 
 	scene.add( dirLight );
@@ -128,7 +129,7 @@ function init() {
 	window.addEventListener( 'resize', onWindowResize, false );
 
 	// GUI
-	const gui = new dat.GUI();
+	const gui = new GUI();
 	gui.width = 300;
 	gui.add( params, 'orthographic' );
 	gui.add( params, 'errorTarget' ).min( 0 ).max( 25 ).step( 1 );

example/vr.js

@@ -32,7 +32,7 @@ import {
 	RingBufferGeometry,
 	Sphere,
 } from 'three';
-import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
+import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
 
@@ -173,7 +173,7 @@ function init() {
 	window.addEventListener( 'resize', onWindowResize, false );
 
 	// GUI
-	const gui = new dat.GUI();
+	const gui = new GUI();
 	gui.width = 300;
 	gui.add( params, 'displayGrid' );
 	gui.add( params, 'displayBoxBounds' );

package.json

@@ -50,7 +50,7 @@
     "jest-cli": "^25.5.4",
     "parcel-bundler": "^1.12.4",
     "static-server": "^2.2.1",
-    "three": ">=0.128.0",
+    "three": "^0.136.0",
     "typescript": "^3.9.9"
   },
   "peerDependencies": {