LogoLogo
HomeBlogResources
  • README
  • Design
    • Awesome Design Tools
      • Awesome Design Tools
    • Awesome-UI-Templates
      • README-en
    • awesome-design-systems
      • Awesome Design System
    • Awesome Figma
      • Awesome Figma
    • awesome-styleguides
      • README-en
    • awesome-typography
      • Awesome Typography
    • awesome-ui
      • README-en
    • Awesome UX Design Styleguides
      • Awesome UX Design Styleguides
    • awesome-ux-designer
      • README-en
      • Reading list
    • awesome-ux
      • README-en
    • Awesome Webflow
      • webflow-masterclass
        • Webflow + Firebase用戶認證
    • webflow-masterclass
      • Webflow + Firebase用戶認證
  • Devops
    • Awesome SaaS boilerplate
    • Free for Dev
    • Mega Awesome List
    • Awesome-WordPress-Plugins
      • Awesome WordPress Plugins List
    • Awesome Wordpress Plugin List
    • Awesome CMS
    • awesome-flutter-cn
    • awesome-headless-cms
      • readme-en
    • Awesome-jamstack-resources
      • Awesome-jamstack-resources
    • Awesome Laravel
      • Awesome Laravel
    • awesome-list
      • The awesome manifesto
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • Creating Your Own List
      • pull_request_template
      • Media
    • Awesome Minio
    • awesome-react
      • README-en
    • Awesome Stack
      • Awesome Stacks
    • Awesome UI component library
      • Awesome UI component library
    • awesome-uikit
      • README-en
    • awesome-vercel
      • Awesome Vercel (Previously ZEIT )
    • Awesome WooCommerce
      • Awesome WooCommerce
    • Awesome WordPress
      • Awesome WordPress
    • Awesome Wordpress Developer Tools
      • Awesome WP Developer Tools
  • Marketing
    • Awesome ADTech
      • Awesome AdTech
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • HubSpot CMS Boilerplate
      • HubSpot CMS Boilerplate
    • Awesome HubSpot
    • Awesome Marketing
    • awesome-seo
    • marketing-for-engineers
      • README-en
    • Tech-Marketer
  • Nocode
    • Awesome NoCode / LowCode
      • readme-en
  • Server
    • Awesome Cloudflare
      • Awesome Cloudflare
    • Awesome-Selfhosted
      • Awesome-Selfhosted
  • shopify
    • Awesome Shopify
      • Awesome Shopify
    • Shopify Awesome 真棒!
      • Awesome Shopify
  • Tools
    • Awesome VS Code
    • Awesome Mac
      • Awesome Mac
      • editor-plugin-zh
      • editor-plugin
    • Awesome Nomad
      • Awesome Nomad
    • Awesome-notion
      • Awesome Notion (Eng)
    • awesome-tools-for-startups
      • Awesome list of FREE tools Startups should be using
  • web3
    • Blockchain-stuff
      • CONTRIBUTE
    • Blockchain-stuff
    • Web3.0_Vault-main
    • Web3.0_Vault-main
      • basics
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • awesome-ethereum
    • awesome-solidity-gh-pages
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • Awesome Web3
      • Awesome Web3 Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • Contributor Covenant Code of Conduct
    • free-Web3-resources
      • Contributing Guidelines
    • free-Web3-resources
    • free-Web3-resources
      • Intro to Solidity
    • free-Web3-resources
      • 200-days-of-Web3
    • free-Web3-resources
    • free-Web3-resources
    • Free Web3 Resources
    • free-Web3-resources
      • .github
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • Web3.0_Vault-main
    • web3together-main
      • CODE_OF_CONDUCT
      • sessions
        • Getting Started in Smart Contract Development with Solidity
    • free-Web3-resources
      • .github
        • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • bug_report
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • feature_request
  • webgl
    • Awesome-threejs
      • docs
        • Hellow Three.js 之 三维空间中观察物体的方法--照相机
        • 创建自己的全景图
        • Hellow Three.js 之 创建各种几何形状
        • hello-light-pro
        • Hellow Three.js 之 光影之谜
        • Hellow Three.js 之 加载外部3D模型
        • Hellow Three.js 之 给创建的物体赋予材质
        • hello-obj-mtl
        • P5
        • Hellow Three.js 之 有趣的着色器
        • Hellow Three.js 之 运动物体的性能监测
        • Hellow Three.js 之 让物体动起来
        • Hello Three.js 之 Hello world!
        • what-webgl
        • glsl
          • GLSL 中文手册
          • OpenGL GLSL 语法和函数详解
          • The book of shaders 记录
          • 各种 Shaders 效果
      • demo
        • 有趣的 three.js Demo
          • Decorative WebGL Backgrounds
          • Infinite Tubes
          • The Aviator
        • P5.js Demo
        • Learning-Threejs
          • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • assets
              • models
                • ogre
                  • ogro
    • awesome-threejs
      • README-en
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
    • Awesome WebGL
      • CONTRIBUTING
      • Awesome WebGL
      • Contributor Covenant Code of Conduct
      • Libraries
        • CONTRIBUTING
      • Libraries
        • WebGL Libraries - Features
      • Libraries
        • WebGL Libraries - File Size
      • Awesome WebGL - Libaries/Frameworks
  • AI
    • ChatGPT 中文指南
    • 生成式 AI 項目、工具、藝術作品和模型的精選列表
    • 精選 GPT-4 指南
    • ChatGPT 工具收錄
      • Awesome ChatGPT
    • ChatGPT 中文調教指南
    • GPT 開放原始碼項目合集
    • ChatGPT 應用收藏
    • Awesome OpenAI - 超酷的 OpenAI 蒐藏
      • Awesome-openAI
    • Awesome GPT-3 應用集
      • Awesome GPT-3
    • ChatGPT 提示指令庫
      • Awesome ChatGPT Prompts
  • SaaS
    • awesome-saas-boilerplates
Powered by GitBook
On this page
  • Credits
  • License
  • Misc
Export as PDF
  1. webgl
  2. Awesome-threejs
  3. demo
  4. 有趣的 three.js Demo

Infinite Tubes

PreviousDecorative WebGL BackgroundsNextThe Aviator

Last updated 2 years ago

Infinite Tubes with Three.js

A tunnel experiment in WebGL inspired by the effect seen on the website. By .

Credits

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Brick texture is from

Perlin noise algorithm was written by

Modern pattern with hand drawn stripes from

Blood cell model is from

Follow Louis: , ,

Follow Codrops: , , , , ,

Official Three.js website
maxTextures
Seph Gentle
Freepik.com
Turbosquid
Twitter
Codepen
LinkedIn
Twitter
Facebook
Google+
GitHub
Pinterest
Instagram
© Codrops 2017
http://www.fornasetti.com/
Louis Hoebregts
Article on Codrops
Demo