Skip to content

Commit d2a368a

Browse files
JumpingKeyCapsJumpingKeyCaps
committed
feature(Assets): - Add a html with the three.js script to simply load a stl 3d model and displaying it + orbital control interaction.
1 parent e38534d commit d2a368a

File tree

1 file changed

+135
-0
lines changed

1 file changed

+135
-0
lines changed

‎app/src/main/assets/viewerStl.html

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>3D Viewer</title>
7+
<style>
8+
body { margin: 0; overflow: hidden; background-color: #EEE; }
9+
canvas { display: block; }
10+
</style>
11+
</head>
12+
<body>
13+
<script src="./three.min.js"></script>
14+
<script src="./STLLoader.js"></script>
15+
<script src="./OrbitControls.js"></script>
16+
17+
<script>
18+
// --- Variables globales pour l'état de la lumière ---
19+
let currentLightAngleRad = 150 * Math.PI / 180; // Angle initial en radians (approx pour 3,5,2)
20+
let currentLightRadius = 8; // Rayon constant pour l'orbite
21+
let currentLightHeight = -5; // Hauteur initiale
22+
23+
// --- Références globales (déclarées ici, définies plus bas) ---
24+
let scene, camera, renderer, controls, directionalLight;
25+
26+
// --- Fonction principale de mise à jour de la position de la lumière ---
27+
function updateLightPosition() {
28+
if (directionalLight) {
29+
const newX = currentLightRadius * Math.cos(currentLightAngleRad);
30+
const newZ = currentLightRadius * Math.sin(currentLightAngleRad);
31+
directionalLight.position.set(newX, currentLightHeight, newZ);
32+
console.log(`Light updated -> Angle: ${(currentLightAngleRad * 180 / Math.PI).toFixed(0)} deg, Height: <span class="math-inline">\{currentLightHeight\.toFixed\(2\)\}, Pos\(x\:</span>{newX.toFixed(2)}, z:${newZ.toFixed(2)})`);
33+
}
34+
}
35+
36+
// --- Fonctions "Setter" appelées depuis Android ---
37+
function setLightAngle(angleDegrees) {
38+
currentLightAngleRad = angleDegrees * Math.PI / 180;
39+
updateLightPosition(); // Met à jour la position après changement d'angle
40+
}
41+
42+
function setLightHeight(newY) {
43+
currentLightHeight = newY;
44+
updateLightPosition(); // Met à jour la position après changement de hauteur
45+
}
46+
47+
// --- Initialisation de la scène (assigne aux variables globales) ---
48+
// I. Scène
49+
scene = new THREE.Scene(); // Assigne à la variable globale
50+
scene.background = new THREE.Color(0xcccccc);
51+
52+
// II. Caméra
53+
camera = new THREE.PerspectiveCamera( // Assigne à la variable globale
54+
75, window.innerWidth / window.innerHeight, 0.1, 1000
55+
);
56+
camera.position.set(0, 1, 100); // Position initiale
57+
58+
// III. Renderer
59+
renderer = new THREE.WebGLRenderer({ antialias: true }); // Assigne à la variable globale
60+
renderer.setSize(window.innerWidth, window.innerHeight);
61+
document.body.appendChild(renderer.domElement);
62+
63+
// IV. Lumières
64+
const ambientLight = new THREE.AmbientLight(0x404040, 2);
65+
scene.add(ambientLight);
66+
67+
directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); // Assigne à la variable globale
68+
// Initialise la position une première fois en utilisant les valeurs globales
69+
updateLightPosition();
70+
scene.add(directionalLight);
71+
72+
// V. Contrôles
73+
controls = new THREE.OrbitControls(camera, renderer.domElement); // Assigne à la variable globale
74+
controls.enableDamping = true;
75+
controls.dampingFactor = 0.1;
76+
controls.screenSpacePanning = false;
77+
78+
// VI. Chargement du Modèle STL (Pas de changement ici)
79+
const loader = new THREE.STLLoader();
80+
loader.load(
81+
'./homme.stl',
82+
function (geometry) {
83+
// ... (code de chargement, centrage, échelle identique) ...
84+
console.log("STL Geometry loaded successfully (r125)");
85+
const material = new THREE.MeshPhongMaterial({
86+
color: 0x666699, specular: 0x111111, shininess: 30
87+
});
88+
const mesh = new THREE.Mesh(geometry, material);
89+
console.log("Mesh created (r125)");
90+
// --- Centrer et Redimensionner l'objet ---
91+
geometry.computeBoundingBox(); // Calcule la "boîte" qui entoure l'objet
92+
const boundingBox = geometry.boundingBox;
93+
const center = new THREE.Vector3();
94+
boundingBox.getCenter(center); // Trouve le centre géométrique de cette boîte
95+
96+
// Déplace l'objet pour que son centre géométrique soit à l'origine (0,0,0) du monde
97+
mesh.position.sub(center);
98+
console.log("Mesh centered (r125)");
99+
100+
// ... redimensionnement ...
101+
scene.add(mesh);
102+
103+
// ... ajustement position caméra ...
104+
105+
// Définit le point autour duquel OrbitControls va tourner
106+
const pivotY = size.y * scale * 0.5;
107+
const pivotX = size.x * scale * 0.5;
108+
controls.target.set(pivotX, pivotY, 0);
109+
controls.update();
110+
console.log("Camera and controls updated (r125)");
111+
},
112+
(xhr) => { /* ... progress ... */ },
113+
(error) => { /* ... error ... */ }
114+
);
115+
116+
// VII. Boucle d'Animation (identique)
117+
function animate() {
118+
requestAnimationFrame(animate);
119+
controls.update();
120+
renderer.render(scene, camera);
121+
}
122+
animate();
123+
124+
// VIII. Gestion du Redimensionnement (identique)
125+
window.addEventListener('resize', () => {
126+
camera.aspect = window.innerWidth / window.innerHeight;
127+
camera.updateProjectionMatrix();
128+
renderer.setSize(window.innerWidth , window.innerHeight);
129+
}, false);
130+
131+
console.log("Three.js (non-module r125, dual control) setup fully complete in HTML.");
132+
</script>
133+
134+
</body>
135+
</html>

0 commit comments

Comments
 (0)