three打造三维虫洞网格效果代码-html代码-BFW代码库

three打造三维虫洞网格效果代码

代码语言：html

所属分类：三维

代码描述：three打造三维虫洞网格效果代码

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

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

<head>

  <meta charset="UTF-8">

  
<style>
body { 
    margin: 0; 
    overflow:hidden
}
</style>


</head>

<body translate="no" >
  <script type="module">
    import {
        Scene, WebGLRenderer, PerspectiveCamera, 
        InstancedMesh, InstancedBufferAttribute,
        CylinderBufferGeometry, MeshBasicMaterial, CanvasTexture, BackSide
    } from 'https://unpkg.com/three@0.121.1/build/three.module.js';
    
    const time = {value: 0};
    
    const renderer = new WebGLRenderer({
        antialias: true
    });
    
    const scene = new Scene();
    
    const camera = new PerspectiveCamera();
    camera.position.set(3,3,3);
    camera.lookAt(0,0.7,0);
    
    const geom = new CylinderBufferGeometry(1, 1, 1, 64, 64, true);

    const mat = new MeshBasicMaterial({
         // map: gridTexture(),
         // side: BackSide,
       wireframe: true
    });
    
    const vertexCode = `
        float y = mvPosition.y+0.5;
        
        mvPosition.xz *= 0.1+pow(y, 10.+sin(time/3.)*7.)*20.;
        mvPosition.y *= 5.;
    `;
    
    scene.add( createInstancedMesh(1, geom, mat, vertexCode) );
    
    document.body.appendChild(renderer.domElement);
    
    requestAnimationFrame(function render(t) {
        if (renderer.width !== innerWidth || renderer.height !== innerHeight){
            renderer.setSize(innerWidth, innerHeight);
            camera.aspect = innerWidth/innerHeight;
            camera.updateProjectionMatrix();
        }
        time.value = t/1000;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    });
  .........完整代码请登录后点击上方下载按钮下载查看