Quick 3D Views

Introduction

Quick-3D-Views is a component-based library that helps users easily utilize 3D and interactive backgrounds. The goal of this library is to provide complex 3D scene composition and interactive features in the form of simple, intuitive components, allowing users to quickly and easily integrate 3D elements in web projects. By using Quick-3D-Views, developers can seamlessly integrate 3D content into the web environment while easily implementing a variety of interactive features that can enhance the user experience.

---

Installation

# NPM
npm install quick-3d-views

# YARN
yarn add quick-3d-views

---

Quick Start

import { Spring, Summer, Autumn, Winter } from "quick-3d-views/src/lib"

---

Usage

ISSUE

There is a problem loading files that are currently in public. If you want to use it before the problem is resolved, put the files in the public folder into the user's public folder and then use it.

// App.tsx
import React, { Suspense } from "react";

import "./App.css";
import { Spring, Summer, Autumn, Winter } from "quick-3d-views/src/lib";

const App: React.FC = () => {
  return (
    <div className="anim">
      <Suspense fallback={<div>Loading...</div>}>
        //* Change component you want
        <Spring />
      </Suspense>
    </div>
  );
};

export default App;

// App.css
html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.anim {
  width: 100vw;
  height: 100vh;
}

Spring

Summer

Autumn

Winter

---

Contributors

공영재

정해준

---

License

MIT.Copyright (c) 2024 quick-3d-views