Giter VIP home page Giter VIP logo

dynamiclabs-webflow's Introduction

React-Three-Fiber-Webflow ๐Ÿ˜˜

Starter file with vite to render react three fiber inside a webflow project. React-three/drei is already includet.

ES-lint with react plugin and prettier is also includet in the repository.

install the dependencies: npm i

run dev server: npm run dev

โœ‹โœ‹โœ‹ During developement you need to add this code inside the head tag of your webflow project:

<script type="module"> import RefreshRuntime from "http://localhost:5173/@react-refresh" RefreshRuntime.injectIntoGlobalHook(window) window.$RefreshReg$ = () => {} window.$RefreshSig$ = () => (type) => type window.__vite_plugin_react_preamble_installed__ = true </script>

...you can remove it on your production build.

๐Ÿ‘‚ During developement, you also need to add this at the end of the body tag:

<script type="module" src="http://localhost:5173/@vite/client"></script> <script type="module" src="http://localhost:5173/src/main.jsx"></script>

๐Ÿ‘‰๐Ÿ‘‰๐Ÿ‘‰ You might need to change the localhost number. for production you want to to change it to the production URL. Don't forget to update the _headers file in the public folder or you will get a CORS ERROR.

Here is a read only link to my webflow starter file: https://preview.webflow.com/preview/react-three-fiber-template?utm_medium=preview_link&utm_source=designer&utm_content=react-three-fiber-template&preview=0a7522a483083f5f470016acbf68076e&workflow=preview

To render your project inside Webflow , you also need to add a div with the id="root" and set it to the appropriate size.

Have Fun๐Ÿ˜„

dynamiclabs-webflow's People

Contributors

vladmdgolam avatar jacobferdinand avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.