three实现无数三维立方体上升拼筹堆叠动画效果代码-html代码-BFW代码库

three实现无数三维立方体上升拼筹堆叠动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现无数三维立方体上升拼筹堆叠动画效果代码随鼠标转动交互效果代码

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

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

<head>
  <meta charset="UTF-8">
  
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  
  
  
<style>
*{
    margin: 0;
  }
  canvas {
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    position: fixed;
    overflow: hidden;
  }
</style>


<meta charset="utf-8"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<!-- OrbitControls.js -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<body>
  <canvas id="myCanvas"></canvas>
  <script id="fragmentShader" type="x-shader/x-fragment">
    uniform float time;
    uniform sampler2D colorTexture;
    varying vec2 vUv;
    void main( void ) {
      vec2 uv =  vUv;
      // uv.x += abs(cos(time)*0.2+cos(time)*0.05);
      // uv.y += sin(time)*0.5;
      vec4 color = texture2D( colorTexture, uv/1.0);
      gl_FragColor = vec4( color );
    }
  </script>

  <script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
    void main()
    {
      vUv = uv;
      vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
      gl_Position = projectionMatrix * mvPosition;
    }
  </script>


  
      <script  >
window.addEventListener('load', init);
let uniforms;
let clock, controls;
function init() {
  let count = 0;
  let mesh;
  let meshList = [];

  clock = new THREE.Clock();

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: document.querySelector('#myCanvas') });

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true; //影を入れる
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
  camera.position.set(0, 0, 1500);
  camera.lookAt(new THREE.Vector3(0, 0, 0));



  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);
  scene.fog = new THREE.Fog(0x000000, 50, 200);


  window.addEventListener('resize', function () {
    onWindowResize(camera, renderer);
  }, false);

  uniforms = {
    "time": { value: 1.0 },
    "colorTexture": { value: new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/image/637acab5b5b94.png') } };

  unifo.........完整代码请登录后点击上方下载按钮下载查看