//main.js
import './style.css'
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(75, 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 = 1.3;
camera.rotation.y = -0.075;
camera.rotation.z = 0.65;
renderer.render(scene, camera);
const ambientLight = new THREE.AmbientLight(0x555555);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xff8c19);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight)
const orangeLight = new THREE.PointLight(0xcc6600, 1, 400, 1.7)
orangeLight.position.set(-200, 300, -200)
scene.add(orangeLight)
const redLight = new THREE.PointLight(0xd8547e, 1, 400, 1.7)
redLight.position.set(0, 300, 0)
scene.add(redLight)
const blueLight = new THREE.PointLight(0x3677ac, 1, 400, 1.7)
blueLight.position.set(200, 300, 200)
scene.add(blueLight)
scene.fog = new THREE.FogExp2(0x03544e, 0.001)
renderer.setClearColor(scene.fog.color)
const bloom = new BloomEffect({
blendFunction: BlendFunction.COLOR_DODGE,
kernelSize: KernelSize.SMALL,
useLuminanceFilter: true,
luminanceThreshold: 0.3,
luminanceSmoothing: 0.75
})
bloom.blendMode.opacity.value = 1.5
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, bloom));
const spaceTexture = new THREE.TextureLoader().load('space.jpg');
scene.background = spaceTexture;
const dustCloud = []
const smokeTexture = new THREE.TextureLoader().load('smoke particle.png');
for (let i = 0; i < 50; i++) {
const smoke = new THREE.Mesh(
new THREE.PlaneBufferGeometry(500, 500),
new THREE.MeshStandardMaterial({
map: smokeTexture,
transparent: true
})
)
smoke.position.set(
Math.random() * 800 - 400,
500,
Math.random() * 500 - 400
)
smoke.rotation.x = 1.16;
smoke.rotation.y = -0.12;
smoke.rotation.z = Math.random() * 2 * Math.PI;
smoke.material.opacity = 0.6;
scene.add(smoke)
dustCloud.push(smoke)
}
function moveCamera() {
const t = document.body.getBoundingClientRect().top;
camera.position.x = t * -0.002;
camera.rotation.y = t * -0.002;
camera.position.z = 30 - t * 0.01;
}
function animate() {
requestAnimationFrame(animate);
dustCloud.forEach(p => {
p.rotation.z -= 0.001;
})
composer.render();
}
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>
<div class="login-form">
<div class="login-div">
<div class="row">
<div class="logo"></div>
</div>
<div class="row center-align">
<h5>Sign in</h5>
<h6>Use your Red Stapler Account</h6>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email_input" type="email" class="validate">
<label for="email_input">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password_input" type="password" class="validate">
<label for="password_input">Password</label>
<div><a href="#"><b>Forgot password?</b></a></div>
</div>
</div>
<div class="row">
<div class="col s12">Not your computer? Use a Private Window to sign in. <a href="#"><b>Learn more</b></a></div>
</div>
<div class="row"></div>
<div class="row">
<div class="col s6"><a href="#">Create account</a></div>
<div class="col s6 right-align"><a class="waves-effect waves-light btn">Login</a></div>
</div>
</div>
</div>
</main>
<!--
<main>
<script type="module" src="/main.js"></script>
</body>
</html>
----------------------
//style.css
.login-div {
max-width: 430px;
padding: 35px;
border: 1px solid #ddd;
border-radius: 8px;
background: rgba(8,8,8,0.7);
box-shadow: 1px 1px 20px rgba(0,0,0,0.5);
}
.logo {
background-image: url("Logo.png");
width:100px;
height:100px;
border-radius: 50%;
margin:0 auto;
}
.login-form {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
reference:
No comments:
Post a Comment