three打造三维光滑反光彩色条纹圆滑体效果代码-html代码-BFW代码库

three打造三维光滑反光彩色条纹圆滑体效果代码

代码语言：html

所属分类：三维

代码描述：three打造三维光滑反光彩色条纹圆滑体效果代码

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

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

<head>

  <meta charset="UTF-8">


  
  
<style>
html,
body {
  margin: 0;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  background: #030303;
}

#canvas-pattern {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 30px;
  height: 30px;
}
</style>




</head>

<body translate="no" >
  <!--

Follow me on
Instagram: https://www.instagram.com/supahfunk/
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

-->

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.r118.js"></script>
  
      <script id="rendered-js" >
/*--------------------
Vars
--------------------*/
let ball;
let pattern;
let palettes;
const mouse = { x: 0, y: 0 };


/*--------------------
                              Utils
                              --------------------*/
const lerp = (v0, v1, t) => v0 * (1 - t) + v1 * t;


/*--------------------
                                                   Pattern Generator
                                                   --------------------*/
class Pattern {
  constructor(obj) {
    Object.assign(this, obj);
    this.init();
  }

  init() {
    this.canvas = document.querySelector(`#${this.id}`) || document.createElement('canvas');
    this.canvas.id = this.id;
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext('2d');
    this.generate();
  }

  random(min, max) {
    return Math.floor(min + Math.random() * (max - min));
  }

  generate() {
    let randomPalette = this.random(0, 100);
    // randomPalette = 65
    this.palette = palettes[randomPalette];
    console.log('palette ---->', randomPalette);
    let start = 0;
    while (start < this.height + this.maxStroke) {
      const off = this.random(this.minStroke, this.maxStroke);
      this.ctx.beginPath();
      this.ctx.strokeStyle = this.palette[this.random(0, 5)];
      this.ctx.lineWidth = off;
      this.ctx.moveTo(-this.maxStroke, start);
      this.ctx.lineTo(this.width + this.maxStroke, start);
      this.ctx.stroke();
      this.ctx.closePath();
      start += off;
    }

    if (ball) {
      ball.material.map.needsUpdate = true;
    }
  }}



/*--------------------
     Ball
     --------------------*/
class Ball {
  constructor(obj) {
    Object.assign(this, obj);
    this.init();
    this.events = this.events.bind(this);
  }

  init() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true, transparent: true });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(this.renderer.domElement);

    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.camera.position.z = 5;

    this.scene = new THREE.Scene();

    this.createLights();
    this.createGeo();

    this.events();
    this.render();
  }

  createLights() {
    this.ambientLight = new THREE.AmbientLight(0xffffff, .7);
    this.scene.add(this.ambientLight);
    this.ambientLight.castShadow = true;

    this.light = new THREE.SpotLight(0xffffff, .5);
    this.light.position.set(0, 0, 10);
    this.light.castShadow = true;

    this.scene.add(this.light);
    this.scene.add(this.ambientLight);
  }

  createGeo() {
    this.texture = new THREE.Texture(document.getElementById(this.textureID));
    this.texture.wrapS .........完整代码请登录后点击上方下载按钮下载查看