three实现三维能量场波动流动连线动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维能量场波动流动连线动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
body, html{
  margin: 0;
  height: 100vh;
  background: linear-gradient(-45deg, #333, #000);
  overflow: hidden;
}
canvas{
  display: none;
  border: 3px solid #fff3;
  position: absolute;
  background: #04f1;
  left: 50%;
  top: 50%;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}
canvas:focus{
  outline: none;
}
</style>

  
</head>

<body translate="no">
  <div id="container"></div>
<canvas id=c></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.160.js"></script>
<script type="module">

  var camera
  let scene, renderer
  let isUserInteracting = false,
      lon = 0, lat = 0,
      phi = 0, theta = 0,
      onPointerDownPointerX = 0,
      onPointerDownPointerY = 0,
      onPointerDownLon = 0,
      onPointerDownLat = 0

  const distance = 1e4-9e3

  var func = navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "onwheel" : "onmousewheel"
  window[func]= e => {
    let delta = camera.fov
    delta += e.deltaY/25
    camera.fov = Math.min(140, Math.max(10, delta))
    camera.updateProjectionMatrix()
    
  }

  var material, loadScene, texture, sceneLoaded = false, geometry

  function init(url){
    const container = document.getElementById( 'container' )
    camera = new THREE.PerspectiveCamera( 100, 16/9, .05, 1e6)
    
    loadScene = () =>{
      scene = new THREE.Scene()
      geometry = new THREE.SphereGeometry( 1e4, 64, 240 )
      geometry.scale( - 1, 1, 1 )
      
      texture = new THREE.CanvasTexture(c)
      
      /*
      if(url.toLowerCase().indexOf('.mp4') != -1 ||
         url.toLowerCase().indexOf('.webm') != -1){
        const vid = document.createElement('video')
        vid.muted = true
        vid.loop = true
        vid.crossOrigin = true
        vid.src = url
        vid.play()
        texture = new THREE.VideoTexture( vid )
      }else{
        texture = new THREE.TextureLoader().load(url)
        texture.wrapS = THREE.RepeatWrapping
        texture.wrapT = THREE.RepeatWrapping
        texture.repeat.set( 1, 1 )
      }
      */

      texture.colorSpace = THREE.SRGBColorSpace
      texture.anisotropy = renderer.capabilities.getMaxAnisotropy()
        texture.wrapS = THREE.RepeatWrapping
        texture.wrapT = THREE.RepeatWrapping
        texture.repeat.set( 1, 1 )
      material = new THREE.MeshBasicMaterial( { map: texture } )
      material.map.minFilter = THREE.LinearFilter
      const mesh = new THREE.Mesh( geometry, material )
      scene.add( mesh )
      sceneLoaded = true
    }
    
    renderer = new THREE.WebGLRenderer()
    renderer.setSize( 1920, 1080 )
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setAnimationLoop( animate )
    container.appendChild( renderer.domElement )
    document.addEventListener( 'pointerdown', onPointerDown )
    document.addEventListener( 'pointermove', onPointerMove )
    document.addEventListener( 'pointerup', onPointerUp )
    document.addEventListener( 'touchstart', onPointerDown )
    document.addEventListener( 'touchmove', onPointerMove )
    document.addEventListener( 'touchend', onPointerUp )
    loadScene()
  }

  function onPointerDown( event ) {
    isUserInteracting = true
    onPointerDownPointerX = event.clientX
    onPointerDownPointerY = event.clientY
    onPointerDownLon = lon
    onPointerDownLat = lat
  }

  function onPointerMove( event ) {
    if ( isUserInteracting === true ) {
      var mag = .01 + camera.fov/450
      lon = ( onPointerDownPointerX - event.clientX ) * mag + onPointerDownLon
      lat = ( onPointerDownPointerY - event.clientY ) * mag + onPointerDownLat
    }
  }

  function onPointerUp() {
    isUserInteracting = false
  }

  function animate() {
    if(typeof showRender != 'undefined' && showRender){
      if(!sceneLoaded) loadScene()
      lat = Math.max( - 89.9, Math.min( 89.9, lat ) )
      phi = ( 90 - lat )/180*Math.PI
      theta = lon/180*Math.PI
      camera.position.x = distance * Math.sin( phi ) * Math.cos( theta )
      camera.position.y = distance * Math.cos( phi )
      camera.position.z = distance * Math.sin( phi ) * Math.sin( theta )
      camera.lookAt( 0, 0, 0 )
      renderer.render( scene, camera )
      material.map.needsUpdate = true
    }else{
      sceneLoaded = false
    }
  }

  var url
  var l = location.href.split('url=')
  if(l.length>1){
    url = l[1].split('&')[0]
    init(url)
  }else{
    init('')
  }
</script>
  
      <script id="rendered-js" >
c = document.querySelector('#c');
c.tabIndex = 0;
x_ = c.getContext('2d');
c.width = 1920;
c.height = 1080;

camMode = 'HDRI';
HDRIwidth = c.width;

outputAspectRatio = 16 / 9;
output = document.createElement('canvas');
octx = output.getContext('2d');
output.width = c.width;
output.height = output.width / outputAspectRatio;
showOutput = false; // HDRI view, for recording 
showRender = false; // actual pipe to environment, for render eval etc
showPreview = false; // thumbnail in upper right 
// (only visible in default or HDRI output, not render)

if (showRender) {
  outputAspectRatio = 2;
  showOutput = true;
  showPreview = false;
  c.style.display = 'none';
} else {
  //showPreview = true
  //showOutput = false
  setTimeout(() => {
    c.style.display = 'block';
    c.style.borderRadius = showOutput ? '0' : '10px';
    c.style.border = showOutput ? 'none' : '3px solid #fff3';
    c.style.margin = showOutput ? 0 : 10;
  }, 0);
}

// tempBuffer, needed for optional preview [P]
tempBuffer = document.createElement('canvas');
tempBuffer.width = c.width;
tempBuffer.height = c.height;
tbctx = tempBuffer.getContext('2d');

C = Math.cos;
S = Math.sin;
t = 0;
T = Math.tan;

rsz = window.onresize = () => {
  let b = document.body;
  let margin = showOutput ? 0 : 10;
  let n;
  let d = showOutput ? 1 / outputAspectRatio : .5625;
  c.style.borderRadius = showOutput ? '0' : '10px';
  c.style.border = showOutput ? 'none' : '3px solid #fff3';
  //c.width = 1920 
  c.height = c.width * d;
  output.width = c.width;
  output.height = output.width * d;
  if (b.clientHeight / b.clientWidth > d) {
    c.style.width = `${(n = b.clientWidth) - margin * 2}px`;
    c.style.height = `${n * d - margin * 2}px`;
  } else {
    c.style.height = `${(n = b.clientHeight) - margin * 2}px`;
    c.style.width = `${n / d - margin * 2}px`;
  }
};
rsz();

keyTimer = 0;
keyTimerInterval = .25;
keys = Array(256).fill(false);
window.onkeyup = e => {
  keyTimer = 0;
  keys[e.keyCode] = false;
};

window.onkeydown = e => {
  keys[e.keyCode] = true;
  if (keyTimer <= t) {
    keyTimer = t + keyTimerInterval;
    if (e.keyCode == 72) {
      showOutput = !showOutput;
      if (showRender) {
        if (typeof can != 'undefined') {
          outputAspectRatio = 2;
          showOutput = true;
          showPreview = false;
          can.style.display = 'blo.........完整代码请登录后点击上方下载按钮下载查看