three实现一个立方体扭曲旋转动画效果代码-html代码-BFW代码库

three实现一个立方体扭曲旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现一个立方体扭曲旋转动画效果代码

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

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

<head>

    <meta charset="UTF-8">


    <style>
        * { margin: 0; }
    </style>


</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
    <script>
        // using THREE.js, see cog icon on Codepen to see it added
        // most of this code is taken from
        // https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
        
        // full screen scene
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        
        // render to HTML
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        // make a 1x1x1 with 32 parts per face
        const geometry = new THREE.BoxGeometry(1, 1, 1, 32, 32, 32);
        
        // make a clock to add animation
        const clock = new THREE.Clock();
        
        // pass info to the shader
        const uniforms = {
          time: { value: clock.getElapsedTime() } };
        
        
        // this is the thing that changes the position of the shape
        const vert = `
          // pass info about each edge to the frag shader
          varying vec2 v_uv;
          
          // get from uniforms
          uniform float time;
          
          // this is from https://github.com/dmnsgn/glsl-rotate/blob/master/rotation-3d-y.glsl
          mat3 rotation3dY(float angle) {
            float s = sin(angle);
            float c = cos(angle);
        
            return mat3(
              c, 0.0, -s,.........完整代码请登录后点击上方下载按钮下载查看