Hugging Face's logo

Spaces:
ReikerXx
/
uex
Running

App Files Community
Reaperxxxx commited on
Commit
78320a0
·
verified ·
1 Parent(s): c78a17b

Update view.html

Browse files
Files changed (1) hide show
  1. view.html +47 -60
view.html CHANGED
@@ -2,16 +2,36 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
- <title>Three.js Character + Map</title>
6
  <style>
7
  body {
8
  margin: 0;
9
  overflow: hidden;
10
- background: #000;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  }
12
  </style>
13
 
14
- <!-- Import map setup -->
15
  <script type="importmap">
16
  {
17
  "imports": {
@@ -22,11 +42,16 @@
22
  </script>
23
  </head>
24
  <body>
 
 
 
 
 
25
  <script type="module">
26
  import * as THREE from 'three';
27
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
28
 
29
- let scene, camera, renderer, character, mapScene;
30
 
31
  init();
32
  animate();
@@ -34,83 +59,45 @@
34
  function init() {
35
  scene = new THREE.Scene();
36
  scene.background = new THREE.Color(0x1a1a2e);
37
- scene.fog = new THREE.Fog(0x1a1a2e, 5, 50);
38
 
39
  camera = new THREE.PerspectiveCamera(
40
  75,
41
  window.innerWidth / window.innerHeight,
42
- 0.01,
43
  50
44
  );
45
- camera.position.set(0, 2, 5);
46
 
47
  renderer = new THREE.WebGLRenderer({ antialias: true });
48
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
49
  renderer.setSize(window.innerWidth, window.innerHeight);
50
- renderer.shadowMap.enabled = true;
51
  document.body.appendChild(renderer.domElement);
52
 
53
- // --- Lighting setup (same as your original) ---
54
- scene.add(new THREE.AmbientLight(0xffffff, 0.7));
55
-
56
- const dirLight1 = new THREE.DirectionalLight(0xffffff, 0.8);
57
- dirLight1.position.set(20, 20, 20);
58
- dirLight1.castShadow = true;
59
- scene.add(dirLight1);
60
-
61
- const dirLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
62
- dirLight2.position.set(-20, 15, -20);
63
- scene.add(dirLight2);
64
-
65
- const dirLight3 = new THREE.DirectionalLight(0xffffff, 0.5);
66
- dirLight3.position.set(0, 20, -20);
67
- scene.add(dirLight3);
68
-
69
- const pointLight1 = new THREE.PointLight(0xffffff, 0.5, 50);
70
- pointLight1.position.set(10, 10, 10);
71
- scene.add(pointLight1);
72
 
73
- const pointLight2 = new THREE.PointLight(0xffffff, 0.5, 50);
74
- pointLight2.position.set(-10, 10, -10);
75
- scene.add(pointLight2);
76
-
77
- const pointLight3 = new THREE.PointLight(0xffffff, 0.4, 50);
78
- pointLight3.position.set(0, 5, 0);
79
- scene.add(pointLight3);
80
-
81
- // --- Load Map ---
82
  const loader = new GLTFLoader();
83
- loader.load('./map.glb', (gltf) => {
84
- mapScene = gltf.scene;
85
- mapScene.scale.set(-1, 1, 1);
86
- scene.add(mapScene);
87
-
88
- mapScene.traverse((child) => {
89
- child.castShadow = true;
90
- child.receiveShadow = true;
91
- });
92
- console.log('🗺️ Map loaded');
93
- });
94
-
95
- // --- Load Character ---
96
- const charLoader = new GLTFLoader();
97
- charLoader.load('./character.glb', (gltf) => {
98
  character = gltf.scene;
99
- character.scale.set(1, 1, 1);
100
  character.position.set(0, 0, 0);
101
  scene.add(character);
102
 
103
- character.traverse((child) => {
104
- child.castShadow = true;
105
- child.receiveShadow = true;
106
- });
107
-
108
- // Optional: Log bones
109
  gltf.scene.traverse((obj) => {
110
- if (obj.isBone) console.log('🦴 Bone:', obj.name);
111
  });
112
 
113
- console.log('🧍 Character loaded');
 
 
 
 
114
  });
115
 
116
  window.addEventListener('resize', onWindowResize);
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
+ <title>Character Bone Viewer</title>
6
  <style>
7
  body {
8
  margin: 0;
9
  overflow: hidden;
10
+ background: #111;
11
+ color: #0f0;
12
+ font-family: monospace;
13
+ }
14
+ #boneList {
15
+ position: fixed;
16
+ top: 10px;
17
+ left: 10px;
18
+ max-height: 95vh;
19
+ width: 300px;
20
+ overflow-y: auto;
21
+ background: rgba(0, 0, 0, 0.5);
22
+ padding: 10px;
23
+ border: 1px solid #0f0;
24
+ border-radius: 4px;
25
+ }
26
+ #boneList h2 {
27
+ margin-top: 0;
28
+ color: #0ff;
29
+ }
30
+ #boneList ul {
31
+ padding-left: 20px;
32
  }
33
  </style>
34
 
 
35
  <script type="importmap">
36
  {
37
  "imports": {
 
42
  </script>
43
  </head>
44
  <body>
45
+ <div id="boneList">
46
+ <h2>🦴 Bones</h2>
47
+ <ul id="bones"></ul>
48
+ </div>
49
+
50
  <script type="module">
51
  import * as THREE from 'three';
52
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
53
 
54
+ let scene, camera, renderer, character;
55
 
56
  init();
57
  animate();
 
59
  function init() {
60
  scene = new THREE.Scene();
61
  scene.background = new THREE.Color(0x1a1a2e);
 
62
 
63
  camera = new THREE.PerspectiveCamera(
64
  75,
65
  window.innerWidth / window.innerHeight,
66
+ 0.1,
67
  50
68
  );
69
+ camera.position.set(0, 1.5, 3);
70
 
71
  renderer = new THREE.WebGLRenderer({ antialias: true });
72
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
73
  renderer.setSize(window.innerWidth, window.innerHeight);
 
74
  document.body.appendChild(renderer.domElement);
75
 
76
+ // Lighting
77
+ const light = new THREE.DirectionalLight(0xffffff, 1);
78
+ light.position.set(2, 3, 4);
79
+ scene.add(light);
80
+ scene.add(new THREE.AmbientLight(0xffffff, 0.5));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
 
82
+ // Load character
 
 
 
 
 
 
 
 
83
  const loader = new GLTFLoader();
84
+ loader.load('./character.glb', (gltf) => {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  character = gltf.scene;
 
86
  character.position.set(0, 0, 0);
87
  scene.add(character);
88
 
89
+ // Display all bones
90
+ const boneList = document.getElementById('bones');
91
+ const bones = [];
 
 
 
92
  gltf.scene.traverse((obj) => {
93
+ if (obj.isBone) bones.push(obj.name);
94
  });
95
 
96
+ if (bones.length === 0) {
97
+ boneList.innerHTML = '<li>No bones found.</li>';
98
+ } else {
99
+ boneList.innerHTML = bones.map(name => `<li>${name}</li>`).join('');
100
+ }
101
  });
102
 
103
  window.addEventListener('resize', onWindowResize);