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, initial-scale=1">
  
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css'>
  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

:root {
  --black-color-1: #12112a;
}

.bg-black-1 {
  background: var(--black-color-1);
}
</style>



</head>

<body>
  <div class="relative w-screen h-screen">
  <div class="twisted-shape w-full h-full bg-black-1"></div>
</div>

  
      <script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.133.1";
import { ParametricGeometry } from "https://cdn.skypack.dev/three@0.133.1/examples/jsm/geometries/ParametricGeometry";

import { OrbitControls } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/controls/OrbitControls";

const calcAspect = (el) => el.clientWidth / el.clientHeight;
const getNormalizedMousePos = (e) => {
    return {
        x: (e.clientX / window.innerWidth) * 2 - 1,
        y: -(e.clientY / window.innerHeight) * 2 + 1
    };
};
// https://arxiv.org/pdf/1604.02174.pdf
const sphube = (u1, v1, target) => {
    const s = 0.6;
    const r = 1;
    const theta = 2 * u1 * Math.PI;
    const phi = v1 * 2 * Math.PI;
    const u = Math.cos(theta) * Math.cos(phi);
    const v = Math.cos(theta) * Math.sin(phi);
    const w = Math.sin(theta);
    const z = (r * u) / Math.sqrt(1 - s * v ** 2 - s * w ** 2);
    const x = (r * v) / Math.sqrt(1 - s * u ** 2 - s * w ** 2);
    const y = (r * w) / Math.sqrt(1 - s * Math.cos(theta) ** 2);
    target.set(x, y, z);
};
const twistedShapeVertexShader = `
#define GLSLIFY 1
mat2 rotation2d(float angle) {
	f.........完整代码请登录后点击上方下载按钮下载查看