Skip to content

Commit 75f5814

Browse files
michaljazmichaljaz
committed
THREE modules importing optimization
1 parent 89d0cf6 commit 75f5814

File tree

10 files changed

+83
-70
lines changed

10 files changed

+83
-70
lines changed

‎src/client/scripts/AssetLoader.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as THREE from "three";
1+
import { TextureLoader } from "three";
22
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
33

44
class AssetLoader {
@@ -14,7 +14,7 @@ class AssetLoader {
1414

1515
async load(assets) {
1616
return new Promise((resolve) => {
17-
var textureLoader = new THREE.TextureLoader();
17+
var textureLoader = new TextureLoader();
1818
var fbxl = new FBXLoader();
1919
var assetsNumber = Object.keys(assets).length;
2020
var assetsLoaded = 0;

‎src/client/scripts/BlockBreak.js‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
1-
import * as THREE from "three";
1+
import {
2+
NearestFilter,
3+
Mesh,
4+
BoxBufferGeometry,
5+
MeshBasicMaterial,
6+
LineSegments,
7+
EdgesGeometry,
8+
LineBasicMaterial,
9+
} from "three";
210

311
class BlockBreak {
412
constructor(game) {
513
this.game = game;
614
this.texture = this.game.al.get("blocksAtlasSnap");
7-
this.texture.magFilter = THREE.NearestFilter;
8-
this.cursor = new THREE.Mesh(
9-
new THREE.BoxBufferGeometry(1.001, 1.001, 1.001),
10-
new THREE.MeshBasicMaterial({
15+
this.texture.magFilter = NearestFilter;
16+
this.cursor = new Mesh(
17+
new BoxBufferGeometry(1.001, 1.001, 1.001),
18+
new MeshBasicMaterial({
1119
map: this.texture,
1220
transparent: true,
1321
})
1422
);
1523
this.lastPos = [];
16-
this.cursorOut = new THREE.LineSegments(
17-
new THREE.EdgesGeometry(this.cursor.geometry),
18-
new THREE.LineBasicMaterial({
24+
this.cursorOut = new LineSegments(
25+
new EdgesGeometry(this.cursor.geometry),
26+
new LineBasicMaterial({
1927
color: 0x000000,
2028
})
2129
);

‎src/client/scripts/DistanceBasedFog.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import * as THREE from "three";
1+
import { Vector3, Vector2, Vector4 } from "three";
22

33
class DistanceBasedFog {
44
constructor(game) {
55
this.game = game;
6-
this.view = new THREE.Vector3();
7-
this.farnear = new THREE.Vector2();
8-
this.color = new THREE.Vector4();
6+
this.view = new Vector3();
7+
this.farnear = new Vector2();
8+
this.color = new Vector4();
99
}
1010

1111
update() {

‎src/client/scripts/Entities.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,40 @@
1-
import * as THREE from "three";
1+
import {
2+
MeshStandardMaterial,
3+
Color,
4+
BoxGeometry,
5+
InstancedMesh,
6+
DynamicDrawUsage,
7+
Object3D,
8+
} from "three";
29

310
class Entities {
411
constructor(game) {
512
this.game = game;
6-
this.mobMaterial = new THREE.MeshStandardMaterial({
7-
color: new THREE.Color("red"),
13+
this.mobMaterial = new MeshStandardMaterial({
14+
color: new Color("red"),
815
});
9-
this.mobGeometry = new THREE.BoxGeometry(1, 1, 1);
16+
this.mobGeometry = new BoxGeometry(1, 1, 1);
1017
this.mobMaxCount = 200;
11-
this.mobMesh = new THREE.InstancedMesh(
18+
this.mobMesh = new InstancedMesh(
1219
this.mobGeometry,
1320
this.mobMaterial,
1421
this.mobMaxCount
1522
);
16-
this.mobMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
23+
this.mobMesh.instanceMatrix.setUsage(DynamicDrawUsage);
1724
this.game.scene.add(this.mobMesh);
18-
this.playerMaterial = new THREE.MeshStandardMaterial({
19-
color: new THREE.Color("blue"),
25+
this.playerMaterial = new MeshStandardMaterial({
26+
color: new Color("blue"),
2027
});
21-
this.playerGeometry = new THREE.BoxGeometry(1, 1, 1);
28+
this.playerGeometry = new BoxGeometry(1, 1, 1);
2229
this.playerMaxCount = 200;
23-
this.playerMesh = new THREE.InstancedMesh(
30+
this.playerMesh = new InstancedMesh(
2431
this.playerGeometry,
2532
this.playerMaterial,
2633
this.playerMaxCount
2734
);
28-
this.playerMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
35+
this.playerMesh.instanceMatrix.setUsage(DynamicDrawUsage);
2936
this.game.scene.add(this.playerMesh);
30-
this.dummy = new THREE.Object3D();
37+
this.dummy = new Object3D();
3138
}
3239

3340
update(entities) {

‎src/client/scripts/EventHandler.js‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import TWEEN from "@tweenjs/tween.js";
2-
import * as THREE from "three";
2+
import { MathUtils } from "three";
33
var modulo = function (a, b) {
44
return ((+a % (b = +b)) + b) % b;
55
};
@@ -181,17 +181,13 @@ class EventHandler {
181181
}
182182
updatePosition(e) {
183183
if (this.gameState === "gameLock") {
184-
this.game.camera.rotation.x -= THREE.MathUtils.degToRad(
185-
e.movementY / 10
186-
);
187-
this.game.camera.rotation.y -= THREE.MathUtils.degToRad(
188-
e.movementX / 10
189-
);
190-
if (THREE.MathUtils.radToDeg(this.game.camera.rotation.x) < -90) {
191-
this.game.camera.rotation.x = THREE.MathUtils.degToRad(-90);
184+
this.game.camera.rotation.x -= MathUtils.degToRad(e.movementY / 10);
185+
this.game.camera.rotation.y -= MathUtils.degToRad(e.movementX / 10);
186+
if (MathUtils.radToDeg(this.game.camera.rotation.x) < -90) {
187+
this.game.camera.rotation.x = MathUtils.degToRad(-90);
192188
}
193-
if (THREE.MathUtils.radToDeg(this.game.camera.rotation.x) > 90) {
194-
this.game.camera.rotation.x = THREE.MathUtils.degToRad(90);
189+
if (MathUtils.radToDeg(this.game.camera.rotation.x) > 90) {
190+
this.game.camera.rotation.x = MathUtils.degToRad(90);
195191
}
196192
this.game.socket.emit("rotate", [
197193
this.game.camera.rotation.y,

‎src/client/scripts/PlayerInInventory.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
1-
import * as THREE from "three";
1+
import {
2+
WebGLRenderer,
3+
Scene,
4+
Color,
5+
AmbientLight,
6+
NearestFilter,
7+
PerspectiveCamera,
8+
} from "three";
29

310
class PlayerInInventory {
411
constructor(game) {
512
this.game = game;
6-
this.renderer = new THREE.WebGLRenderer({
13+
this.renderer = new WebGLRenderer({
714
canvas: this.game.pcanvas,
815
PixelRatio: window.devicePixelRatio,
916
});
10-
this.scene = new THREE.Scene();
11-
this.scene.background = new THREE.Color("black");
12-
var light = new THREE.AmbientLight(0xffffff);
17+
this.scene = new Scene();
18+
this.scene.background = new Color("black");
19+
var light = new AmbientLight(0xffffff);
1320
this.scene.add(light);
1421
var player = this.game.al.get("player");
1522
var playerTex = this.game.al.get("playerTex");
16-
playerTex.magFilter = THREE.NearestFilter;
23+
playerTex.magFilter = NearestFilter;
1724
player.children[0].material.map = playerTex;
1825
this.scene.add(player);
19-
this.camera = new THREE.PerspectiveCamera(70, 140 / 204, 0.1, 1000);
26+
this.camera = new PerspectiveCamera(70, 140 / 204, 0.1, 1000);
2027
this.camera.rotation.order = "YXZ";
2128
this.camera.position.z = 210;
2229
this.camera.position.y = 120;

‎src/client/scripts/Setup.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as THREE from "three";
1+
import { WebGLRenderer, Scene, PerspectiveCamera, AmbientLight } from "three";
22
import TWEEN from "@tweenjs/tween.js";
33
import Stats from "stats-js";
44
import * as dat from "dat.gui";
@@ -19,21 +19,16 @@ async function Setup(game) {
1919
return new Promise((resolve) => {
2020
game.canvas = document.querySelector("#c");
2121
game.pcanvas = document.querySelector("#c_player");
22-
game.renderer = new THREE.WebGLRenderer({
22+
game.renderer = new WebGLRenderer({
2323
canvas: game.canvas,
2424
PixelRatio: window.devicePixelRatio,
2525
});
2626
game.renderer.sortObjects = true;
27-
game.scene = new THREE.Scene();
28-
game.camera = new THREE.PerspectiveCamera(
29-
game.fov.normal,
30-
2,
31-
0.1,
32-
1000
33-
);
27+
game.scene = new Scene();
28+
game.camera = new PerspectiveCamera(game.fov.normal, 2, 0.1, 1000);
3429
game.camera.rotation.order = "YXZ";
3530
game.camera.position.set(26, 26, 26);
36-
game.scene.add(new THREE.AmbientLight(0xdddddd));
31+
game.scene.add(new AmbientLight(0xdddddd));
3732
game.stats = new Stats();
3833
game.drawcalls = game.stats.addPanel(
3934
new Stats.Panel("calls", "#ff8", "#221")

‎src/client/scripts/World/AnimatedTextureAtlas.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as THREE from "three";
1+
import { MeshStandardMaterial, TextureLoader, NearestFilter } from "three";
22

33
class TextureAtlasCreator {
44
constructor(options) {
@@ -115,7 +115,7 @@ class TextureAtlasCreator {
115115
class AnimatedTextureAtlas {
116116
constructor(game) {
117117
this.game = game;
118-
this.material = new THREE.MeshStandardMaterial({
118+
this.material = new MeshStandardMaterial({
119119
side: 0,
120120
map: null,
121121
vertexColors: true,
@@ -129,9 +129,9 @@ class AnimatedTextureAtlas {
129129
var savedTextures = [];
130130
for (var i = 0; i < 10; i++) {
131131
var t = this.atlasCreator.gen(i).toDataURL();
132-
var tekstura = new THREE.TextureLoader().load(t);
133-
tekstura.magFilter = THREE.NearestFilter;
134-
tekstura.minFilter = THREE.NearestFilter;
132+
var tekstura = new TextureLoader().load(t);
133+
tekstura.magFilter = NearestFilter;
134+
tekstura.minFilter = NearestFilter;
135135
savedTextures.push(tekstura);
136136
}
137137
var tickq = 0;

‎src/client/scripts/World/World.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as THREE from "three";
1+
import { BufferGeometry, BufferAttribute, Mesh, Vector3 } from "three";
22
import { ChunkTerrain } from "./ChunkTerrain.js";
33
import { AnimatedTextureAtlas } from "./AnimatedTextureAtlas.js";
44
import { SectionComputer } from "./SectionComputer.js";
@@ -112,26 +112,26 @@ var World = class World {
112112
var cellId = this.chunkTerrain.vecToStr(...data.info);
113113
var cell = data.cell;
114114
var mesh = this.cellMesh[cellId];
115-
var geometry = new THREE.BufferGeometry();
115+
var geometry = new BufferGeometry();
116116
geometry.setAttribute(
117117
"position",
118-
new THREE.BufferAttribute(new Float32Array(cell.positions), 3)
118+
new BufferAttribute(new Float32Array(cell.positions), 3)
119119
);
120120
geometry.setAttribute(
121121
"normal",
122-
new THREE.BufferAttribute(new Float32Array(cell.normals), 3)
122+
new BufferAttribute(new Float32Array(cell.normals), 3)
123123
);
124124
geometry.setAttribute(
125125
"uv",
126-
new THREE.BufferAttribute(new Float32Array(cell.uvs), 2)
126+
new BufferAttribute(new Float32Array(cell.uvs), 2)
127127
);
128128
geometry.setAttribute(
129129
"color",
130-
new THREE.BufferAttribute(new Float32Array(cell.colors), 3)
130+
new BufferAttribute(new Float32Array(cell.colors), 3)
131131
);
132132
geometry.matrixAutoUpdate = false;
133133
if (mesh === void 0) {
134-
this.cellMesh[cellId] = new THREE.Mesh(geometry, this.material);
134+
this.cellMesh[cellId] = new Mesh(geometry, this.material);
135135
this.cellMesh[cellId].matrixAutoUpdate = false;
136136
this.cellMesh[cellId].frustumCulled = false;
137137
this.cellMesh[cellId].onAfterRender = () => {
@@ -244,10 +244,10 @@ var World = class World {
244244
* @returns Pointing block
245245
*/
246246
getRayBlock() {
247-
var start = new THREE.Vector3().setFromMatrixPosition(
247+
var start = new Vector3().setFromMatrixPosition(
248248
this.game.camera.matrixWorld
249249
);
250-
var end = new THREE.Vector3().set(0, 0, 1).unproject(this.game.camera);
250+
var end = new Vector3().set(0, 0, 1).unproject(this.game.camera);
251251
var intersection = this.intersectsRay(start, end);
252252
if (intersection) {
253253
var posPlace = intersection.position.map(function (v, ndx) {

‎src/client/scripts/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as THREE from "three";
1+
import { Color } from "three";
22
import TWEEN from "@tweenjs/tween.js";
33
import swal from "sweetalert";
44
import { AssetLoader } from "./AssetLoader.js";
@@ -75,7 +75,7 @@ class Game {
7575
dim = "minecraft:overworld";
7676
}
7777
var bg = this.dimBg[dim];
78-
this.scene.background = new THREE.Color(...bg);
78+
this.scene.background = new Color(...bg);
7979
this.distanceBasedFog.color.x = bg[0];
8080
this.distanceBasedFog.color.y = bg[1];
8181
this.distanceBasedFog.color.z = bg[2];

0 commit comments

Comments
 (0)