Nefertiti Bust
Le buste de Néfertiti, appelé aussi la tête de Néfertiti, est une sculpture de calcaire peinte du XIVe siècle av. J.-C., représentant Néfertiti, la grande épouse royale du pharaon égyptien de la XVIIIe dynastie Akhenaton, aujourd'hui exposée au Neues Museum de Berlin.
Retrouve le tuto sur Linkedin :
Artiste : Thoutmôsis
Date : vers 1345 av. J.-C.
<div id="threejs-container" style="width: 100vw; height: 100vh;"></div>
Code : Code Embed sur la page
1<div id="threejs-container" style="width: 100vw; height: 100vh;"></div><!-- Three.js Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- GLTFLoader for loading the 3D model -->
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
Code : Inside <head> tag
1<!-- Three.js Library -->
2<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
3<!-- GLTFLoader for loading the 3D model -->
4<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script><!-- Three.js Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- GLTFLoader for loading the 3D model -->
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script>
let scene, camera, renderer, model;
let targetRotation = { x: 0, y: 0 }; // Mouse-controlled rotation (target values)
let currentRotation = { x: 0, y: 0 }; // Current model rotation (smoothly adjusted)
let targetCameraX = 0; // Target X position for camera based on scroll
let currentCameraX = 0; // Current X position of camera (smoothly adjusted)
const rotationSpeed = 0.1; // Speed for smooth rotation of the model
const zoomLevel = 20; // Distance of the camera from the model
const smoothingFactor = 0.1; // Speed for smooth camera movement
const fov = 50; // Field of view for the camera
const initialRotationY = THREE.MathUtils.degToRad(0); // Initial Y-axis rotation of the model
function init() {
// Create scene
scene = new THREE.Scene();
// Setup camera
camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, zoomLevel); // Camera starts centered along the Z-axis
// Create renderer with transparent background
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 0); // Set background to transparent
document.getElementById('threejs-container').appendChild(renderer.domElement);
// Add lighting
scene.add(new THREE.AmbientLight(0xffffff, 0.3)); // Soft ambient light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(20, 20, 20).normalize();
scene.add(directionalLight);
// Load the 3D model
const loader = new THREE.GLTFLoader();
loader.load('/documents/nefertiti_bust.glb', function(gltf) {
model = gltf.scene;
model.position.set(10, -8, 0); // Position the model
model.scale.set(24, 24, 24); // Scale the model
model.rotation.y = initialRotationY; // Initial Y-axis rotation
scene.add(model); // Add model to the scene
// Start rendering loop
animate();
});
// Event listeners
window.addEventListener('resize', onResize); // Handle window resize
window.addEventListener('mousemove', onMouseMove); // Mouse movement for rotation
window.addEventListener('scroll', onScroll); // Scroll event for camera movement
}
// Handle window resize
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Update target rotation based on mouse position
function onMouseMove(event) {
const mouseX = (event.clientX / window.innerWidth) * 2 - 1; // Normalize mouse X
const mouseY = (event.clientY / window.innerHeight) * 2 - 1; // Normalize mouse Y
targetRotation.y = mouseX * Math.PI * 0.2 + initialRotationY; // Horizontal rotation
targetRotation.x = mouseY * Math.PI * 0.1; // Vertical rotation
}
// Handle scroll to adjust camera's X position
function onScroll() {
const scrollPercentage = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
if (scrollPercentage <= 0.3) {
// From 0 to 30% scroll: move camera X from 0 to 20
targetCameraX = THREE.MathUtils.lerp(0, 20, scrollPercentage / 0.3);
} else if (scrollPercentage <= 0.6) {
// From 30% to 60% scroll: move camera X from 20 to 10
targetCameraX = THREE.MathUtils.lerp(20, 10, (scrollPercentage - 0.3) / 0.3);
}
}
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Smoothly interpolate current rotation towards the target rotation
currentRotation.x += (targetRotation.x - currentRotation.x) * rotationSpeed;
currentRotation.y += (targetRotation.y - currentRotation.y) * rotationSpeed;
// Apply current rotation to the model
if (model) {
model.rotation.x = currentRotation.x; // X-axis rotation
model.rotation.y = currentRotation.y; // Y-axis rotation
}
// Smoothly interpolate camera's X position
currentCameraX += (targetCameraX - currentCameraX) * smoothingFactor;
camera.position.x = currentCameraX; // Update camera X position
// Render the scene
renderer.render(scene, camera);
}
// Initialize the scene and start the loop
init();
</script>
Code : Before <body/> tag
1<!-- Three.js Library -->
2<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
3<!-- GLTFLoader for loading the 3D model -->
4<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
5
6<script>
7 let scene, camera, renderer, model;
8 let targetRotation = { x: 0, y: 0 }; // Mouse-controlled rotation (target values)
9 let currentRotation = { x: 0, y: 0 }; // Current model rotation (smoothly adjusted)
10 let targetCameraX = 0; // Target X position for camera based on scroll
11 let currentCameraX = 0; // Current X position of camera (smoothly adjusted)
12
13 const rotationSpeed = 0.1; // Speed for smooth rotation of the model
14 const zoomLevel = 20; // Distance of the camera from the model
15 const smoothingFactor = 0.1; // Speed for smooth camera movement
16 const fov = 50; // Field of view for the camera
17 const initialRotationY = THREE.MathUtils.degToRad(0); // Initial Y-axis rotation of the model
18
19 function init() {
20 // Create scene
21 scene = new THREE.Scene();
22
23 // Setup camera
24 camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 0.1, 1000);
25 camera.position.set(0, 0, zoomLevel); // Camera starts centered along the Z-axis
26
27 // Create renderer with transparent background
28 renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
29 renderer.setSize(window.innerWidth, window.innerHeight);
30 renderer.setClearColor(0x000000, 0); // Set background to transparent
31 document.getElementById('threejs-container').appendChild(renderer.domElement);
32
33 // Add lighting
34 scene.add(new THREE.AmbientLight(0xffffff, 0.3)); // Soft ambient light
35 const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
36 directionalLight.position.set(20, 20, 20).normalize();
37 scene.add(directionalLight);
38
39 // Load the 3D model
40 const loader = new THREE.GLTFLoader();
41 loader.load('/documents/nefertiti_bust.glb', function(gltf) {
42 model = gltf.scene;
43 model.position.set(10, -8, 0); // Position the model
44 model.scale.set(24, 24, 24); // Scale the model
45 model.rotation.y = initialRotationY; // Initial Y-axis rotation
46 scene.add(model); // Add model to the scene
47
48 // Start rendering loop
49 animate();
50 });
51
52 // Event listeners
53 window.addEventListener('resize', onResize); // Handle window resize
54 window.addEventListener('mousemove', onMouseMove); // Mouse movement for rotation
55 window.addEventListener('scroll', onScroll); // Scroll event for camera movement
56 }
57
58 // Handle window resize
59 function onResize() {
60 camera.aspect = window.innerWidth / window.innerHeight;
61 camera.updateProjectionMatrix();
62 renderer.setSize(window.innerWidth, window.innerHeight);
63 }
64
65 // Update target rotation based on mouse position
66 function onMouseMove(event) {
67 const mouseX = (event.clientX / window.innerWidth) * 2 - 1; // Normalize mouse X
68 const mouseY = (event.clientY / window.innerHeight) * 2 - 1; // Normalize mouse Y
69
70 targetRotation.y = mouseX * Math.PI * 0.2 + initialRotationY; // Horizontal rotation
71 targetRotation.x = mouseY * Math.PI * 0.1; // Vertical rotation
72 }
73
74 // Handle scroll to adjust camera's X position
75 function onScroll() {
76 const scrollPercentage = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
77
78 if (scrollPercentage <= 0.3) {
79 // From 0 to 30% scroll: move camera X from 0 to 20
80 targetCameraX = THREE.MathUtils.lerp(0, 20, scrollPercentage / 0.3);
81 } else if (scrollPercentage <= 0.6) {
82 // From 30% to 60% scroll: move camera X from 20 to 10
83 targetCameraX = THREE.MathUtils.lerp(20, 10, (scrollPercentage - 0.3) / 0.3);
84 }
85 }
86
87 // Animation loop
88 function animate() {
89 requestAnimationFrame(animate);
90
91 // Smoothly interpolate current rotation towards the target rotation
92 currentRotation.x += (targetRotation.x - currentRotation.x) * rotationSpeed;
93 currentRotation.y += (targetRotation.y - currentRotation.y) * rotationSpeed;
94
95 // Apply current rotation to the model
96 if (model) {
97 model.rotation.x = currentRotation.x; // X-axis rotation
98 model.rotation.y = currentRotation.y; // Y-axis rotation
99 }
100
101 // Smoothly interpolate camera's X position
102 currentCameraX += (targetCameraX - currentCameraX) * smoothingFactor;
103 camera.position.x = currentCameraX; // Update camera X position
104
105 // Render the scene
106 renderer.render(scene, camera);
107 }
108
109 // Initialize the scene and start the loop
110 init();
111</script>