threejs实现三维点状曲面旋转动画效果代码

代码语言:html

所属分类:三维

代码描述:threejs实现三维点状曲面旋转动画效果代码

代码标签: three 三维 点状 曲面 旋转 动画

下面为部分代码预览,完整代码请点击下载或在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