three 流光效果 - Githubissues

<html lang="en">
    <head>
        <title>流光效果</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    </head>
    <body>

        <!-- Import maps polyfill -->
        <!-- Remove this when import maps will be widely supported -->
        <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

        <script type="importmap">
            {
                "imports": {
                    "three": "../build/three.module.js"
                }
            }
        </script>

        <script type="module">

import * as THREE from 'three';
import { OrbitControls } from './jsm/controls/OrbitControls.js';

function main() {
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set(100, 100, 0);

    var scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x000000 );
    // scene.fog = new THREE.Fog( 0xffffff, 0, 750 );

    const light = new THREE.AmbientLight( 0xffffff, 0.2);
    // light.position.set( 0.5, 1, 0.75 );
    scene.add( light );
    scene.add( camera );

    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

  // 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼（惯性），这将给控制器带来重量感，如果该值被启用，必须在动画循环里调用.update()
controls.dampingFactor = 0.05; // 阻尼惯性大小

  const point1 = [50, 0, 0]; // 点1坐标
const point2 = [-50, 0, 0]; // 点2坐标
const controlPoint = [0, 50, 0]; // 控制点坐标

// 创建三维二次贝塞尔曲线
const curve = new THREE.QuadraticBezierCurve3(
  new THREE.Vector3(point1[0], point1[1], point1[2]),
  new THREE.Vector3(controlPoint[0], controlPoint[1], controlPoint[2]),
  new THREE.Vector3(point2[0], point2[1], point2[2])
);

const divisions = 20
const points = curve.getPoints(divisions)
console.log('points', points)

// 创建Geometry
const geometry = new THREE.BufferGeometry().setFromPoints(points);
// geometry.vertices = points; // 将上一步得到的点列表赋值给geometry的vertices属性
// var colors = new Array(points.length).fill(
//   new THREE.Color('#333300')
// );
var color = new THREE.Color('#ffff00')
var colors = []
for(var i=0; i<points.length; i++) {
    colors.push(color.r, color.g, color.b)
}
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

// 生成材质
const material = new THREE.LineBasicMaterial({
  vertexColors: true, // 顶点着色
  transparent: true, // 定义此材质是否透明
  side: THREE.DoubleSide,
});
const mesh = new THREE.Line(geometry, material);
scene.add(mesh)

let colorIndex = 0; // 高亮颜色流动的索引值
let timestamp = 0; // 时间戳

function animate() {
  controls.update();
  console.log('xxxx')
  // 时间间隔
  let now = new Date().getTime();
  if (now - timestamp > 30) {
    var colors = []
    new Array(divisions + 1)
      .fill(new THREE.Color('#ffff00'))
      .map((color, index) => {
        if (index === colorIndex) {
          var color = new THREE.Color('#ff0000');
          colors.push(color.r, color.g, color.b)
        }
        colors.push(color.r, color.g, color.b)
        return color;
      });
    geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

    // 如果geometry.colors数据发生变化，colorsNeedUpdate值需要被设置为true
    // geometry.colorsNeedUpdate = true;
    timestamp = now;
    colorIndex++;
    if (colorIndex > divisions) {
      colorIndex = 0;
    }
  }
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate()

}

main();

        </script>

    </body>
</html>
msforest / notebook

three 流光效果 #39
