three实现canvas三维环环相扣的立方体旋转动画效果代码-html代码-BFW代码库

three实现canvas三维环环相扣的立方体旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现canvas三维环环相扣的立方体旋转动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
</head>

<body >
  <canvas id="canvas"></canvas>

<script type="x-shader/x-vertex" id="vertexShader">
    varying vec3 vNormal;
    varying vec3 vPosition;

    void main() {
        vec4 viewNormal = viewMatrix * modelMatrix * vec4(normal, 0.);
        vNormal = normalize(viewNormal.xyz);

        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
    }
</script>

<script type="x-shader/x-fragment" id="fragmentShader">
    varying vec3 vNormal;
    varying vec3 vPosition;
    uniform vec3 u_pointer;

    void main() {
        vec3 black = vec3(0.);
        vec3 lightBlue = vec3(0.43922, 0.63922, 0.87843);
        vec3 darkBlue = vec3(0.11765, 0.29804, 0.52941);
        vec3 white = vec3(1.);
        vec3 pink = vec3(0.9, 0.38824, 0.4);

        float positionDotProduct = dot(vNormal, normalize(vec3(vPosition.x + .3, vPosition.y, 1.)));
        float whiteSpot = vNormal.x * step(.995, positionDotProduct);
        black += whiteSpot;
        lightBlue += whiteSpot;

        float normalDotProduct = dot(vNormal, normalize(vec3(u_pointer.x * 2., u_pointer.y * 1.5, 1.)));
        float t = smoothstep(.49, .5, normalDotProduct);
        vec3 finalColor = mix(pink, white, t);
        t = smoothstep(0.85, 0.86, normalDotProduct);
        finalColor = mix(finalColor, darkBlue, t);
        t = smoothstep(0.85, 0.91, normalDotProduct);
        finalColor = mix(finalColor, lightBlue, t);
        t = smoothstep(.99, .991, normalDotProduct);
        finalColor = mix(finalColor, black, t);

        gl_FragColor = vec4(finalColor, 1.0);
    }
</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.133.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script>
      <script type="module">


const canvasEl = document.querySelector("#canvas");

let renderer, scene, camera, clock, mainMaterial, orbit, lightHolder;
const pointer = {
  x: 0, y: 0,
  tx: 0, ty: 0 };


createMainScene();
updateSceneSize();
render();

window.addEventListener("resize", updateSceneSize);

window.addEventListener("mousemove", e => {
  pointe.........完整代码请登录后点击上方下载按钮下载查看