Мобильная версияКод: Выделить всё
// Import necessary Three.js modules
import * as THREE from 'three';
import { GLTFLoader } from './libs/addons/loaders/GLTFLoader.js';
import { OrbitControls } from './libs/addons/controls/OrbitControls.js';
// Get the container element for the 3D model
const modelContainer = document.getElementById('model-container');
// Create a WebGL renderer with transparency and anti-aliasing
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
// Function to handle renderer resize
function updateRendererSize() {
renderer.setSize(window.innerWidth, window.innerHeight);
}
updateRendererSize();
// Configure renderer settings
renderer.setClearColor(0x000000, 0);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
modelContainer.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = null;
// Lighting setup
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
directionalLight1.position.set(5, 5, 5);
directionalLight1.castShadow = true;
scene.add(directionalLight1);
const directionalLight2 = new THREE.DirectionalLight(0xffd700, 1);
directionalLight2.position.set(-5, 3, -5);
scene.add(directionalLight2);
const frontLight = new THREE.DirectionalLight(0xffffff, 1);
frontLight.position.set(0, 0, 5);
scene.add(frontLight);
const pointLight1 = new THREE.PointLight(0xff9000, 1, 10);
pointLight1.position.set(2, 2, 2);
scene.add(pointLight1);
const pointLight2 = new THREE.PointLight(0x0066ff, 1, 10);
pointLight2.position.set(-2, 2, -2);
scene.add(pointLight2);
// Camera setup
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(4, 5, 11);
// Controls setup
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;
controls.minDistance = 5;
controls.maxDistance = 20;
controls.minPolarAngle = 0.5;
controls.maxPolarAngle = 1.5;
controls.autoRotate = false;
controls.target = new THREE.Vector3(0, 1, 0);
controls.enabled = false;
controls.update();
// Variables for model interaction
let modelMesh;
const mouse = new THREE.Vector2();
const targetRotation = new THREE.Vector2();
const currentRotation = new THREE.Vector2();
const smoothness = 0.1;
let clock = new THREE.Clock();
let isMobile = window.innerWidth {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
if (child.material) {
child.material.transparent = false;
child.material.opacity = 1;
child.material.depthWrite = true;
child.material.depthTest = true;
child.material.metalness = 0.7;
child.material.roughness = 0.3;
child.material.color = new THREE.Color(0xcccccc);
child.material.envMapIntensity = 1.5;
child.material.needsUpdate = true;
}
}
});
// Adjust scale based on device
const scale = isMobile ? 20 : 30;
modelMesh.scale.set(scale, scale, scale);
// Center the model
modelMesh.position.set(0, 0, 0);
scene.add(modelMesh);
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
const environmentTexture = pmremGenerator.fromScene(new THREE.Scene()).texture;
scene.environment = environmentTexture;
// Adjust camera position based on device
if (isMobile) {
camera.position.set(0, 4, 12);
} else {
camera.position.set(8, 4, 8);
}
controls.update();
document.getElementById('progress-container').style.display = 'none';
},
(xhr) => {
console.log(`loading ${xhr.loaded / xhr.total * 100}%`);
},
(error) => {
console.error(error);
}
);
// Animation loop
function animate() {
requestAnimationFrame(animate);
if (modelMesh) {
if (isMobile) {
// Floating animation for mobile
const time = clock.getElapsedTime();
modelMesh.position.y = Math.sin(time) * 0.3;
modelMesh.rotation.y = time * 0.2;
} else {
// Mouse-based animation for desktop
currentRotation.x += (targetRotation.x - currentRotation.x) * smoothness;
currentRotation.y += (targetRotation.y - currentRotation.y) * smoothness;
modelMesh.rotation.x = currentRotation.x;
modelMesh.rotation.y = currentRotation.y;
}
}
renderer.render(scene, camera);
}
// Handle window resize
window.addEventListener('resize', () => {
isMobile = checkMobile();
updateRendererSize();
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
// Update camera position on resize
if (modelMesh) {
if (isMobile) {
camera.position.set(0, 4, 12);
modelMesh.scale.set(20, 20, 20);
modelMesh.position.set(0, 0, 0);
} else {
camera.position.set(8, 4, 8);
modelMesh.scale.set(30, 30, 30);
modelMesh.position.set(0, 0, 0);
}
}
controls.update();
});
animate();
Код: Выделить всё
Elegance Studio
{
"imports": {
"three": "./libs/three.module.js",
"three/addons/": "./libs/addons/"
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #002642, #111111);
color: #F2F2F2;
min-height: 100vh;
overflow-x: hidden;
}
#model-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.container {
position: relative;
z-index: 1;
padding: 1rem;
}
.hero-content {
backdrop-filter: blur(1px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(0, 38, 66, 0.2);
border-radius: 12px;
border: 1px solid rgba(204, 255, 0, 0.2);
padding: 1.5rem;
margin: 1rem;
margin-top: 70px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: 1rem;
background: linear-gradient(45deg, #CCFF00, #F2F2F2);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.subtitle {
font-size: clamp(1rem, 3vw, 1.2rem);
margin-bottom: 2rem;
color: rgba(242, 242, 242, 0.8);
text-align: center;
}
.specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.spec-item {
text-align: center;
padding: 1rem;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(51, 51, 51, 0.3);
border-radius: 8px;
border: 1px solid rgba(204, 255, 0, 0.2);
}
.cards-section {
padding: 1rem;
margin: 1rem;
}
h2 {
text-align: center;
margin-bottom: 2rem;
font-size: clamp(2rem, 4vw, 2.5rem);
background: linear-gradient(45deg, #CCFF00, #F2F2F2);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.card {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(0, 38, 66, 0.3);
border-radius: 12px;
border: 1px solid rgba(204, 255, 0, 0.2);
padding: 1.5rem;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.about-section {
padding: 2rem 1rem;
max-width: 1200px;
margin: 0 auto;
}
.about-content {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(0, 38, 66, 0.3);
border-radius: 12px;
border: 1px solid rgba(204, 255, 0, 0.2);
padding: 1.5rem;
margin: 1rem 0;
}
.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.contact-section {
padding: 2rem 1rem;
max-width: 1200px;
margin: 0 auto;
}
.contact-container {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(0, 38, 66, 0.3);
border-radius: 12px;
border: 1px solid rgba(204, 255, 0, 0.2);
padding: 1.5rem;
text-align: center;
}
.social-icons {
display: flex;
justify-content: center;
gap: clamp(1rem, 3vw, 2rem);
margin-top: 2rem;
}
.social-icons a {
color: #F2F2F2;
font-size: clamp(1.5rem, 4vw, 2rem);
transition: transform 0.3s ease, color 0.3s ease;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem;
background: rgba(0, 38, 66, 0.9);
backdrop-filter: blur(10px);
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar {
display: flex;
gap: 1rem;
}
.navbar a {
color: #F2F2F2;
text-decoration: none;
padding: 0.5rem 1rem;
transition: color 0.3s ease;
}
.navbar a:hover {
color: #CCFF00;
}
@media (max-width: 768px) {
.container {
padding: 0.5rem;
}
.hero-content {
margin: 0.5rem;
padding: 1rem;
margin-top: 60px;
}
.specs {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.cards-section {
padding: 0.5rem;
margin: 0.5rem;
}
.navbar {
display: none;
}
.header {
padding: 0.5rem;
}
}
@media (max-width: 480px) {
.spec-item {
padding: 0.8rem;
}
.social-icons {
gap: 1rem;
}
}
[url=#]Logo[/url]
[i][/i]
[url=#]Home[/url]
[url=#]About[/url]
[url=portfolio.html]Portfolio[/url]
[url=#]Services[/url]
[url=#]Contact[/url]
Elegance Studio DMV
Capturing Moments, Crafting Memories
Creativity
Artistic Vision
Quality
High Resolution
Timeless
Lasting Captures
Expertise
Creative Vision
Our artistry knows no bounds. We bring a unique touch to every shoot, ensuring each photograph tells
a captivating story.
Technical Mastery
Equipped with high-end cameras and advanced editing tools, we transform ordinary shots into stunning
visuals.
Professional Experience
With years of experience, our seasoned photographers deliver exceptional results, consistently
exceeding client expectations.
Adaptability
Whether it's a landscape or portrait, we tailor our approach to fit your vision, ensuring perfect
results in any setting.
About Us
Our Story
From our humble beginnings as passionate hobbyists, we've grown into a professional photography
brand. Our journey is marked by significant milestones that reflect our dedication and love for
the craft, evolving with every step to bring you exceptional photography.
Our Mission
We strive to capture the true essence of each moment, immortalizing emotions through our lens.
Our mission is to continuously innovate, pushing the boundaries of traditional photography to
deliver images that resonate deeply with our clients.
Our Approach
We center our process around you. Your needs and vision guide every project we undertake,
ensuring a personalized experience. With meticulous attention to detail, from the initial
concept to the final edit, we guarantee photographs that are as unique as you are.
Contact Us
[url=#][i][/i][/url]
[url=#][i][/i][/url]
[url=#][i][/i][/url]
[url=#][i][/i][/url]
Я пробовал использовать {% load static %} методы. я даже пытался поместить модель в созданную мной папку мультимедиа.
чего мне не хватает? сайт загружается, а модель нет.
Подробнее здесь: https://stackoverflow.com/questions/792 ... -in-django
