three三维发光宇宙天体圆环旋转动画效果代码-html代码-BFW代码库

three三维发光宇宙天体圆环旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：three三维发光宇宙天体圆环旋转动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">


</head>
<body>
<!-- partial:index.partial.html -->
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

#container {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center, #0a1527 0%, #02050a 100%);
  position: fixed;
  top: 0;
  left: 0;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}
</style>

<div id="container"></div>


	<script type="importmap">
		{
            "imports": {
                "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
                "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
            }
        }
    </script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
    powerPreference: "high-performance"
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
document.getElementById('container').appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.maxDistance = 20;
controls.minDistance = 3;

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const interactionPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);

const coreShader = {
    vertexShader: `
    varying vec3 vPosition;
    varying vec3 vNormal;
    varying vec2 vUv;
    uniform float time;
    
    void main() {
        vPosition = position;
        float displacement = sin(position.x * 5.0 + time) * 
                           cos(position.y * 5.0 + time) * 
                           sin(position.z * 5.0 + time) * 0.08;
                           
        displacement += sin(position.x * 10.0 + time * 2.0) * 0.02;
        
        vec3 newPosition = position + normal * displacement;
        vNormal = normalize(normalMatrix * normal);
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
    }`,
    fragmentShader: `
    varying vec3 vPosition;
    varying vec3 vNormal;
    varying vec2 vUv;
    uniform float time;
    uniform vec2 mousePos;
    
    vec3 colorPalette(float t) {
        vec3 a = vec3(0.5, 0.5, 0.5);
        vec3 b = vec3(0.5, 0.5, 0.5);
        vec3 c = vec3(1.0, 1.0, 1.0);
        vec3 d = vec3(0.3, 0.2, 0.2);
        return a + b * cos(6.28318 * (c * t + d));
    }
    
    void main() {
        vec2 center = vec2(0.0, 0.0);
        float distToMouse = length(mousePos - vPosition.xy);
        float mouseInfluence = smoothstep(1.0, 0.0, distToMouse);
        
        float pattern = sin(vPosition.x * 3.0 + time) * 
                       cos(vPosition.y * 3.0 + time) * 
                       sin(vPosition.z * 3.0 + time);
                       
        pattern += mouseInfluence * 2.0;
        
        float colorIndex = pattern * 0.5 + 0.5;
        vec3 baseColor = mix(
            vec3(0.1, 0.4, 1.0),
            vec3(1.0, 0.2, 0.5),
            colorIndex
        );
        
        float fresnel = pow(1.0 - abs(dot(vNormal, vec3(0.0, 0.0, 1.0))), 4.0);
        vec3 finalColor = mix(baseColor, vec3(1.0), fresnel);
      .........完整代码请登录后点击上方下载按钮下载查看