-
Notifications
You must be signed in to change notification settings - Fork 97
/
create-3d-geometry-from-2d-path.html
111 lines (101 loc) · 3.39 KB
/
create-3d-geometry-from-2d-path.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Create 3D Geometry from 2D Path</title>
<link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
<script src="/js/examples.js?ver=1.1.1"></script>
<script src="/lib/phaser.min.js?ver=3.52.0"></script>
<script src="/lib/enable3d/enable3d.phaserExtension.0.25.4.min.js"></script>
</head>
<body>
<script>
const { enable3d, Scene3D, Canvas, THREE } = ENABLE3D
class MainScene extends Scene3D {
constructor() {
super({ key: 'MainScene' })
}
init() {
this.accessThirdDimension()
}
create() {
this.third.warpSpeed()
this.third.camera.position.set(15, 15, 30)
// this.third.physics.debug.enable()
// curve
const curve = new THREE.Shape()
curve.arc(0, 0, 4, 0, Math.PI, false)
curve.arc(4, 0, 3, Math.PI, 2 * Math.PI, true)
this.third.physics.add.extrude({
y: 10,
shape: curve,
curveSegments: 10,
depth: 1,
bevelEnabled: false
})
// speechBalloon
const speechBalloon = new THREE.Shape()
speechBalloon.moveTo(3, 1)
speechBalloon.quadraticCurveTo(1, 1, 1, 2.5)
speechBalloon.quadraticCurveTo(1, 4, 2, 4)
speechBalloon.quadraticCurveTo(2, 4.8, 1.2, 5)
speechBalloon.quadraticCurveTo(2.4, 4.8, 2.6, 4)
speechBalloon.quadraticCurveTo(5, 4, 5, 2.5)
speechBalloon.quadraticCurveTo(5, 1, 3, 1)
this.third.physics.add.extrude({
x: 5,
y: 10,
z: 5,
shape: speechBalloon,
curveSegments: 10,
depth: 2,
bevelEnabled: true,
bevelSize: 0.4,
bevelThickness: 0.4
})
// heart
const heart = new THREE.Shape()
heart.moveTo(3, 1.6)
heart.bezierCurveTo(3, 1.48, 2.8, 1, 2, 1)
heart.bezierCurveTo(0.8, 1, 0.8, 2.5, 0.8, 2.5)
heart.bezierCurveTo(0.8, 3.2, 1.6, 4.08, 3, 4.8)
heart.bezierCurveTo(4.4, 4.08, 5.2, 3.2, 5.2, 2.5)
heart.bezierCurveTo(5.2, 2.5, 5.2, 1, 4, 1)
heart.bezierCurveTo(3.4, 1, 3, 1.48, 3, 1.6)
this.third.physics.add.extrude({
x: -5,
y: 10,
z: 5,
shape: heart,
curveSegments: 12,
depth: 1,
bevelEnabled: true,
bevelSize: 1,
bevelThickness: 1
})
this.third.physics.debug.enable()
}
}
const config = {
type: Phaser.WEBGL,
transparent: true,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: window.innerWidth * Math.max(1, window.devicePixelRatio / 2),
height: window.innerHeight * Math.max(1, window.devicePixelRatio / 2)
},
scene: [MainScene],
...Canvas()
}
window.addEventListener('load', () => {
enable3d(() => new Phaser.Game(config)).withPhysics('/lib/ammo/moz')
})
</script>
</body>
</html>