Getting Started

Using Package Manager

You can install easy-three using npm or yarn.
This method is not recommended for beginners.

Command

npm install @masabando/easy-three

If you install it this way, import it as follows.

JavaScript

import { init } from "@masabando/easy-three";

Using Template

You can use the template to create a new project.
The template includes the necessary settings for easy-three.

※ Be sure to extract the zip file before use.

Download Template

You can display it by dragging and dropping the index.html file into a web browser.
To edit the code, use an editor like VSCode.

For more information on how to use the template, see the Reference .

Using CDN

You can use easy-three without downloading by using a CDN.
Importmap settings are also required.

index.html

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/",
      "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js",
      "easy-three": "https://cdn.jsdelivr.net/gh/masabando/easy-three@1.1.4/dist/easy-three.js"
    }
  }
</script>

JavaScript

import { init } from "easy-three";

The code below is a simple example of using easy-three with CDN.
This code creates a cube and displays it in the center of the screen.

index.html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>easy-three template</title>
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/",
        "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js",
        "easy-three": "https://cdn.jsdelivr.net/gh/masabando/easy-three@1.1.4/dist/easy-three.js"
      }
    }
  </script>
</head>

<body>
  <script type="module">
    import { init } from "easy-three";
    const { camera, create, animate, controls } = init();

    controls.connect()
    camera.position.set(-2, 2, 2)
    create.ambientLight()
    create.directionalLight()
    create.cube()

    animate()
  </script>
</body>

</html>

Using Resources Such as Images

If you want to use resources such as images or VRM models, you need to start a local server.
Here, we introduce how to use VSCode's Live Server, Node.js, and Python.

VSCode Live ServerRecommended

If you are using VSCode, you can use the Live Server extension.
Right-click on the HTML file and select "Open with Live Server".

Node.js

If you have Node.js installed, you can use the serve package.
Run the following command in the directory where the HTML file is located.

Command

npx serve

Python

If you have Python installed, you can use the http.server module.
Run the following command in the directory where the HTML file is located.

Command

python3 -m http.server