three实现canvas彩色圆弧绕圆球旋转动画效果代码-html代码-BFW代码库

three实现canvas彩色圆弧绕圆球旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现canvas彩色圆弧绕圆球旋转动画效果代码

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

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

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

    <style type="text/css">
        *{margin:0;padding:0;}
        body{overflow-x:hidden;}
    </style>

</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tween.min.js"></script>
    <script>
        // Referred to https://github.com/spite/looper/blob/master/loops/25.js

var clock = new THREE.Clock();
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x100A47);
scene.fog = new THREE.Fog(0x100A47, 1, 10000);

var objectGroup = new THREE.Group();

var sphere = void 0;

var map = function map(value, beforeMin, beforeMax, afterMin, afterMax) {
    return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin));
};

var getPointByAngle = function getPointByAngle(angle) {
    var x = Math.cos(angle);
    var y = Math.sin(angle);
    return { x: x, y: y };
};

var createCurveGeometry = function createCurveGeometry(origin, radius, angle, length, cylinderRadius) {
    var p = new THREE.Vector3();
    var vertices = [];

    var step = 0.1;

    for (var a = angle, len = angle + length; a < len; a += step) {
        var res = getPointByAngle(a);
        var z = Math.sin(a);
        p.set(radius * res.x, 1.25 * radius * res.y, z);
        p.add(origin);

        vertices.push(p.clone());
    }

    var path = new THREE.CatmullRomCurve3(vertices);
    return new THREE.TubeGeometry(path, 2 * vertices.length, cylinderRadius, 18, false);
};

var values = [];
var curveMaterial = new THREE.MeshStandardMaterial({
    wireframe: false,
    color: 0xffcc00,
    metalness: 0.1,
    roughness: 0.1,
    side: THREE.DoubleSide });


var whiteMaterial = curveMaterial.clone(.........完整代码请登录后点击上方下载按钮下载查看