three实现穿越隧道动画效果代码-html代码-BFW代码库

three实现穿越隧道动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现穿越隧道动画效果代码

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

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

<head>

    <meta charset="UTF-8">






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



</head>

<body>
    <canvas></canvas>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script>
    <script>
        // Get window size
        const canvas = document.querySelector('canvas');
        
        canvas.width = window.innerWidth,
        canvas.height = window.innerHeight;
        
        // Create a WebGL renderer
        const renderer = new THREE.WebGLRenderer({ canvas });
        
        renderer.setSize(canvas.width, canvas.height);
        
        // Create an empty scene
        const scene = new THREE.Scene();
        
        // Create a perpsective camera
        const camera = new THREE.PerspectiveCamera(65, canvas.width / canvas.height, 0.001, 1000);
        camera.position.z = 400;
        
        const ambient = new THREE.AmbientLight(0xffffff, 0.75);
        scene.add(ambient);
        
        // Array of points
        const points = [
        [68.5, 185.5],
        [1, 262.5],
        [270.9, 281.9],
        [345.5, 212.8],
        [178, 155.7],
        [240.3, 72.3],
        [153.4, 0.6],
        [52.6, 53.3],
        [68.5, 185.5]];
        
        
        // Convert the array of points into vertices
        for (let i = 0; i < points.length; i++) {
          const x = points[i][0],
          y = 0,
          z = points[i][1];
        
          points[i] = new THREE.Vector3(x, y, z);
        }
        
        // Create a path from the points
        const path = new THREE.CatmullRomCurve3(points);
        
        // Create the tube geometry.........完整代码请登录后点击上方下载按钮下载查看