Take a look at this:
<div class="canvas-container">
<canvas class="webglHH"> </canvas>
</div>
<div class="text-container">
<div class="title">
<h1>Hello</h1>
</div>
</div>
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.webglHH {
position: fixed;
top: 0;
left: 0;
outline: none;
}
.canvas-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.text-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: auto;
}
.title h1 {
color: yellow;
font-size: 52px;
}
import * as THREE from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x800080);
const sizes = {
width: window.innerWidth,
height: window.innerHeight,
};
const canvas = document.querySelector("canvas.webglHH");
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = -1;
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.render(scene, camera);
const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
scene.add(directionalLight);
const loader = new GLTFLoader();
let mesh;
loader.load("REACT.glb", (gltf) => {
mesh = gltf.scene;
mesh.scale.x = 10;
mesh.scale.y = 10;
scene.add(mesh);
});
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.enabled = true;
gsap.to(".canvas-container", {
x: 350,
duration: 3,
delay: 1,
repeat: -1,
yoyo: true,
});
function resize() {
sizes.width = window.innerWidth;
sizes.height = window.innerHeight;
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
renderer.setSize(sizes.width, sizes.height);
}
window.addEventListener("resize", () => {
resize();
});
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();