<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>
