Hugging Face's logo

Spaces:
awacke1
/
HTML5-ThreeJS
Running

App Files Community
2
awacke1 commited on
Commit
1adf58c
·
verified ·
1 Parent(s): a3228af

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +82 -81
index.html CHANGED
@@ -1,86 +1,87 @@
1
- <script>
2
- var scene = new THREE.Scene();
3
- var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
4
- camera.position.set(0, 20, 50);
5
- var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
6
- renderer.setSize(window.innerWidth, window.innerHeight);
7
- // Lighting
8
- var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
9
- scene.add(ambientLight);
10
- var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
11
- directionalLight.position.set(0, 1, 1);
12
- scene.add(directionalLight);
13
- // Table
14
- var tableGeometry = new THREE.BoxGeometry(100, 1, 100);
15
- var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
16
- var table = new THREE.Mesh(tableGeometry, tableMaterial);
17
- table.position.set(0, -0.5, 0);
18
- scene.add(table);
19
- // Cards
20
- var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
21
- var cards = [];
22
- var textureLoader = new THREE.TextureLoader();
23
- var textures = [
24
- textureLoader.load('the_hidden_city_known_as_civilization1.png'),
25
- textureLoader.load('the_hidden_city_known_as_civilization2.png'),
26
- textureLoader.load('the_hidden_city_known_as_civilization3.png'),
27
- textureLoader.load('the_hidden_city_known_as_civilization4.png'),
28
- ];
29
- // Generate and place cards
30
- for (let i = 0; i < 52; i++) {
31
- var texture = textures[i % 4]; // Cycle through the textures for each card
32
- var materials = [
33
- new THREE.MeshLambertMaterial({ map: texture }), // top side
34
- new THREE.MeshLambertMaterial({ map: texture }), // bottom side
35
- new THREE.MeshLambertMaterial({ color: 0xaaaaaa }), // side materials
36
- new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),
37
- new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),
38
- new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),
39
- ];
40
- var card = new THREE.Mesh(cardGeometry, materials);
41
- card.position.set(Math.random() * 10 - 5, 0.1 * i, Math.random() * 10 - 5);
42
- scene.add(card);
43
- cards.push(card);
44
- }
45
- var raycaster = new THREE.Raycaster();
46
- var mouse = new THREE.Vector2();
47
- var selectedCard = null;
48
- var offset = new THREE.Vector3();
49
- function onMouseMove(event) {
50
- mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
51
- mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
52
- if (selectedCard) {
53
- raycaster.setFromCamera(mouse, camera);
54
- var intersects = raycaster.intersectObject(table, true);
55
- if (intersects.length > 0) {
56
- var intersect = intersects[0];
57
- selectedCard.position.copy(intersect.point.add(offset));
58
  }
59
  }
60
- }
61
- function onMouseDown(event) {
62
- mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
63
- mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
64
- raycaster.setFromCamera(mouse, camera);
65
- var intersects = raycaster.intersectObjects(cards, true);
66
- if (intersects.length > 0) {
67
- selectedCard = intersects[0].object;
68
- var intersects = raycaster.intersectObject(table, true);
69
  if (intersects.length > 0) {
70
- var intersect = intersects[0];
71
- offset.subVectors(selectedCard.position, intersect.point);
 
 
 
 
72
  }
73
  }
74
- }
75
- function onMouseUp(event) {
76
- selectedCard = null;
77
- }
78
- window.addEventListener('mousemove', onMouseMove, false);
79
- window.addEventListener('mousedown', onMouseDown, false);
80
- window.addEventListener('mouseup', onMouseUp, false);
81
- function animate() {
82
- requestAnimationFrame(animate);
83
- renderer.render(scene, camera);
84
- }
85
- animate();
86
- </script>
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>3D Card Game with Interactive Drag and Drop</title>
6
+ <style>
7
+ body { margin: 0; }
8
+ canvas { display: block; }
9
+ </style>
10
+ <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
11
+ </head>
12
+ <body>
13
+ <canvas id="gameCanvas"></canvas>
14
+
15
+ <script>
16
+ var scene = new THREE.Scene();
17
+ var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
18
+ camera.position.set(0, 20, 50);
19
+ var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
20
+ renderer.setSize(window.innerWidth, window.innerHeight);
21
+ // Lighting
22
+ var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
23
+ scene.add(ambientLight);
24
+ var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
25
+ directionalLight.position.set(0, 1, 1);
26
+ scene.add(directionalLight);
27
+ // Table
28
+ var tableGeometry = new THREE.BoxGeometry(100, 1, 100);
29
+ var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
30
+ var table = new THREE.Mesh(tableGeometry, tableMaterial);
31
+ table.position.set(0, -0.5, 0);
32
+ scene.add(table);
33
+ // Cards
34
+ var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
35
+ var cards = [];
36
+ // Generate and place cards
37
+ for (let i = 0; i < 52; i++) {
38
+ var cardMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
39
+ var card = new THREE.Mesh(cardGeometry, cardMaterial);
40
+ card.position.set(Math.random() * 10 - 5, 0.1 * i, Math.random() * 10 - 5);
41
+ scene.add(card);
42
+ cards.push(card);
43
+ }
44
+ var raycaster = new THREE.Raycaster();
45
+ var mouse = new THREE.Vector2();
46
+ var selectedCard = null;
47
+ var offset = new THREE.Vector3();
48
+ function onMouseMove(event) {
49
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
50
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
51
+ if (selectedCard) {
52
+ raycaster.setFromCamera(mouse, camera);
53
+ var intersects = raycaster.intersectObject(table, true);
54
+ if (intersects.length > 0) {
55
+ var intersect = intersects[0];
56
+ selectedCard.position.copy(intersect.point.add(offset));
57
+ }
58
  }
59
  }
60
+ function onMouseDown(event) {
61
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
62
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
63
+ raycaster.setFromCamera(mouse, camera);
64
+ var intersects = raycaster.intersectObjects(cards, true);
 
 
 
 
65
  if (intersects.length > 0) {
66
+ selectedCard = intersects[0].object;
67
+ var intersects = raycaster.intersectObject(table, true);
68
+ if (intersects.length > 0) {
69
+ var intersect = intersects[0];
70
+ offset.subVectors(selectedCard.position, intersect.point);
71
+ }
72
  }
73
  }
74
+ function onMouseUp(event) {
75
+ selectedCard = null;
76
+ }
77
+ window.addEventListener('mousemove', onMouseMove, false);
78
+ window.addEventListener('mousedown', onMouseDown, false);
79
+ window.addEventListener('mouseup', onMouseUp, false);
80
+ function animate() {
81
+ requestAnimationFrame(animate);
82
+ renderer.render(scene, camera);
83
+ }
84
+ animate();
85
+ </script>
86
+ </body>
87
+ </html>