three+webgl+gsap实现三维粒子球旋转动画效果代码-html代码-BFW代码库

three+webgl+gsap实现三维粒子球旋转动画效果代码

代码语言：html

所属分类：粒子

代码描述：three+webgl+gsap实现三维粒子球旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
}
</style>

  
  
  
</head>

<body >

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.127.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.11.0.js"></script>
      <script  >
var scene = new THREE.Scene();
document.addEventListener("mousemove", onMouseMove, false);
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000);

var mouseX;
var mouseY;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener("resize", function () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

var distance = Math.min(200, window.innerWidth / 4);
var geometry = new THREE.BufferGeometry();
var vertices = [];
var colors = [];

for (var i = 0; i < 1600; i++) {
  var vertex = new THREE.Vector3();

  var theta = Math.acos(THREE.Math.randFloatSpread(2));
  var phi = THREE.Math.randFloatSpread(360);

  vertex.x = distance * Math.sin(theta) * Math.cos(phi);
  vertex.y = distance * Math.sin(theta) * Math.sin(phi);
  vertex.z = distance * Math.cos(theta);

  vertices.push(vertex.x, vertex.y, vertex.z);

  var color = new THREE.Color(Math.random() * 0xffffff);
  colors.push(color.r, color.g, color.b);
}

geometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(vertices, 3));

geometry.setAttribute(
"customColor",
new THREE.Float32BufferAttribute(colors, 3));


// Custom shader material
var shaderMaterial = new THREE.ShaderMaterial({
  uniforms: {
    color: { value: new THREE.Color(0xffffff) },
    size: { value: 2.0 } },

  vertexShader: `
    attribute vec3 customColor.........完整代码请登录后点击上方下载按钮下载查看