0
点赞
收藏
分享

微信扫一扫

全屏的微粒子3D动画特效

谷中百合517 2022-03-10 阅读 72


css

body {
margin: 0;
overflow: hidden;
}

#canvas {
background:radial-gradient(circle farthest-corner at center top, #071021, #19324a);
}

需要引入:​​three.min.js​​

另外js代码

window.addEventListener("load", init);

function init() {
let rot = 0; // 角度


const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("canvas"),
alpha: true
});


const scene = new THREE.Scene();


scene.fog = new THREE.Fog(0xaaaaaa, 50, 2000);


const camera = new THREE.PerspectiveCamera(70, 1000);


const geometry = new THREE.Geometry();

for (let i = 0; i < 10000; i++) {
const star = new THREE.Vector3();
star.x = THREE.Math.randFloatSpread(2000);
star.y = THREE.Math.randFloatSpread(2000);
star.z = THREE.Math.randFloatSpread(2000);

geometry.vertices.push(star)
}


const material = new THREE.PointsMaterial({
color: 0xffffff
});
const starField = new THREE.Points(geometry, material);
scene.add(starField);


function render() {
rot += 0.1;

const radian = (rot * Math.PI) / 180;

camera.position.x = 1000 * Math.sin(radian);
camera.position.z = 1000 * Math.cos(radian);

camera.lookAt(new THREE.Vector3(0, 0, 0));


renderer.render(scene, camera);

requestAnimationFrame(render);
}
render();


window.addEventListener("resize", onResize);

function onResize() {

const width = window.innerWidth;
const height = window.innerHeight;

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);


camera.aspect = width / height;
camera.updateProjectionMatrix();
}
// 初始化
onResize();
}

html代码

<canvas id="canvas"></canvas>

附上完整版html代码

因为js在后面版本移除了​​THREE.Geometry();​​方法,故我选择引入特定版本的js。

如果遇到其它错误自己感觉浏览器的提示自行修改即可

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}

#canvas {
width: 100%;
height: 100%;
background:radial-gradient(circle farthest-corner at center top, #071021, #19324a);
}

</style>
</head>
<body>
<canvas id="canvas"></canvas>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.js" integrity="sha512-NNyaCC2BKAfte54rx4joMGzGxpCIGxiZkizFH82XB2GR37x+IZN9YwFItYlsS9g1jFuhM9d18sJv9/dDLztdVg==" crossorigin="anonymous"></script>
<script language="JavaScript">
window.addEventListener("load", init);

function init() {
let rot = 0; // 角度

const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("canvas"),
alpha: true
});


console.log("==========")
const scene = new THREE.Scene();


scene.fog = new THREE.Fog(0xaaaaaa, 50, 2000);


const camera = new THREE.PerspectiveCamera(70, 1000);


const geometry = new THREE.Geometry();

for (let i = 0; i < 10000; i++) {
const star = new THREE.Vector3();
star.x = THREE.Math.randFloatSpread(2000);
star.y = THREE.Math.randFloatSpread(2000);
star.z = THREE.Math.randFloatSpread(2000);

geometry.vertices.push(star)
}


const material = new THREE.PointsMaterial({
color: 0xffffff
});
const starField = new THREE.Points(geometry, material);
scene.add(starField);


function render() {
rot += 0.1;

const radian = (rot * Math.PI) / 180;

camera.position.x = 1000 * Math.sin(radian);
camera.position.z = 1000 * Math.cos(radian);

camera.lookAt(new THREE.Vector3(0, 0, 0));


renderer.render(scene, camera);

requestAnimationFrame(render);
}
render();


window.addEventListener("resize", onResize);

function onResize() {

const width = window.innerWidth;
const height = window.innerHeight;

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);


camera.aspect = width / height;
camera.updateProjectionMatrix();
}
// 初始化
onResize();
}

</script>

</html>



举报

相关推荐

0 条评论