threejs实现宇宙内三维玻璃球体内核石头吸收能量效果代码-html代码-BFW代码库

threejs实现宇宙内三维玻璃球体内核石头吸收能量效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现宇宙内三维玻璃球体内核石头吸收能量效果代码

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

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

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
        margin: 0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        background-image: url("//repo.bfw.wiki/bfwrepo/images/three/rock/96337246-f14d4580-1085-11eb-8793-a86d929e034d.jpg");
        background-size: cover;
        backdrop-filter:  brightness(50%);
    }
    
    canvas {
        display: block;
    }
    
    #canvas_container {
        width: 100%;
        height: 100vh;
    }
    
    button {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        border: 1px solid white;
        border-radius: 5px;
        font-size: 0.9rem;
        padding: 0.5rem 0.9em;
        background: #000000;
        color: white;
        -webkit-font-smoothing: antialiased;
        font-weight: bold;
        cursor: pointer;
        transition: all .3s;
    }
    
    button:hover {
        background: #ffffff;
        color: #000000;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="canvas_container"></div>

    <button id="fullscr">Go Fullscreen</button>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
    <script>
        let renderer,
scene,
camera,
sphereBg,
nucleus,
stars,
controls,
container = document.getElementById("canvas_container"),
timeout_Debounce,
noise = new SimplexNoise(),
cameraSpeed = 0,
blobScale = 3;


init();
animate();


function init() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 1000)
    camera.position.set(0,0,230);

    const directionalLight = new THREE.DirectionalLight("#fff", 2);
    directionalLight.position.set(0, 50, -20);
    scene.add(directionalLight);

    let ambientLight = new THREE.AmbientLight("#ffffff", 1);
    ambientLight.position.set(0, 20, 20);
    scene.add(ambientLight);

    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    container.appendChild(renderer.domElement);

    //OrbitControl
    controls = new THREE.OrbitContr.........完整代码请登录后点击上方下载按钮下载查看