three实现三维彩色小球汇聚成大球动画效果代码-html代码-BFW代码库

three实现三维彩色小球汇聚成大球动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维彩色小球汇聚成大球动画效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        * {
          margin: 0;
          padding:0;
        }
    </style>



</head>

<body >

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
    <script>
        window.addEventListener("load", init);
        
        function init() {
          let width = window.innerWidth;
          let height = window.innerHeight;
        
          const scene = new THREE.Scene();
          scene.background = new THREE.Color(0x050505);
        
          const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
          cameraSetBackDist = 7;
          camera.position.z = cameraSetBackDist;
        
          const light = new THREE.PointLight(0xffffff, 2);
          light.position.set(10, 10, 10);
          scene.add(light);
        
          const renderer = new THREE.WebGLRenderer();
          renderer.setSize(width, height);
          document.body.appendChild(renderer.domElement);
        
          const geometry = new THREE.IcosahedronGeometry(1, 10);
          const geometryPos = geometry.getAttribute("position").array;
          const mesh = [];
          const normalDirection = [];
        
          for (let i = 0; i < geometryPos.length; i += 9) {
            const geometry2 = new THREE.BufferGeometry();
        
            const vertices = new Float32Array([
            geometryPos[i],
            geometryPos[i + 1],
            geometryPos[i + 2],
            geometryPos[i + 3],
            geometryPos[i + 4],
            geometryPos[i + 5],
            geometryPos[i + 6],
            geometryPos[i + 7],
            geometryPos[i + 8]]);
        
        
            geometry2.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
            geometry2.setAttribute("normal", new THREE.BufferAttribute(vertices, 3));
        
            const normal = new THREE.Vector3(
            (geometryPos[i] + geometryPos[i + 3] + geometryPos[i + 6]) / 3,
            (geometryPos[i + 1] + geometryPos[i + 4] + geometryPos[i + 7]) / 3,
            (geometryPos[i + 2] + geometryPos[i + 5] + geometryPos[i + 8]) / 3);
        
        
            normal.normalize();
            const icoSphereGeometry = new THREE.IcosahedronGeometry(0.1, 1);
            const material = new THREE.MeshBasicMaterial({
   .........完整代码请登录后点击上方下载按钮下载查看