<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<style>
body { margin: 0; width: 100%; background: radial-gradient(#292929, #000000); }
canvas{display: block;width: 100%; height:500px; top: 0; left: 0;position: fixed; z-index: 10;}
.sec{height: 100vh; width: 100%; position: relative; display: block; z-index: 0;}
.sec.s1{background-color: rgb(149, 19, 19);}
.sec.s2{background-color: rgb(90, 14, 153);}
.sec.s3{background-color: rgb(6, 83, 100);}
.sec.s4{background-color: rgb(6, 95, 123);}
</style>
</head>
<body>
<canvas id="threebox"></canvas>
<div class="sec s1">1</div>
<div class="sec s2">2</div>
<div class="sec s3">3</div>
<div class="sec s4">4</div>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.166.1/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.166.1/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js'
let scene, camera, renderer, controls, pointlight, plhelper;
scene = new THREE.Scene();
const canvas = document.querySelector('#threebox');
renderer = new THREE.WebGLRenderer({alpha:true,antialias:true,canvas});
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.25;
camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight,0.1,100);
camera.position.set(0, 0, 2);
camera.lookAt(0, 0, 0);
pointlight = new THREE.PointLight(0xffffff, 2);
pointlight.position.set(10,10,10);
scene.add(pointlight);
const ambientLight = new THREE.AmbientLight(0xffffff, 3);
scene.add(ambientLight);
// OBJ 시작
const OBJloader = new OBJLoader() // materials 파일설정
let GLTFObjGroup = new THREE.Object3D()
const mtlLoader = new MTLLoader()
mtlLoader.load('../static/img/lemon.mtl', (mtl) => {
mtl.preload()
OBJloader.setMaterials(mtl);
OBJloader.load( '../static/img/lemon.obj',function (object) {
GLTFObjGroup.add(object);
GLTFObjGroup.scale.set(5, 5, 5);
GLTFObjGroup.position.set(0, 0, 0);
scene.add(GLTFObjGroup);
})
})
// OBJ 끝
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.defaults({
immediateRender: false,
scrub: true,
ease: "power1.inOut"
})
let modelAni = gsap.timeline();
modelAni.to(camera.position, {
duration: 1,
y: -0.07,
z: 2
})
//초기값
modelAni.to(camera.position, {
//x:0,
//y:0,
z: 2,
scrollTrigger: {
trigger: '.s2',
start: 'top bottom',
end: 'top bottom',
markers: true
}
})
modelAni.to(camera.position, {
//x:0,
y: -0.07,
z: 2,
scrollTrigger: {
trigger: '.s2',
start: 'top bottom',
end: 'top bottom',
markers: true
}
})
//초기값 끝
modelAni.to(camera.position, {
//x:0,
//y:0,
z: 2,
scrollTrigger: {
trigger: '.s2',
start: 'top bottom',
end: 'top bottom',
markers: true
}
})
modelAni.to(camera.position, {
//x:0,
//y:0,
z:1.5,
scrollTrigger: {
trigger: '.s2',
start: 'top bottom',
end: 'top top',
markers: true
}
})
// section three
modelAni.to(GLTFObjGroup.rotation, {
x: 3,
y: 3,
z: 0.5,
scrollTrigger: {
trigger: '.s3',
start: 'top bottom',
end: 'top top',
markers: true
}
})
modelAni.to(camera.position, {
x:0,
y:0,
z:1,
scrollTrigger: {
trigger: '.s3',
start: 'top bottom',
end: 'top top',
markers: true
}
})
// section four
modelAni.to(GLTFObjGroup.rotation, {
x: 3,
y: 3,
z: 0,
scrollTrigger: {
trigger: '.s4',
start: 'top center',
end: 'bottom center',
markers: true
}
})
modelAni.to(camera.position, {
x:1,
y:0.5,
z:2,
scrollTrigger: {
trigger: '.s4',
start: 'top bottom',
end: 'bottom center',
markers: true
}
})
// 애니메이션 함수
function animate(currentTime) {
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
animate();
// 반응형 처리
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
</body>
</html>
