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.OrbitControls(camera, renderer.domElement);
    controls.autoRotate = true;
    controls.autoRotateSpeed = 4;
    controls.maxDistance = 350;
    controls.minDistance = 150;
    controls.enablePan = false;

    const loader = new THREE.TextureLoader();
    const textureSphereBg = loader.load('//repo.bfw.wiki/bfwrepo/images/three/rock/bg3-je3ddz.jpg');
    const texturenucleus = loader.load('//repo.bfw.wiki/bfwrepo/images/three/rock/star-nc8wkw.jpg');
    const textureStar = loader.load("//repo.bfw.wiki/bfwrepo/images/three/rock/p1-g3zb2a.png");
    const texture1 = loader.load("//repo.bfw.wiki/bfwrepo/images/three/rock/p2-b3gnym.png");  
    const texture2 = loader.load("//repo.bfw.wiki/bfwrepo/images/three/rock/p3-ttfn70.png");
    const texture4 = loader.load("//repo.bfw.wiki/bfwrepo/images/three/rock/p4-avirap.png");


    /*  Nucleus  */   
    texturenucleus.anisotropy = 16;
    let icosahedronGeometry = new THREE.IcosahedronGeometry(30, 10);
    let lambertMaterial = new THREE.MeshPhongMaterial({ map: texturenucleus });
    nucleus = new THREE.Mesh(icosahedronGeometry, lambertMaterial);
    scene.add(nucleus);


    /*    Sphere  Background   */
    textureSphereBg.anisotropy = 16;
    let geometrySphereBg = new THREE.SphereBufferGeometry(150, 40, 40);
    let materialSphereBg = new THREE.MeshBasicMaterial({
        side: THREE.BackSide,
        map: textureSphereBg,
    }.........完整代码请登录后点击上方下载按钮下载查看