threejs实现canvas三维三角形隧道穿越动画效果代码
代码语言:html
所属分类:动画
代码描述:threejs实现canvas三维三角形隧道穿越动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ overflow: hidden; margin:0; } canvas{ position: absolute; top: 0; left: 0; width: 100%; height:100%; } </style> </head> <body> <canvas></canvas> <script> p = [ [389,246,0], [410,255,20], [413,268,7], [431,261,12], [418,244,30], [416,217,25], [420,205,8], [427,227,-20], [432,236,5], [444,228,12], [451,232,41], [446,246,72], [443,264,96], [446,278,65], [463,267,20], [460,258,-10], [464,243,-20], [459,233,0], [475,225,22], [484,225,29], [490,214,51], [476,202,55], [462,202,55], [446,205,42], [440,192,42], [430,183,72], [413,184,58], [406,191,32], [406,207,0], [402,220,0], [390,222,20], [385,228,10], [389,246,0] ]; </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script> <script> var w = window.innerWidth, h = window.innerHeight; window.onresize = function(){ var w = window.innerWidth, h = window.innerHeight; camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize( w, h ); } cameraSpeed = .0003; lightSpeed = .001; tubularSegments = 1000; radialSegments = 3; tubeRadius = 2; lightColor = 0xffffff; lightIntensity = 1; lightDistance = 20; var renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("canvas"), antialias: true, }); renderer.setSize(w, h); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, w / h, .001, 1000); var starsGeometry = new THREE.Geometry(); for(i=0; i<3000; i++){ var star = new THREE.Vector3(); star.x = THREE.Math.randFloatSpread(1500); star.y = THREE.Math.randFloatSpread(1500); star.z = THREE.Math.randFloatSpread(1500); starsGeometry.vertices.push(star); } var st.........完整代码请登录后点击上方下载按钮下载查看
网友评论0