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) {
	float s = sin(angle);
	float c = cos(angle);

	return mat2(
		c, -s,
		s, c
	);
}

mat4 rotation3d(vec3 axis, float angle) {
  axis = normalize(axis);
  float s = sin(angle);
  float c = cos(angle);
  float oc = 1.0 - c;

  return mat4(
		oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
    oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
    oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
		0.0,                                0.0,                                0.0,                                1.0
	);
}

vec2 rotate(vec2 v, float angle) {
	return rotation2d(angle) * v;
}

vec3 rotate(vec3 v, vec3 axis, float angle) {
	return (rotation3d(axis, angle) * vec4(v, 1.0)).xyz;
}

float invert(float n){
    return 1.-n;
}

vec3 invert(vec3 n){
    return 1.-n;
}

// https://github.com/glslify/glsl-easings
float qinticInOutAbs(float t){
    return t<.5
    ?+16.*pow(t,5.)
    :-.5*abs(pow(2.*t-2.,5.))+1.;
}

const float PI = 3.14159265359;

// https://tympanus.net/codrops/2019/10/29/real-time-multiside-refraction-in-three-steps/
vec3 getEyeVector(mat4 modelMat,vec3 pos,vec3 camPos){
    vec4 worldPosition=modelM.........完整代码请登录后点击上方下载按钮下载查看