three 流光效果 #39

msforest · 2022-03-28T16:15:00Z

<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/[email protected]/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>

The text was updated successfully, but these errors were encountered:

msforest · 2022-04-29T03:13:10Z

https://gist.github.com/jprivet-dev/ed47f7eb4ce89d743e1e50f42530d38f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

three 流光效果 #39

three 流光效果 #39

msforest commented Mar 28, 2022 •

edited

Loading

msforest commented Apr 29, 2022

three 流光效果 #39

three 流光效果 #39

Comments

msforest commented Mar 28, 2022 • edited Loading

msforest commented Apr 29, 2022

msforest commented Mar 28, 2022 •

edited

Loading