threejs实现三维点状曲面旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:threejs实现三维点状曲面旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> html, body { margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.75.js"></script> <div></div> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearColor(0x000000); //var gui = new dat.GUI(); camera.position.set(0, 0, 150); var texture = (function() { var w = 16, h = 16; var canvas = document.createElement('canvas'); //canvas.style.position = 'fixed'; //document.body.appendChild(canvas); canvas.width = w; canvas.height = h; var context = canvas.getContext('2d'); var gradient = context.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, w / 2); gradient.addColorStop(0, '#ffffff'); gradient.addColorStop(0.2, '#00ffff'); gradient.addColorStop(0.4, '#000040'); gradient.addColorStop(1, '#000000'); context.fillStyle = gradient; context.fillRect(0, 0, w, h); var texture = new THREE.Texture(canvas); texture.needsUpdate = true; return textu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0