three将svg图标三维液态化可调参数展示代码-html代码-BFW代码库

three将svg图标三维液态化可调参数展示代码

代码语言：html

所属分类：三维

代码描述：three将svg图标三维液态化可调参数展示代码

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

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

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

  
  
  
<style>
body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #e5e5e5; 
            font-family: sans-serif;
        }
        #fileInput {
            display: none;
        }
</style>


  
  
</head>

<body translate="no">
  <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/",
                "lil-gui": "https://unpkg.com/lil-gui@0.19.1/dist/lil-gui.esm.min.js"
            }
        }
    </script>

    <input type="file" id="fileInput" accept=".svg">
  
    <script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
import GUI from 'lil-gui';

// --- INITIAL CONFIGURATION ---
// Set your custom SVG URL here to load it automatically on startup.
// Leave empty ('') to use the default Apple logo.
const INITIAL_SVG_URL = '';

// --- GLSL NOISE FUNCTION ---
const simplex3D = `
            vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
            vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
            float snoise(vec3 v){
                const v.........完整代码请登录后点击上方下载按钮下载查看