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(); whiteMaterial.color.setHex(0xFF25FF); var blackMaterial = curveMaterial.clone(); blackMaterial.color.setHex(0x4D1AB1); var randomInRange = function randomInRange(min, max) { return min + Math.random() * (max - min); }; var createObjectData = function createObjectData(radius, length) { var r = 0.5; var multiplier = Math.floor(randomInRange(1, 5)); var origin = new THREE.Vector3(randomInRange(-r, r), randomInRange(-r, r), randomInRange(-r, r)); var start = randomInRange(0, 2 * Math.PI); var cylinderRadius = 0.1 * length; var rotation = randomInRange(-0.5, 0.5); var material = Math.random() > 0.25 ? Math.random() > 0.5 ? blackMaterial : whiteMaterial : curveMaterial; return { origin: origin, radius: radius, start: start, length: length, cylinderRadius: cylinderRadius, rotation: rotation, material: material, multiplier: multiplier }; }; var createCurveObjects = function createCurveObjects() { for (var i = 0, len = 20; i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0