-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
3095 lines (3076 loc) · 147 KB
/
Copy pathindex.html
File metadata and controls
3095 lines (3076 loc) · 147 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>木筏求生</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:#000;font-family:Arial,sans-serif}canvas{display:block}
#hud{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}
#crosshair{display:none}
#toolbar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto}
.toolbar-slot{width:60px;height:60px;border:2px solid rgba(255,255,255,0.4);border-radius:8px;background:rgba(0,0,0,0.5);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:12px;cursor:pointer;position:relative;transition:border-color 0.2s}
.toolbar-slot.active{border-color:#f0c040;background:rgba(240,192,64,0.2)}
.toolbar-slot .icon{font-size:22px;line-height:1}.toolbar-slot .label{font-size:10px;margin-top:2px}
.toolbar-slot .count{position:absolute;top:2px;right:4px;font-size:10px;color:#f0c040}
.toolbar-slot .key-hint{position:absolute;top:2px;left:4px;font-size:9px;color:rgba(255,255,255,0.5)}
#tooltip{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;background:rgba(0,0,0,0.6);padding:6px 16px;border-radius:6px;opacity:0;transition:opacity 0.3s;white-space:nowrap}
#tooltip.show{opacity:1}
#collect-log{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.collect-msg{color:#8f8;font-size:13px;background:rgba(0,0,0,0.5);padding:4px 10px;border-radius:4px;animation:cf 2s forwards}
@keyframes cf{0%{opacity:0;transform:translateX(20px)}15%{opacity:1;transform:translateX(0)}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
#build-menu{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.85);border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:20px;min-width:340px;max-height:70vh;color:#fff;display:none;pointer-events:auto;overflow-y:auto}
#build-menu h3{text-align:center;margin-bottom:12px;color:#f0c040;font-size:18px}
.build-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;margin:4px 0;background:rgba(255,255,255,0.05);border-radius:6px;cursor:pointer;transition:background 0.2s}
.build-item:hover{background:rgba(255,255,255,0.15)}.build-item.disabled{opacity:0.4;cursor:not-allowed}
#backpack-menu{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.88);border:1px solid rgba(255,255,255,0.25);border-radius:12px;padding:20px 24px;min-width:280px;max-height:70vh;color:#fff;display:none;pointer-events:auto;overflow-y:auto}
#backpack-menu h3{text-align:center;margin-bottom:14px;color:#f0c040;font-size:18px}
.backpack-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin:4px 0;background:rgba(255,255,255,0.06);border-radius:6px;transition:background 0.2s}
.backpack-item:hover{background:rgba(255,255,255,0.12)}
.backpack-item .bp-icon{font-size:18px;margin-right:10px;min-width:30px;text-align:center}
.backpack-item .bp-name{flex:1;font-size:14px}
.backpack-item .bp-count{font-size:16px;color:#f0c040;font-weight:bold;min-width:30px;text-align:right}
.backpack-empty{text-align:center;color:rgba(255,255,255,0.4);padding:20px;font-size:14px}
#backpack-menu .close-hint,#build-menu .close-hint{text-align:center;margin-top:12px;font-size:11px;color:rgba(255,255,255,0.35)}
#place-hint{position:absolute;top:60px;left:50%;transform:translateX(-50%);color:#f0c040;font-size:16px;background:rgba(0,0,0,0.7);padding:8px 20px;border-radius:8px;display:none;pointer-events:none;z-index:20}
body.placing-mode{cursor:pointer}
body.demolish-mode{cursor:crosshair}
#demolish-menu{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.88);border:1px solid rgba(255,80,80,0.4);border-radius:12px;padding:20px 24px;min-width:300px;max-height:70vh;color:#fff;display:none;pointer-events:auto;overflow-y:auto}
#demolish-menu h3{text-align:center;margin-bottom:14px;color:#ff6644;font-size:18px}
.demolish-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin:4px 0;background:rgba(255,80,80,0.08);border-radius:6px;cursor:pointer;transition:background 0.2s}
.demolish-item:hover{background:rgba(255,80,80,0.25)}
.demolish-item .dm-icon{font-size:18px;margin-right:10px;min-width:30px;text-align:center}
.demolish-item .dm-name{flex:1;font-size:14px}
.demolish-item .dm-refund{font-size:11px;color:#8f8;min-width:80px;text-align:right}
.demolish-empty{text-align:center;color:rgba(255,255,255,0.4);padding:20px;font-size:14px}
#demolish-menu .close-hint{text-align:center;margin-top:12px;font-size:11px;color:rgba(255,255,255,0.35)}
#start-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#0a2a4a 0%,#0d4a7a 50%,#1a6a9a 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;color:#fff}
#start-screen h1{font-size:48px;margin-bottom:10px;text-shadow:0 2px 10px rgba(0,0,0,0.5)}
#start-screen p{font-size:16px;color:#aad;margin-bottom:30px}
.start-btn-group{display:flex;gap:12px;flex-direction:column;align-items:center}
#start-btn,#continue-btn{padding:14px 50px;font-size:20px;background:#f0c040;color:#333;border:none;border-radius:8px;cursor:pointer;font-weight:bold;transition:transform 0.2s}
#start-btn:hover,#continue-btn:hover{transform:scale(1.05)}
#continue-btn{background:#40c0f0}
#continue-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
#save-indicator{position:fixed;top:12px;left:12px;color:rgba(255,255,255,0.6);font-size:12px;background:rgba(0,0,0,0.4);padding:4px 10px;border-radius:4px;z-index:30;opacity:0;transition:opacity 0.5s;pointer-events:none}
#save-indicator.show{opacity:1}
#controls-info{margin-top:40px;text-align:left;font-size:13px;color:#8ab;line-height:1.8}
#controls-info kbd{background:rgba(255,255,255,0.15);padding:2px 8px;border-radius:4px;font-family:monospace}
#fishing-hint{position:absolute;top:120px;left:50%;transform:translateX(-50%);color:#fff;font-size:16px;background:rgba(0,80,200,0.75);padding:8px 20px;border-radius:8px;display:none;pointer-events:none;z-index:20}
#fishing-bite{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:28px;font-weight:bold;background:rgba(200,80,0,0.85);padding:14px 32px;border-radius:12px;display:none;pointer-events:none;z-index:25;text-align:center}
</style>
</head>
<body>
<div id="save-indicator"></div>
<div id="start-screen">
<h1>⛵ 木筏求生</h1>
<p>在无尽的海洋上生存，收集资源，扩建你的木筏。</p>
<div class="start-btn-group">
<button id="start-btn">新的游戏</button>
<button id="continue-btn" disabled>继续游戏</button>
</div>
<div id="controls-info">
<div><kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> - 控制小人在木筏上行走</div>
<div><kbd>Q</kbd><kbd>E</kbd> / <kbd>右键拖拽</kbd> - 视角控制（环绕小人旋转）</div>
<div><kbd>左键点击</kbd> - 点击远处使用工具（划桨/捕捞）</div>
<div><kbd>1</kbd><kbd>2</kbd><kbd>3</kbd> - 切换（钩子/钓鱼 / 船桨 / 建造）<br> 背包装备鱼竿后，键1变为钓鱼</div>
<div><kbd>4</kbd> - 背包 <kbd>5</kbd> - 上帝模式 <kbd>6</kbd> - 拆除 <kbd>7</kbd> - 观察模式 <kbd>B</kbd> - 建造菜单 <kbd>ESC</kbd> - 关闭界面</div>
</div>
</div>
<div id="hud" style="display:none">
<div id="crosshair"></div><div id="toolbar"></div><div id="tooltip"></div>
<div id="collect-log"></div>
<div id="build-menu"><h3>建造菜单 [B]</h3><div id="build-list"></div><div class="close-hint">按 B 或 ESC 关闭</div></div>
<div id="backpack-menu"><h3>背包 [4]</h3><div id="backpack-list"></div><div class="close-hint">按 4 或 ESC 关闭</div></div>
<div id="demolish-menu"><h3>拆除菜单 [6]</h3><div id="demolish-list"></div><div class="close-hint">按 6 或 ESC 关闭</div></div>
<div id="place-hint">点击木筏周围的高亮区域放置木板（ESC 取消）</div>
<div id="fishing-hint">装备鱼竿后，点击海面投掷钩子钓鱼</div>
<div id="fishing-bite">🐟 鱼上钩了！快点击那条鱼！</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
/* ============================================================
* Raft Survival - 3D Game (Three.js r128)
*
* Features:
* - Infinite calm ocean (plane follows camera)
* - Expandable raft (grid-based plank system)
* - Floating items spawn randomly on sea (wood, rope, plastic, iron, copper, gold)
* - Hook tool to grab items from water
* - Paddle tool to push raft forward toward clicked target
* - Build system to expand raft with collected resources
* - Backpack UI for viewing inventory
* - WASD + mouse first-person camera (disabled when UI panels are open)
*
* Classes: Game, Ocean, Raft, Player, InputManager, Hook, Paddle,
* ItemSpawner, FloatingItem, Inventory, BuildSystem, UIManager
* ============================================================ */
/* ===== CONFIG ===== */
var CONFIG = {
OCEAN_SIZE: 1500, OCEAN_COLOR: 0x0077be, OCEAN_SEG: 256,
SKY: 0x87ceeb, FOG: 0xb0d4f1, FOG_N: 100, FOG_F: 600,
PH: 2.0, MS: 0.002, LS: 2.0, // player height, mouse sens, look speed
CHAR_SPEED: 3.0, // character walk speed
CAM_DIST: 5.0, // third-person camera distance (default)
CAM_DIST_MIN: 2.0, // minimum zoom distance
CAM_DIST_MAX: 20.0, // maximum zoom distance
CAM_ZOOM_SPEED: 0.8, // zoom speed per scroll step
CAM_HEIGHT: 3.5, // third-person camera height offset
CAM_PITCH_MIN: 0.1, // minimum camera pitch (looking down)
CAM_PITCH_MAX: 1.2, // maximum camera pitch
CAM_KEY_ROTATE_SPEED: 2.0, // Q/E key rotation speed (radians per second)
RPS: 2, RPH: 0.3, RY: 0.15, // raft plank size/height/y
SI: 2.0, SMX: 30, SRN: 15, SRX: 80, // spawn interval/max/radius
FY: 0.15, DS: 0.3, // float y, drift speed
HR: 100, HS: 26, HPS: 14, HGR: 2.5, HG: 1.1, // hook range/speed/pull/grab/gravity
PF: 8, PC: 0.5, RD: 0.98, // paddle force/cooldown, raft drag
PADDLE_SPEED: 3.0, // paddle continuous speed for raft movement
PILLAR_H: 2.5, // pillar height (floor-to-floor)
BR: { plank: { name: '扩建木筏', cost: { wood: 2, rope: 1 }, icon: '筏' },
pillar: { name: '柱子', cost: { wood: 3 }, icon: '柱' },
stairs: { name: '楼梯', cost: { iron: 2, wood: 4, rope: 1 }, icon: '梯' },
upper_plank: { name: '上层木板', cost: { wood: 2, rope: 1 }, icon: '板' },
storage: { name: '储物箱', cost: { wood: 4, rope: 2 }, icon: '箱' },
purifier: { name: '淡水净化器', cost: { plastic: 6, rope: 4, copper: 2 }, icon: '净' },
fishing_rod: { name: '鱼竿', cost: { wood: 4, rope: 2, copper: 1 }, icon: '竿', craftOnly: true } }
};
/* Item types with visual properties */
var IT = {
wood: { name: '木材', color: 0x8B6914, icon: '木', sx: 1.2, sy: 0.15, sz: 0.5 },
rope: { name: '绳子', color: 0xC4A35A, icon: '绳', sx: 0.4, sy: 0.2, sz: 0.4 },
plastic: { name: '塑料', color: 0x44AA88, icon: '塑', sx: 0.5, sy: 0.2, sz: 0.5 },
iron: { name: '铁板', color: 0x888888, icon: '铁', sx: 0.4, sy: 0.1, sz: 0.6 },
copper: { name: '铜板', color: 0xB87333, icon: '铜', sx: 0.4, sy: 0.1, sz: 0.6 },
gold: { name: '金块', color: 0xFFD700, icon: '金', sx: 0.3, sy: 0.15, sz: 0.3 },
freshwater: { name: '淡水', color: 0x44aaff, icon: '水', sx: 0.3, sy: 0.3, sz: 0.3 },
fish: { name: '鱼', color: 0xff8844, icon: '鱼', sx: 0.5, sy: 0.2, sz: 0.3 }
};
/* ===== InputManager - keyboard and mouse input ===== */
class InputManager {
constructor() {
this.keys = new Set(); this.md = false; this.mjp = false;
this.dx = 0; this.dy = 0;
this.rmb = false; // Right mouse button held for camera rotation
this.uiOpen = false; // When true, mouse does not control camera
this.mouseX = 0; this.mouseY = 0; // Screen-space mouse position for free-cursor raycasting
this.wheelDelta = 0; // Mouse wheel delta for layer switching
var s = this;
document.addEventListener('keydown', function(e) { s.keys.add(e.code) });
document.addEventListener('keyup', function(e) { s.keys.delete(e.code) });
document.addEventListener('mousemove', function(e) {
if (s.rmb && !s.uiOpen) { s.dx += e.movementX; s.dy += e.movementY; }
s.mouseX = e.clientX; s.mouseY = e.clientY;
});
document.addEventListener('mousedown', function(e) {
if (e.button === 0) { s.md = true; s.mjp = true; }
if (e.button === 2) { s.rmb = true; }
});
document.addEventListener('mouseup', function(e) {
if (e.button === 0) s.md = false;
if (e.button === 2) s.rmb = false;
});
document.addEventListener('contextmenu', function(e) { e.preventDefault(); });
document.addEventListener('wheel', function(e) {
s.wheelDelta += Math.sign(e.deltaY);
});
}
kd(c) { return this.keys.has(c); }
/* Get normalized device coordinates from current mouse position */
getNDC(w, h) {
return new THREE.Vector2((this.mouseX / w) * 2 - 1, -(this.mouseY / h) * 2 + 1);
}
reset() { this.dx = 0; this.dy = 0; this.mjp = false; this.wheelDelta = 0; }
}
/* ===== Ocean - infinite sea surface with depth gradient and ripples ===== */
class Ocean {
constructor(sc) {
this.sc = sc;
var g = new THREE.PlaneGeometry(CONFIG.OCEAN_SIZE, CONFIG.OCEAN_SIZE, CONFIG.OCEAN_SEG, CONFIG.OCEAN_SEG);
/* Custom shader: deep blue near camera, lighter blue far away, with ripple normal perturbation */
this.oceanMat = new THREE.ShaderMaterial({
uniforms: {
uTime: { value: 0 },
uCamPos: { value: new THREE.Vector3() },
uSunDir: { value: new THREE.Vector3(0.5, 0.8, 0.3).normalize() },
uDeepColor: { value: new THREE.Color(0x003366) },
uMidColor: { value: new THREE.Color(0x0066aa) },
uFarColor: { value: new THREE.Color(0x88bbdd) },
uFogColor: { value: new THREE.Color(CONFIG.FOG) },
uFogNear: { value: CONFIG.FOG_N },
uFogFar: { value: CONFIG.FOG_F }
},
vertexShader: [
'uniform float uTime;',
'varying vec3 vWorldPos;',
'varying float vDist;',
'varying float vWaveH;',
'varying vec3 vMacroN;',
'uniform vec3 uCamPos;',
/* Multi-octave wave field: returns vec3(height, dHeight/dx, dHeight/dy).
* Larger amplitudes + medium wavelengths give visible rolling swells. */
'vec3 waveField(vec2 p, float t){',
' float h = 0.0, dx = 0.0, dy = 0.0;',
' float a, ph, c;',
/* swell 1 */
' a = 0.30; ph = p.x * 0.085 + t * 0.75; h += sin(ph) * a; c = cos(ph) * a; dx += 0.085 * c;',
/* swell 2 */
' a = 0.22; ph = p.y * 0.11 + t * 0.6; h += sin(ph) * a; c = cos(ph) * a; dy += 0.11 * c;',
/* diagonal wave 3 */
' a = 0.17; ph = (p.x * 0.7 + p.y * 0.5) * 0.17 + t * 1.05; h += sin(ph) * a; c = cos(ph) * a; dx += 0.7 * 0.17 * c; dy += 0.5 * 0.17 * c;',
/* diagonal wave 4 */
' a = 0.1; ph = (p.x * 0.5 - p.y * 0.85) * 0.24 + t * 1.25; h += sin(ph) * a; c = cos(ph) * a; dx += 0.5 * 0.24 * c; dy += -0.85 * 0.24 * c;',
/* chop 5 */
' a = 0.055; ph = (p.x + p.y) * 0.42 + t * 1.9; h += sin(ph) * a; c = cos(ph) * a; dx += 0.42 * c; dy += 0.42 * c;',
' return vec3(h, dx, dy);',
'}',
'void main(){',
' vec3 pos = position;',
' float wx = pos.x + uCamPos.x;',
' float wy = pos.y - uCamPos.z;',
' vec2 wp = vec2(wx, wy);',
/* Attenuate wave amplitude with distance to avoid far-field shimmer/aliasing */
' float planeDist = length(vec2(pos.x, pos.y));',
' float atten = 1.0 - clamp(planeDist / 320.0, 0.0, 0.8);',
' vec3 wf = waveField(wp, uTime);',
' float h = wf.x * atten;',
' pos.z = h;',
' vWaveH = h;',
/* Macro surface normal from wave slopes (so swells are visibly lit) */
' vMacroN = normalize(vec3(-wf.y * atten, 1.0, -wf.z * atten));',
' vWorldPos = vec3(wx, 0.0, wy);',
' vDist = length(vWorldPos - uCamPos);',
' gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);',
'}'
].join('\n'),
fragmentShader: [
'uniform float uTime;',
'uniform vec3 uDeepColor;',
'uniform vec3 uMidColor;',
'uniform vec3 uFarColor;',
'uniform vec3 uFogColor;',
'uniform float uFogNear;',
'uniform float uFogFar;',
'uniform vec3 uSunDir;',
'uniform vec3 uCamPos;',
'varying vec3 vWorldPos;',
'varying float vDist;',
'varying float vWaveH;',
'varying vec3 vMacroN;',
/* Multi-layer water surface normal - computed analytically to avoid 3x redundant trig */
'vec3 getWaterNormal(vec2 p, float t) {',
' // Compute analytical partial derivatives dh/dx and dh/dy',
' // For h = A*sin(kx*x + ky*y + w*t): dh/dx = A*kx*cos(...), dh/dy = A*ky*cos(...)',
' float dhdx = 0.0, dhdy = 0.0;',
' float ph, c;',
' // Layer 1: sin(0.3x + 0.7t)*0.03 -> dhdx+=0.3*0.03*cos, dhdy+=0',
' ph = p.x * 0.3 + t * 0.7; c = cos(ph); dhdx += 0.3 * 0.03 * c;',
' // Layer 1: cos(0.25y + 0.5t)*0.025 -> dhdy+=-0.25*0.025*sin',
' ph = p.y * 0.25 + t * 0.5; c = sin(ph); dhdy += -0.25 * 0.025 * c;',
' // Layer 2: sin(0.8x + 0.6y + 1.2t)*0.012',
' ph = p.x * 0.8 + p.y * 0.6 + t * 1.2; c = cos(ph); dhdx += 0.8 * 0.012 * c; dhdy += 0.6 * 0.012 * c;',
' // Layer 2: cos(1.1x - 0.7y + 0.9t)*0.01 -> derivative of cos is -sin',
' ph = p.x * 1.1 - p.y * 0.7 + t * 0.9; c = sin(ph); dhdx += -1.1 * 0.01 * c; dhdy += 0.7 * 0.01 * c;',
' // Layer 3: sin(2.5x + 2.0t)*0.005',
' ph = p.x * 2.5 + t * 2.0; c = cos(ph); dhdx += 2.5 * 0.005 * c;',
' // Layer 3: cos(2.8y - 1.8t)*0.004 -> dhdy only',
' ph = p.y * 2.8 - t * 1.8; c = sin(ph); dhdy += -2.8 * 0.004 * c;',
' // Layer 3: sin(4.0x + 3.5y + 2.5t)*0.003',
' ph = p.x * 4.0 + p.y * 3.5 + t * 2.5; c = cos(ph); dhdx += 4.0 * 0.003 * c; dhdy += 3.5 * 0.003 * c;',
' // Layer 4: sin(8.0x + 3.0t)*0.002',
' ph = p.x * 8.0 + t * 3.0; c = cos(ph); dhdx += 8.0 * 0.002 * c;',
' // Layer 4: cos(9.0y - 3.5t)*0.0015',
' ph = p.y * 9.0 - t * 3.5; c = sin(ph); dhdy += -9.0 * 0.0015 * c;',
' // Layer 4: sin((x+y)*12.0 + 4.0t)*0.001',
' ph = (p.x + p.y) * 12.0 + t * 4.0; c = cos(ph); dhdx += 12.0 * 0.001 * c; dhdy += 12.0 * 0.001 * c;',
' // Distance-based detail damping keeps the far surface smooth (anti-shimmer)',
' float detailFade = 1.0 - clamp(vDist / 220.0, 0.0, 0.7);',
' return normalize(vec3(-dhdx * detailFade, 1.0, -dhdy * detailFade));',
'}',
'',
'void main(){',
/* Depth gradient: near=deep, far=light */
' float t1 = clamp(vDist / 120.0, 0.0, 1.0);',
' float t2 = clamp((vDist - 120.0) / 300.0, 0.0, 1.0);',
' vec3 baseColor = mix(uDeepColor, uMidColor, t1);',
' baseColor = mix(baseColor, uFarColor, t2);',
' ',
' // Get detailed water surface normal',
' vec3 detailN = getWaterNormal(vWorldPos.xz, uTime);',
' // Combine the macro swell normal (from vertex displacement) with fine ripple detail',
' vec3 N = normalize(vMacroN + vec3(detailN.x, 0.0, detailN.z));',
' vec3 viewDir = normalize(uCamPos - vWorldPos);',
' ',
' // Sky-reflection tint based on surface normal (crystalline reflection)',
' vec3 skyHi = vec3(0.55, 0.78, 0.95);',
' vec3 skyLo = vec3(0.18, 0.42, 0.62);',
' vec3 reflDir = reflect(-viewDir, N);',
' vec3 skyReflect = mix(skyLo, skyHi, clamp(reflDir.y * 0.5 + 0.5, 0.0, 1.0));',
' ',
' // Sharp sun specular highlight (glittering sun glints)',
' vec3 halfDir = normalize(uSunDir + viewDir);',
' float NdotH = max(dot(N, halfDir), 0.0);',
' // Cache NdotH^15, then derive higher powers to avoid redundant pow() calls',
' float NdotH15 = pow(NdotH, 15.0);',
' float NdotH30 = NdotH15 * NdotH15;',
' float NdotH60 = NdotH30 * NdotH30;',
' float NdotH120 = NdotH60 * NdotH60;',
' float totalSpec = NdotH120 * 0.45 + NdotH60 * 0.22 + NdotH30 * 0.16 + NdotH15 * 0.1;',
' ',
' // Distributed micro-sparkles (连续分布的细碎光斑)',
' vec2 microCoord = vWorldPos.xz * 3.0;',
' float microWave1 = sin(microCoord.x * 1.2 + uTime * 1.5) * cos(microCoord.y * 1.1 - uTime * 1.3);',
' float microWave2 = cos(microCoord.x * 1.8 - uTime * 1.8) * sin(microCoord.y * 1.5 + uTime * 1.6);',
' float microWave3 = sin(microCoord.x * 2.5 + microCoord.y * 2.3 + uTime * 2.0) * 0.5;',
' ',
' // Crisper micro pattern for fine glittering points',
' float microPattern = (microWave1 + microWave2 + microWave3) * 0.33 + 0.5;',
' microPattern = smoothstep(0.45, 0.72, microPattern);',
' // Sparkle modulation tied to sun reflection (波光粼粼)',
' float microSpec = microPattern * pow(NdotH, 40.0) * 0.35;',
' ',
' // Fresnel effect (stronger reflection at grazing angles)',
' float viewAngle = max(dot(N, viewDir), 0.0);',
' float fresnel = pow(1.0 - viewAngle, 4.0) * 0.65 + 0.04;',
' ',
' // Wave crest brightening - foam-like accents on the tops of swells',
' float crest = smoothstep(0.22, 0.42, vWaveH) * 0.14;',
' ',
' // Gentle angle boost',
' float angleBoost = 1.0 + (1.0 - viewAngle) * 0.6;',
' ',
' // Distance fade for sparkles',
' float distFade = 1.0 - clamp(vDist / 260.0, 0.0, 1.0);',
' ',
' // Combine sparkles',
' vec3 sparkleColor = vec3(1.0, 1.0, 0.97);',
' vec3 sparkles = sparkleColor * (totalSpec + microSpec) * angleBoost * distFade;',
' ',
' // Blend base water color with sky reflection via fresnel',
' vec3 waterCol = mix(baseColor, skyReflect, fresnel);',
' ',
' // Final color',
' vec3 col = waterCol + sparkles + vec3(crest);',
' ',
' // Fog',
' float fogFactor = clamp((vDist - uFogNear) / (uFogFar - uFogNear), 0.0, 1.0);',
' col = mix(col, uFogColor, fogFactor);',
' ',
' gl_FragColor = vec4(col, 0.9);',
'}'
].join('\n'),
transparent: true,
side: THREE.DoubleSide
});
this.mesh = new THREE.Mesh(g, this.oceanMat);
this.mesh.rotation.x = -Math.PI / 2; this.mesh.receiveShadow = true; sc.add(this.mesh);
var dg = new THREE.PlaneGeometry(CONFIG.OCEAN_SIZE, CONFIG.OCEAN_SIZE);
var dm = new THREE.MeshBasicMaterial({ color: 0x001a33, side: THREE.DoubleSide });
this.deep = new THREE.Mesh(dg, dm); this.deep.rotation.x = -Math.PI / 2; this.deep.position.y = -5; sc.add(this.deep);
}
/* Follow camera position + update shader uniforms */
update(cp, t) {
this.mesh.position.x = cp.x; this.mesh.position.z = cp.z;
this.deep.position.x = cp.x; this.deep.position.z = cp.z;
this.oceanMat.uniforms.uTime.value = t;
this.oceanMat.uniforms.uCamPos.value.copy(cp);
}
}
/* ===== Raft - expandable wooden platform (grid-based, multi-layer) ===== */
/* Sub-grid system: each plank is a 10x10 sub-grid.
* Pillar occupies 2x2 sub-cells, Storage box occupies 3x3 sub-cells.
* Sub-grid coordinates: (gx, gz, sx, sz) where sx,sz are 0..9 within the plank.
* Items are placed at sub-grid positions and occupy a rectangular area. */
class Raft {
constructor(sc) {
this.sc = sc; this.g = new THREE.Group(); sc.add(this.g);
this.planks = []; this.vel = new THREE.Vector3(); this.occ = new Set();
/* Multi-layer structures: pillars, stairs, upper planks */
this.pillars = []; // { gx, gz, sx, sz, layer, mesh } - sx,sz are sub-grid position (top-left of 2x2)
this.pillarOcc = new Map(); // "gx,gz,layer" -> Set of occupied sub-cells "sx,sz"
this.stairs = []; // { x, z, layer, mesh }
this.stairOcc = new Set(); // "gx,gz,layer"
this.upperPlanks = []; // { x, z, layer, mesh }
this.upperOcc = new Set(); // "gx,gz,layer"
/* Storage boxes with sub-grid positions */
this.storages = []; // { gx, gz, sx, sz, layer, mesh } - sx,sz top-left of 3x3
this.storageOcc = new Map(); // "gx,gz,layer" -> Set of occupied sub-cells "sx,sz"
this.addPlank(0, 0); // Start with one plank
}
/* Create a plank mesh with wood grain */
_createPlankMesh(gx, gz, y) {
var s = CONFIG.RPS, geo = new THREE.BoxGeometry(s, CONFIG.RPH, s);
var mat = new THREE.MeshLambertMaterial({ color: 0x8B6914 });
var m = new THREE.Mesh(geo, mat); m.castShadow = true; m.receiveShadow = true;
m.position.set(gx * s, y, gz * s); this.g.add(m);
var lc = 0x6B4F12;
for (var i = -1; i <= 1; i++) { var lg = new THREE.BoxGeometry(s - 0.1, CONFIG.RPH + 0.01, 0.04);
var ln = new THREE.Mesh(lg, new THREE.MeshLambertMaterial({ color: lc }));
ln.position.set(0, 0.005, i * 0.55); m.add(ln); }
var gg = new THREE.BoxGeometry(0.04, CONFIG.RPH + 0.01, s - 0.1);
var gp = new THREE.Mesh(gg, new THREE.MeshLambertMaterial({ color: lc }));
gp.position.set(0, 0.005, 0); m.add(gp);
/* Corner nail studs for a finished, detailed look */
var nailGeo = new THREE.CylinderGeometry(0.03, 0.03, 0.04, 6);
var nailMat = new THREE.MeshLambertMaterial({ color: 0x444444 });
var off = s / 2 - 0.18;
var corners = [[-off, -off], [off, -off], [-off, off], [off, off]];
for (var ni = 0; ni < corners.length; ni++) {
var nail = new THREE.Mesh(nailGeo, nailMat);
nail.position.set(corners[ni][0], CONFIG.RPH / 2 + 0.005, corners[ni][1]);
m.add(nail);
}
return m;
}
/* Add a ground-level plank at grid position */
addPlank(gx, gz) {
var k = gx + ',' + gz; if (this.occ.has(k)) return false;
var m = this._createPlankMesh(gx, gz, 0);
this.planks.push({ x: gx, z: gz, mesh: m }); this.occ.add(k); return true;
}
/* Check if a rectangular area of sub-cells is free on a plank for a given occupancy map */
_subgridFree(occMap, gx, gz, layer, sx, sz, w, h) {
var key = gx + ',' + gz + ',' + layer;
var cells = occMap.get(key);
if (!cells) return true;
for (var dx = 0; dx < w; dx++) {
for (var dz = 0; dz < h; dz++) {
if (cells.has((sx + dx) + ',' + (sz + dz))) return false;
}
}
return true;
}
/* Mark sub-cells as occupied */
_subgridMark(occMap, gx, gz, layer, sx, sz, w, h) {
var key = gx + ',' + gz + ',' + layer;
if (!occMap.has(key)) occMap.set(key, new Set());
var cells = occMap.get(key);
for (var dx = 0; dx < w; dx++) {
for (var dz = 0; dz < h; dz++) {
cells.add((sx + dx) + ',' + (sz + dz));
}
}
}
/* Check if sub-area overlaps with ANY occupancy (pillars + storages) */
_subgridFreeAll(gx, gz, layer, sx, sz, w, h) {
return this._subgridFree(this.pillarOcc, gx, gz, layer, sx, sz, w, h) &&
this._subgridFree(this.storageOcc, gx, gz, layer, sx, sz, w, h);
}
/* Convert sub-grid position to world offset within a plank.
* Plank is CONFIG.RPS x CONFIG.RPS. Sub-grid is 10x10.
* Sub-cell (0,0) is at plank corner (-RPS/2, -RPS/2), (9,9) at (+RPS/2 - cellSize, +RPS/2 - cellSize) */
_subToWorld(gx, gz, sx, sz, w, h) {
var s = CONFIG.RPS;
var cellSize = s / 10;
var cx = gx * s - s / 2 + (sx + w / 2) * cellSize;
var cz = gz * s - s / 2 + (sz + h / 2) * cellSize;
return { x: cx, z: cz };
}
/* Add a pillar (vertical column) at sub-grid position on given layer (0 = ground).
* Pillar is 2x2 sub-cells. sx, sz are top-left sub-cell coordinates (0..8). */
addPillar(gx, gz, layer, sx, sz) {
layer = layer || 0;
sx = (sx !== undefined) ? sx : 4; // default center
sz = (sz !== undefined) ? sz : 4;
/* Bounds check: 2x2 must fit in 0..9 */
if (sx < 0 || sx > 8 || sz < 0 || sz > 8) return false;
/* Check that there is a base plank or upper plank below */
if (layer === 0) { if (!this.occ.has(gx + ',' + gz)) return false; }
else { if (!this.upperOcc.has(gx + ',' + gz + ',' + layer)) return false; }
/* Check sub-grid is free */
if (!this._subgridFreeAll(gx, gz, layer, sx, sz, 2, 2)) return false;
var s = CONFIG.RPS, ph = CONFIG.PILLAR_H;
var cellSize = s / 10;
var pillarSize = 2 * cellSize; // 2 sub-cells wide
var baseY = layer * ph + CONFIG.RPH / 2;
var pos = this._subToWorld(gx, gz, sx, sz, 2, 2);
/* Build a pillar: a box sized to 2x2 sub-cells */
var geo = new THREE.BoxGeometry(pillarSize * 0.8, ph, pillarSize * 0.8);
var mat = new THREE.MeshLambertMaterial({ color: 0x6B4F12 });
var m = new THREE.Mesh(geo, mat); m.castShadow = true; m.receiveShadow = true;
m.position.set(pos.x, baseY + ph / 2, pos.z);
this.g.add(m);
/* Add cross braces for visual detail */
var braceGeo = new THREE.BoxGeometry(0.08, 0.08, pillarSize * 0.6);
var braceMat = new THREE.MeshLambertMaterial({ color: 0x5A3E10 });
var b1 = new THREE.Mesh(braceGeo, braceMat);
b1.position.y = ph * 0.2; b1.rotation.y = Math.PI / 4; m.add(b1);
var b2 = new THREE.Mesh(braceGeo.clone(), braceMat.clone());
b2.position.y = -ph * 0.2; b2.rotation.y = -Math.PI / 4; m.add(b2);
this.pillars.push({ gx: gx, gz: gz, sx: sx, sz: sz, layer: layer, mesh: m });
this._subgridMark(this.pillarOcc, gx, gz, layer, sx, sz, 2, 2);
return true;
}
/* Add a storage box at sub-grid position. Box is 3x3 sub-cells. */
addStorage(gx, gz, layer, sx, sz) {
layer = layer || 0;
sx = (sx !== undefined) ? sx : 3; // default near center
sz = (sz !== undefined) ? sz : 3;
/* Bounds check: 3x3 must fit in 0..9 */
if (sx < 0 || sx > 7 || sz < 0 || sz > 7) return false;
/* Check base plank exists */
if (layer === 0) { if (!this.occ.has(gx + ',' + gz)) return false; }
else { if (!this.upperOcc.has(gx + ',' + gz + ',' + layer)) return false; }
/* Check sub-grid is free */
if (!this._subgridFreeAll(gx, gz, layer, sx, sz, 3, 3)) return false;
var s = CONFIG.RPS, cellSize = s / 10;
var boxSize = 3 * cellSize;
var pos = this._subToWorld(gx, gz, sx, sz, 3, 3);
var baseY = layer === 0 ? CONFIG.RPH / 2 : layer * CONFIG.PILLAR_H + CONFIG.RPH / 2;
/* Build box mesh */
var geo = new THREE.BoxGeometry(boxSize * 0.85, boxSize * 0.85, boxSize * 0.85);
var mat = new THREE.MeshLambertMaterial({ color: 0x6B4F12 });
var m = new THREE.Mesh(geo, mat); m.castShadow = true; m.receiveShadow = true;
m.position.set(pos.x, baseY + boxSize * 0.85 / 2, pos.z);
this.g.add(m);
/* Add lid detail */
var lidGeo = new THREE.BoxGeometry(boxSize * 0.88, 0.04, boxSize * 0.88);
var lidMat = new THREE.MeshLambertMaterial({ color: 0x8B6914 });
var lid = new THREE.Mesh(lidGeo, lidMat);
lid.position.y = boxSize * 0.85 / 2 + 0.02; m.add(lid);
/* Metal clasp */
var claspGeo = new THREE.BoxGeometry(boxSize * 0.15, boxSize * 0.15, 0.03);
var claspMat = new THREE.MeshLambertMaterial({ color: 0x888888 });
var clasp = new THREE.Mesh(claspGeo, claspMat);
clasp.position.set(0, 0, boxSize * 0.85 / 2 + 0.01); m.add(clasp);
this.storages.push({ gx: gx, gz: gz, sx: sx, sz: sz, layer: layer, mesh: m });
this._subgridMark(this.storageOcc, gx, gz, layer, sx, sz, 3, 3);
return true;
}
/* Add stairs at grid position connecting layer to layer+1 */
addStairs(gx, gz, layer) {
layer = layer || 0;
var sk = gx + ',' + gz + ',' + layer;
if (this.stairOcc.has(sk)) return false;
/* Must have base plank or upper plank at this position */
if (layer === 0) { if (!this.occ.has(gx + ',' + gz)) return false; }
else { if (!this.upperOcc.has(gx + ',' + gz + ',' + layer)) return false; }
var s = CONFIG.RPS, ph = CONFIG.PILLAR_H;
var baseY = layer * ph + CONFIG.RPH / 2;
/* Build stairs as a series of steps */
var stairGroup = new THREE.Group();
var stepCount = 6;
var stepH = ph / stepCount;
var stepD = (s * 0.8) / stepCount;
var stepMat = new THREE.MeshLambertMaterial({ color: 0x8B6914 });
for (var i = 0; i < stepCount; i++) {
var stepGeo = new THREE.BoxGeometry(s * 0.6, 0.08, stepD * 0.9);
var step = new THREE.Mesh(stepGeo, stepMat.clone());
step.position.set(0, i * stepH + stepH / 2, -s * 0.4 + i * stepD + stepD / 2);
step.castShadow = true; step.receiveShadow = true;
stairGroup.add(step);
}
/* Side rails */
var railGeo = new THREE.BoxGeometry(0.06, ph + 0.3, 0.06);
var railMat = new THREE.MeshLambertMaterial({ color: 0x6B4F12 });
var railL = new THREE.Mesh(railGeo, railMat);
railL.position.set(-s * 0.3, ph / 2, 0); stairGroup.add(railL);
var railR = new THREE.Mesh(railGeo.clone(), railMat.clone());
railR.position.set(s * 0.3, ph / 2, 0); stairGroup.add(railR);
/* Handrail diagonal */
var hrGeo = new THREE.BoxGeometry(0.04, 0.04, Math.sqrt(ph * ph + s * s * 0.64) * 0.85);
var hrMat = new THREE.MeshLambertMaterial({ color: 0x5A3E10 });
var angle = Math.atan2(ph, s * 0.8);
var hrL = new THREE.Mesh(hrGeo, hrMat);
hrL.position.set(-s * 0.3, ph / 2 + 0.15, 0); hrL.rotation.x = -angle; stairGroup.add(hrL);
var hrR = new THREE.Mesh(hrGeo.clone(), hrMat.clone());
hrR.position.set(s * 0.3, ph / 2 + 0.15, 0); hrR.rotation.x = -angle; stairGroup.add(hrR);
stairGroup.position.set(gx * s, baseY, gz * s);
this.g.add(stairGroup);
this.stairs.push({ x: gx, z: gz, layer: layer, mesh: stairGroup });
this.stairOcc.add(sk);
return true;
}
/* Check if there's any pillar on a given plank at the specified layer */
_hasPillarOnPlank(gx, gz, layer) {
var key = gx + ',' + gz + ',' + layer;
return this.pillarOcc.has(key) && this.pillarOcc.get(key).size > 0;
}
/* Add an upper plank at grid position on given layer (1+) */
addUpperPlank(gx, gz, layer) {
layer = layer || 1;
var uk = gx + ',' + gz + ',' + layer;
if (this.upperOcc.has(uk)) return false;
/* Must have a pillar below this position at layer-1 to support it,
* or be adjacent (4-connected) to an existing upper plank on the same layer */
var hasPillarBelow = this._hasPillarOnPlank(gx, gz, layer - 1);
var hasAdjacentUpper = false;
var nb = [[gx+1,gz],[gx-1,gz],[gx,gz+1],[gx,gz-1]];
for (var i = 0; i < nb.length; i++) {
if (this.upperOcc.has(nb[i][0] + ',' + nb[i][1] + ',' + layer)) { hasAdjacentUpper = true; break; }
}
if (!hasPillarBelow && !hasAdjacentUpper) return false;
var ph = CONFIG.PILLAR_H;
var y = layer * ph;
var m = this._createPlankMesh(gx, gz, y);
this.upperPlanks.push({ x: gx, z: gz, layer: layer, mesh: m });
this.upperOcc.add(uk);
return true;
}
/* Get all available neighbor slots for ground expansion */
getExpandSlots() {
var sl = [], ch = new Set();
for (var p = 0; p < this.planks.length; p++) { var pl = this.planks[p];
var nb = [{ x: pl.x + 1, z: pl.z }, { x: pl.x - 1, z: pl.z }, { x: pl.x, z: pl.z + 1 }, { x: pl.x, z: pl.z - 1 }];
for (var n = 0; n < nb.length; n++) { var k = nb[n].x + ',' + nb[n].z;
if (!this.occ.has(k) && !ch.has(k)) { sl.push(nb[n]); ch.add(k); } } }
return sl;
}
/* Get sub-grid slots where pillars (2x2) can be placed */
getPillarSlots(layer) {
layer = layer || 0;
var sl = [];
var srcPlanks = layer === 0 ? this.planks : this.upperPlanks.filter(function(p) { return p.layer === layer; });
for (var i = 0; i < srcPlanks.length; i++) {
var p = srcPlanks[i];
var gx = layer === 0 ? p.x : p.x;
var gz = layer === 0 ? p.z : p.z;
/* Skip planks that have stairs (stairs occupy the whole plank) */
if (this.stairOcc.has(gx + ',' + gz + ',' + layer)) continue;
/* Scan sub-grid for 2x2 positions that fit */
for (var sx = 0; sx <= 8; sx += 2) {
for (var sz = 0; sz <= 8; sz += 2) {
if (this._subgridFreeAll(gx, gz, layer, sx, sz, 2, 2)) {
sl.push({ x: gx, z: gz, sx: sx, sz: sz, layer: layer });
}
}
}
}
return sl;
}
/* Get sub-grid slots where storage boxes (3x3) can be placed.
* Step by 3 to align boxes in a grid pattern and limit slot count. */
getStorageSlots(layer) {
layer = layer || 0;
var sl = [];
var srcPlanks = layer === 0 ? this.planks : this.upperPlanks.filter(function(p) { return p.layer === layer; });
for (var i = 0; i < srcPlanks.length; i++) {
var p = srcPlanks[i];
var gx = layer === 0 ? p.x : p.x;
var gz = layer === 0 ? p.z : p.z;
if (this.stairOcc.has(gx + ',' + gz + ',' + layer)) continue;
/* Scan sub-grid for 3x3 positions, stepping by 3 for grid alignment */
for (var sx = 0; sx <= 7; sx += 3) {
for (var sz = 0; sz <= 7; sz += 3) {
if (this._subgridFreeAll(gx, gz, layer, sx, sz, 3, 3)) {
sl.push({ x: gx, z: gz, sx: sx, sz: sz, layer: layer });
}
}
}
}
return sl;
}
/* Get plank slots that can have stairs (planks without stairs) */
getStairsSlots(layer) {
layer = layer || 0;
var sl = [];
var srcPlanks = layer === 0 ? this.planks : this.upperPlanks.filter(function(p) { return p.layer === layer; });
for (var i = 0; i < srcPlanks.length; i++) {
var p = srcPlanks[i];
var sk = p.x + ',' + p.z + ',' + layer;
if (!this.stairOcc.has(sk)) {
sl.push({ x: p.x, z: p.z, layer: layer });
}
}
return sl;
}
/* Get slots where upper planks can be placed (above pillars or adjacent to existing upper planks) */
getUpperPlankSlots(layer) {
layer = layer || 1;
var sl = [], ch = new Set();
/* Positions above planks that have pillars on layer-1 */
for (var i = 0; i < this.pillars.length; i++) {
var p = this.pillars[i];
if (p.layer === layer - 1) {
var uk = p.gx + ',' + p.gz + ',' + layer;
if (!this.upperOcc.has(uk) && !ch.has(uk)) { sl.push({ x: p.gx, z: p.gz, layer: layer }); ch.add(uk); }
}
}
/* Positions adjacent to existing upper planks on this layer */
var existing = this.upperPlanks.filter(function(u) { return u.layer === layer; });
for (var i = 0; i < existing.length; i++) {
var u = existing[i];
var nb = [{ x: u.x+1, z: u.z }, { x: u.x-1, z: u.z }, { x: u.x, z: u.z+1 }, { x: u.x, z: u.z-1 }];
for (var n = 0; n < nb.length; n++) {
var uk = nb[n].x + ',' + nb[n].z + ',' + layer;
if (!this.upperOcc.has(uk) && !ch.has(uk)) {
/* Must have a pillar below OR be adjacent to an existing upper plank */
sl.push({ x: nb[n].x, z: nb[n].z, layer: layer }); ch.add(uk);
}
}
}
return sl;
}
/* Show highlight meshes at available slots */
showSlots() {
this.hideSlots();
this._slotMeshes = [];
var slots = this.getExpandSlots(), s = CONFIG.RPS;
for (var i = 0; i < slots.length; i++) {
var geo = new THREE.BoxGeometry(s - 0.1, 0.05, s - 0.1);
var mat = new THREE.MeshBasicMaterial({ color: 0x44ff88, transparent: true, opacity: 0.35 });
var m = new THREE.Mesh(geo, mat);
m.position.set(slots[i].x * s, CONFIG.RPH / 2 + 0.05, slots[i].z * s);
m.userData = { gx: slots[i].x, gz: slots[i].z };
this.g.add(m);
this._slotMeshes.push(m);
}
}
/* Show highlight meshes on existing planks (for placing items on raft - currently unused, kept for compatibility) */
showPlankSlots() {
this.hideSlots();
this._slotMeshes = [];
var s = CONFIG.RPS;
for (var i = 0; i < this.planks.length; i++) {
var pl = this.planks[i];
var geo = new THREE.BoxGeometry(s - 0.1, 0.05, s - 0.1);
var mat = new THREE.MeshBasicMaterial({ color: 0x44aaff, transparent: true, opacity: 0.35 });
var m = new THREE.Mesh(geo, mat);
m.position.set(pl.x * s, CONFIG.RPH / 2 + 0.05, pl.z * s);
m.userData = { gx: pl.x, gz: pl.z };
this.g.add(m);
this._slotMeshes.push(m);
}
}
/* Show pillar placement slots (sub-grid 2x2) - only show bottom preview */
showPillarSlots(layer) {
this.hideSlots();
this._slotMeshes = [];
var slots = this.getPillarSlots(layer), s = CONFIG.RPS, ph = CONFIG.PILLAR_H;
var cellSize = s / 10;
var pillarVisSize = 2 * cellSize;
var baseY = layer * ph + CONFIG.RPH / 2;
var previewHeight = 0.3; // Only show bottom of pillar
for (var i = 0; i < slots.length; i++) {
var pos = this._subToWorld(slots[i].x, slots[i].z, slots[i].sx, slots[i].sz, 2, 2);
var geo = new THREE.BoxGeometry(pillarVisSize * 0.85, previewHeight, pillarVisSize * 0.85);
var mat = new THREE.MeshBasicMaterial({ color: 0xffaa44, transparent: true, opacity: 0.5 });
var m = new THREE.Mesh(geo, mat);
m.position.set(pos.x, baseY + previewHeight / 2, pos.z);
m.userData = { gx: slots[i].x, gz: slots[i].z, sx: slots[i].sx, sz: slots[i].sz, layer: layer };
this.g.add(m);
this._slotMeshes.push(m);
}
}
/* Show storage box placement slots (sub-grid 3x3) */
showStorageSlots(layer) {
this.hideSlots();
this._slotMeshes = [];
var slots = this.getStorageSlots(layer), s = CONFIG.RPS;
var cellSize = s / 10;
var boxVisSize = 3 * cellSize;
var baseY = layer === 0 ? CONFIG.RPH / 2 : layer * CONFIG.PILLAR_H + CONFIG.RPH / 2;
for (var i = 0; i < slots.length; i++) {
var pos = this._subToWorld(slots[i].x, slots[i].z, slots[i].sx, slots[i].sz, 3, 3);
var geo = new THREE.BoxGeometry(boxVisSize * 0.85, boxVisSize * 0.6, boxVisSize * 0.85);
var mat = new THREE.MeshBasicMaterial({ color: 0xaa88ff, transparent: true, opacity: 0.3 });
var m = new THREE.Mesh(geo, mat);
m.position.set(pos.x, baseY + boxVisSize * 0.3, pos.z);
m.userData = { gx: slots[i].x, gz: slots[i].z, sx: slots[i].sx, sz: slots[i].sz, layer: layer };
this.g.add(m);
this._slotMeshes.push(m);
}
}
/* Show stairs placement slots */
showStairsSlots(layer) {
this.hideSlots();
this._slotMeshes = [];
var slots = this.getStairsSlots(layer), s = CONFIG.RPS, ph = CONFIG.PILLAR_H;
var baseY = layer * ph + CONFIG.RPH / 2;
for (var i = 0; i < slots.length; i++) {
var geo = new THREE.BoxGeometry(s * 0.7, ph * 0.5, s * 0.7);
var mat = new THREE.MeshBasicMaterial({ color: 0x44ffaa, transparent: true, opacity: 0.3 });
var m = new THREE.Mesh(geo, mat);
m.position.set(slots[i].x * s, baseY + ph * 0.25, slots[i].z * s);
m.userData = { gx: slots[i].x, gz: slots[i].z, layer: layer };
this.g.add(m);
this._slotMeshes.push(m);
}
}
/* Show upper plank placement slots */
showUpperPlankSlots(layer) {
this.hideSlots();
this._slotMeshes = [];
var slots = this.getUpperPlankSlots(layer), s = CONFIG.RPS, ph = CONFIG.PILLAR_H;
var y = layer * ph;
for (var i = 0; i < slots.length; i++) {
var geo = new THREE.BoxGeometry(s - 0.1, 0.05, s - 0.1);
var mat = new THREE.MeshBasicMaterial({ color: 0x44ff88, transparent: true, opacity: 0.35 });
var m = new THREE.Mesh(geo, mat);
m.position.set(slots[i].x * s, y + 0.05, slots[i].z * s);
m.userData = { gx: slots[i].x, gz: slots[i].z, layer: layer };
this.g.add(m);
this._slotMeshes.push(m);
}
}
/* Hide slot highlights */
hideSlots() {
if (!this._slotMeshes) return;
for (var i = 0; i < this._slotMeshes.length; i++) {
this.g.remove(this._slotMeshes[i]);
this._slotMeshes[i].geometry.dispose();
this._slotMeshes[i].material.dispose();
}
this._slotMeshes = [];
}
/* Remove a ground plank at grid position. Cannot remove the last plank. */
removePlank(gx, gz) {
if (this.planks.length <= 1) return false; // keep at least one plank
var k = gx + ',' + gz;
if (!this.occ.has(k)) return false;
/* Check if any pillar, stairs or storage sits on this plank at layer 0 */
if (this._hasPillarOnPlank(gx, gz, 0)) return false;
if (this.stairOcc.has(gx + ',' + gz + ',0')) return false;
var storageKey = gx + ',' + gz + ',0';
if (this.storageOcc.has(storageKey) && this.storageOcc.get(storageKey).size > 0) return false;
/* Check if any upper plank depends on pillar on this plank (already blocked above) */
for (var i = 0; i < this.planks.length; i++) {
if (this.planks[i].x === gx && this.planks[i].z === gz) {
this.g.remove(this.planks[i].mesh);
this.planks[i].mesh.traverse(function(child) {
if (child.geometry) child.geometry.dispose();
if (child.material) child.material.dispose();
});
this.planks.splice(i, 1);
break;
}
}
this.occ.delete(k);
return true;
}
/* Remove a pillar at given position */
removePillar(gx, gz, layer, sx, sz) {
for (var i = 0; i < this.pillars.length; i++) {
var p = this.pillars[i];
if (p.gx === gx && p.gz === gz && p.layer === layer && p.sx === sx && p.sz === sz) {
this.g.remove(p.mesh);
p.mesh.traverse(function(child) {
if (child.geometry) child.geometry.dispose();
if (child.material) child.material.dispose();
});
this.pillars.splice(i, 1);
/* Unmark sub-grid cells */
var key = gx + ',' + gz + ',' + layer;
var cells = this.pillarOcc.get(key);
if (cells) {
for (var dx = 0; dx < 2; dx++) {
for (var dz = 0; dz < 2; dz++) {
cells.delete((sx + dx) + ',' + (sz + dz));
}
}
if (cells.size === 0) this.pillarOcc.delete(key);
}
return true;
}
}
return false;
}
/* Remove stairs at given position */
removeStairs(gx, gz, layer) {
var sk = gx + ',' + gz + ',' + layer;
if (!this.stairOcc.has(sk)) return false;
for (var i = 0; i < this.stairs.length; i++) {
var s = this.stairs[i];
if (s.x === gx && s.z === gz && s.layer === layer) {
this.g.remove(s.mesh);
/* Stairs are a group, dispose children */
s.mesh.traverse(function(child) {
if (child.geometry) child.geometry.dispose();
if (child.material) child.material.dispose();
});
this.stairs.splice(i, 1);
break;
}
}
this.stairOcc.delete(sk);
return true;
}
/* Remove an upper plank at given position */
removeUpperPlank(gx, gz, layer) {
var uk = gx + ',' + gz + ',' + layer;
if (!this.upperOcc.has(uk)) return false;
/* Check if anything is built on this upper plank */
if (this._hasPillarOnPlank(gx, gz, layer)) return false;
if (this.stairOcc.has(gx + ',' + gz + ',' + layer)) return false;
var storageKey = gx + ',' + gz + ',' + layer;
if (this.storageOcc.has(storageKey) && this.storageOcc.get(storageKey).size > 0) return false;
for (var i = 0; i < this.upperPlanks.length; i++) {
var u = this.upperPlanks[i];
if (u.x === gx && u.z === gz && u.layer === layer) {
this.g.remove(u.mesh);
u.mesh.traverse(function(child) {
if (child.geometry) child.geometry.dispose();
if (child.material) child.material.dispose();
});
this.upperPlanks.splice(i, 1);
break;
}
}
this.upperOcc.delete(uk);
return true;
}
/* Remove a storage box at given position */
removeStorage(gx, gz, layer, sx, sz) {
for (var i = 0; i < this.storages.length; i++) {
var st = this.storages[i];
if (st.gx === gx && st.gz === gz && st.layer === layer && st.sx === sx && st.sz === sz) {
this.g.remove(st.mesh);
st.mesh.traverse(function(child) {
if (child.geometry) child.geometry.dispose();
if (child.material) child.material.dispose();
});
this.storages.splice(i, 1);
/* Unmark sub-grid cells */
var key = gx + ',' + gz + ',' + layer;
var cells = this.storageOcc.get(key);
if (cells) {
for (var dx = 0; dx < 3; dx++) {
for (var dz = 0; dz < 3; dz++) {
cells.delete((sx + dx) + ',' + (sz + dz));
}
}
if (cells.size === 0) this.storageOcc.delete(key);
}
return true;
}
}
return false;
}
/* Show demolish highlights for a specific type. Returns meshes for raycasting.
* Each mesh has userData describing what to demolish. */
showDemolishTargets(type) {
this.hideSlots();
this._slotMeshes = [];
var s = CONFIG.RPS;
if (type === 'plank') {
for (var i = 0; i < this.planks.length; i++) {
if (this.planks.length <= 1) break; // can't remove last plank
var p = this.planks[i];
/* Skip if stuff is built on it */
if (this._hasPillarOnPlank(p.x, p.z, 0)) continue;
if (this.stairOcc.has(p.x + ',' + p.z + ',0')) continue;
var stKey = p.x + ',' + p.z + ',0';
if (this.storageOcc.has(stKey) && this.storageOcc.get(stKey).size > 0) continue;
var geo = new THREE.BoxGeometry(s - 0.1, 0.08, s - 0.1);
var mat = new THREE.MeshBasicMaterial({ color: 0xff4444, transparent: true, opacity: 0.45 });
var m = new THREE.Mesh(geo, mat);
m.position.set(p.x * s, CONFIG.RPH / 2 + 0.08, p.z * s);
m.userData = { demolishType: 'plank', gx: p.x, gz: p.z };
this.g.add(m);
this._slotMeshes.push(m);
}
} else if (type === 'pillar') {
var cellSize = s / 10;
var pillarVisSize = 2 * cellSize;
for (var i = 0; i < this.pillars.length; i++) {
var p = this.pillars[i];
var pos = this._subToWorld(p.gx, p.gz, p.sx, p.sz, 2, 2);
var baseY = p.layer * CONFIG.PILLAR_H + CONFIG.RPH / 2;
var geo = new THREE.BoxGeometry(pillarVisSize * 0.85, CONFIG.PILLAR_H * 0.9, pillarVisSize * 0.85);
var mat = new THREE.MeshBasicMaterial({ color: 0xff4444, transparent: true, opacity: 0.35 });
var m = new THREE.Mesh(geo, mat);
m.position.set(pos.x, baseY + CONFIG.PILLAR_H / 2, pos.z);
m.userData = { demolishType: 'pillar', gx: p.gx, gz: p.gz, layer: p.layer, sx: p.sx, sz: p.sz };
this.g.add(m);
this._slotMeshes.push(m);
}
} else if (type === 'stairs') {
for (var i = 0; i < this.stairs.length; i++) {
var st = this.stairs[i];
var baseY = st.layer * CONFIG.PILLAR_H + CONFIG.RPH / 2;
var geo = new THREE.BoxGeometry(s * 0.7, CONFIG.PILLAR_H * 0.5, s * 0.7);
var mat = new THREE.MeshBasicMaterial({ color: 0xff4444, transparent: true, opacity: 0.35 });
var m = new THREE.Mesh(geo, mat);
m.position.set(st.x * s, baseY + CONFIG.PILLAR_H * 0.25, st.z * s);
m.userData = { demolishType: 'stairs', gx: st.x, gz: st.z, layer: st.layer };
this.g.add(m);
this._slotMeshes.push(m);
}
} else if (type === 'upper_plank') {
for (var i = 0; i < this.upperPlanks.length; i++) {
var u = this.upperPlanks[i];
/* Skip if stuff is built on it */
if (this._hasPillarOnPlank(u.x, u.z, u.layer)) continue;
if (this.stairOcc.has(u.x + ',' + u.z + ',' + u.layer)) continue;
var stKey = u.x + ',' + u.z + ',' + u.layer;
if (this.storageOcc.has(stKey) && this.storageOcc.get(stKey).size > 0) continue;