Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
N
Neos
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
1
Issues
1
List
Boards
Labels
Service Desk
Milestones
Merge Requests
4
Merge Requests
4
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Packages
Packages
List
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issues
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
MyCard
Neos
Commits
25abb3f9
Commit
25abb3f9
authored
Nov 13, 2022
by
Chunchi Che
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
try
parent
afc064d0
Pipeline
#17834
passed with stages
in 3 minutes and 10 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
140 additions
and
11 deletions
+140
-11
src/ui/Duel/simpleDuel.tsx
src/ui/Duel/simpleDuel.tsx
+140
-11
No files found.
src/ui/Duel/simpleDuel.tsx
View file @
25abb3f9
...
@@ -10,6 +10,12 @@ import React, { useEffect, useRef } from "react";
...
@@ -10,6 +10,12 @@ import React, { useEffect, useRef } from "react";
import
type
{
RootState
}
from
"
../../store
"
;
import
type
{
RootState
}
from
"
../../store
"
;
import
*
as
BABYLON
from
"
@babylonjs/core
"
;
import
*
as
BABYLON
from
"
@babylonjs/core
"
;
// CONFIG
const
GroundShape
=
{
width
:
6
,
height
:
6
};
const
CardSlotShape
=
{
width
:
0.5
,
height
:
0.75
,
depth
:
0.05
};
const
CardSlotRotation
=
new
BABYLON
.
Vector3
(
1.5
,
0
,
0
);
const
HandSlotShape
=
{
width
:
0.5
,
height
:
0.75
};
export
default
class
SimpleDuelPlateImpl
implements
IDuelPlate
{
export
default
class
SimpleDuelPlateImpl
implements
IDuelPlate
{
handsSelector
?:
TypeSelector
<
DuelData
.
Card
[]
>
;
handsSelector
?:
TypeSelector
<
DuelData
.
Card
[]
>
;
...
@@ -27,6 +33,56 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
...
@@ -27,6 +33,56 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
// ----- WebGL渲染 -----
// ----- WebGL渲染 -----
const
canvasRef
=
useRef
<
HTMLCanvasElement
>
(
null
);
const
canvasRef
=
useRef
<
HTMLCanvasElement
>
(
null
);
const
createCardSlot
=
(
name
:
string
,
position
:
BABYLON
.
Vector3
,
color
:
BABYLON
.
Color3
,
scene
:
BABYLON
.
Scene
)
=>
{
const
cardSlot
=
BABYLON
.
MeshBuilder
.
CreateBox
(
name
,
CardSlotShape
,
scene
);
cardSlot
.
position
=
position
;
cardSlot
.
rotation
=
CardSlotRotation
;
const
boxMaterail
=
new
BABYLON
.
StandardMaterial
(
"
boxMaterail
"
,
scene
);
boxMaterail
.
diffuseColor
=
color
;
cardSlot
.
material
=
boxMaterail
;
return
cardSlot
;
};
const
createHandSlot
=
(
name
:
string
,
position
:
BABYLON
.
Vector3
,
scene
:
BABYLON
.
Scene
)
=>
{
const
handSlot
=
BABYLON
.
MeshBuilder
.
CreatePlane
(
name
,
HandSlotShape
,
scene
);
handSlot
.
position
=
position
;
const
planeMaterial
=
new
BABYLON
.
StandardMaterial
(
"
planeMaterial
"
,
scene
);
planeMaterial
.
diffuseColor
=
BABYLON
.
Color3
.
White
();
handSlot
.
material
=
planeMaterial
;
handSlot
.
actionManager
=
new
BABYLON
.
ActionManager
(
scene
);
handSlot
.
actionManager
.
registerAction
(
new
BABYLON
.
ExecuteCodeAction
(
BABYLON
.
ActionManager
.
OnPickTrigger
,
(
event
)
=>
{
console
.
log
(
event
.
source
+
"
is clicked
"
);
}
)
);
return
handSlot
;
};
useEffect
(()
=>
{
useEffect
(()
=>
{
// 初始化Scene
// 初始化Scene
const
canvasCurrent
=
canvasRef
.
current
;
const
canvasCurrent
=
canvasRef
.
current
;
...
@@ -36,7 +92,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
...
@@ -36,7 +92,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
// 创建Camera
// 创建Camera
const
camera
=
new
BABYLON
.
FreeCamera
(
const
camera
=
new
BABYLON
.
FreeCamera
(
"
camera1
"
,
"
camera1
"
,
new
BABYLON
.
Vector3
(
1
,
5
,
-
10
),
// 俯视方向
new
BABYLON
.
Vector3
(
0
,
5
,
-
10
),
// 俯视方向
scene
scene
);
);
camera
.
setTarget
(
BABYLON
.
Vector3
.
Zero
());
// 俯视向前
camera
.
setTarget
(
BABYLON
.
Vector3
.
Zero
());
// 俯视向前
...
@@ -50,22 +106,95 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
...
@@ -50,22 +106,95 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
);
);
light
.
intensity
=
0.7
;
light
.
intensity
=
0.7
;
// 创建卡槽
// 创建魔法陷阱区
const
cardSlot
=
BABYLON
.
MeshBuilder
.
CreateBox
(
createCardSlot
(
"
cardSlot
"
,
"
cardSlot0
"
,
{
width
:
0.5
,
height
:
0.75
,
depth
:
0.05
},
new
BABYLON
.
Vector3
(
-
2
,
0.5
,
-
3
),
BABYLON
.
Color3
.
Blue
(),
scene
scene
);
);
cardSlot
.
position
=
new
BABYLON
.
Vector3
(
-
2
,
0.5
,
-
3
);
createCardSlot
(
cardSlot
.
rotation
=
new
BABYLON
.
Vector3
(
1.5
,
0
,
0
);
"
cardSlot1
"
,
const
boxMaterail
=
new
BABYLON
.
StandardMaterial
(
"
boxMaterail
"
,
scene
);
new
BABYLON
.
Vector3
(
-
1
,
0.5
,
-
3
),
boxMaterail
.
diffuseColor
=
BABYLON
.
Color3
.
Blue
();
BABYLON
.
Color3
.
Blue
(),
cardSlot
.
material
=
boxMaterail
;
scene
);
createCardSlot
(
"
cardSlot2
"
,
new
BABYLON
.
Vector3
(
0
,
0.5
,
-
3
),
BABYLON
.
Color3
.
Blue
(),
scene
);
createCardSlot
(
"
cardSlot3
"
,
new
BABYLON
.
Vector3
(
1
,
0.5
,
-
3
),
BABYLON
.
Color3
.
Blue
(),
scene
);
createCardSlot
(
"
cardSlot4
"
,
new
BABYLON
.
Vector3
(
2
,
0.5
,
-
3
),
BABYLON
.
Color3
.
Blue
(),
scene
);
// 创建怪兽区
createCardSlot
(
"
cardSlot5
"
,
new
BABYLON
.
Vector3
(
-
2
,
0.5
,
-
2
),
BABYLON
.
Color3
.
Red
(),
scene
);
createCardSlot
(
"
cardSlot6
"
,
new
BABYLON
.
Vector3
(
-
1
,
0.5
,
-
2
),
BABYLON
.
Color3
.
Red
(),
scene
);
createCardSlot
(
"
cardSlot7
"
,
new
BABYLON
.
Vector3
(
0
,
0.5
,
-
2
),
BABYLON
.
Color3
.
Red
(),
scene
);
createCardSlot
(
"
cardSlot8
"
,
new
BABYLON
.
Vector3
(
1
,
0.5
,
-
2
),
BABYLON
.
Color3
.
Red
(),
scene
);
createCardSlot
(
"
cardSlot9
"
,
new
BABYLON
.
Vector3
(
2
,
0.5
,
-
2
),
BABYLON
.
Color3
.
Red
(),
scene
);
// 创建额外怪兽区
createCardSlot
(
"
cardSlot10
"
,
new
BABYLON
.
Vector3
(
-
1
,
0.5
,
-
1
),
BABYLON
.
Color3
.
Yellow
(),
scene
);
createCardSlot
(
"
cardSlot11
"
,
new
BABYLON
.
Vector3
(
1
,
0.5
,
-
1
),
BABYLON
.
Color3
.
Yellow
(),
scene
);
// 创建手牌
createHandSlot
(
"
handSlot0
"
,
new
BABYLON
.
Vector3
(
-
2
,
0.5
,
-
4
),
scene
);
createHandSlot
(
"
handSlot1
"
,
new
BABYLON
.
Vector3
(
-
1
,
0.5
,
-
4
),
scene
);
createHandSlot
(
"
handSlot2
"
,
new
BABYLON
.
Vector3
(
0
,
0.5
,
-
4
),
scene
);
createHandSlot
(
"
handSlot3
"
,
new
BABYLON
.
Vector3
(
1
,
0.5
,
-
4
),
scene
);
createHandSlot
(
"
handSlot4
"
,
new
BABYLON
.
Vector3
(
2
,
0.5
,
-
4
),
scene
);
// 创建地板
// 创建地板
const
ground
=
BABYLON
.
MeshBuilder
.
CreateGround
(
const
ground
=
BABYLON
.
MeshBuilder
.
CreateGround
(
"
ground
"
,
"
ground
"
,
{
width
:
6
,
height
:
6
}
,
GroundShape
,
scene
scene
);
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment