//main.js
import './style.css'
import { THREEx } from './threex.js'
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { SpotLight } from 'three';
import {
GodRaysEffect, BloomEffect, BlendFunction, KernelSize,
SMAAEffect, EffectComposer, EffectPass, RenderPass
} from 'postprocessing';
// Setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.set(0, 0, 1);
camera.rotation.x = Math.PI / 2;
THREEx.WindowResize(renderer, camera)
const spaceTexture = new THREE.TextureLoader().load('space.jpg');
scene.background = spaceTexture;
const rainDrops = []
for (let j = 0; j < 6000; j++) {
const rainDrop = new THREE.Vector3(
Math.random() * 600 - 300,
Math.random() * 600 - 300,
Math.random() * 600 - 300
)
rainDrop.velocity = 0;
rainDrop.acceleration = 0.02;
rainDrops.push(rainDrop);
}
let rainGeo = new THREE.BufferGeometry().setFromPoints(rainDrops);
const rainTexture = new THREE.TextureLoader().load('circle.png');
const rainDropMaterial = new THREE.PointsMaterial({
color: 0xaaaaaa,
size: 0.7,
transparent: true,
map: rainTexture
})
let rain = new THREE.Points(
rainGeo,
rainDropMaterial
)
scene.add(rain)
function animate() {
requestAnimationFrame(animate);
scene.remove(rain)
rainDrops.forEach(p => {
//console.log(p)
p.velocity += p.acceleration;
p.y -= p.velocity;
if (p.y < -200) {
p.y = 200;
p.velocity = 0;
}
})
rainGeo = new THREE.BufferGeometry().setFromPoints(rainDrops);
rain = new THREE.Points(
rainGeo,
rainDropMaterial
)
rain.rotation.y += 0.002;
scene.add(rain)
renderer.render(scene, camera);
}
animate()
-----------------------
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>Jeff's Website</title>
</head>
<body>
<canvas id="bg"></canvas>
<main class="login-form">
<div>
<h2>TO INFINITY AND BEYOND</h2>
<div style="justify-content: space-around; display: flex;">
<div class="outline-btn">Contact Us</div>
<div class="outline-btn">Learn More</div>
</div>
</div>
</main>
<script type="module" src="/main.js"></script>
</body>
</html>
-----------------------
//style.css
.login-form {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.outline-btn {
border: 1px solid white;
background-color: transparent;
color: white;
padding: 3px 6px;
font-size: 20px;
cursor: pointer;
}
reference:
No comments:
Post a Comment