easy-three
Eng日本語

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";

Reactでの利用

When using React, you need to call init inside useEffect.
In the return value of useEffect, you need to call destroy to release resources.
Don't forget to explicitly specify the height of the target element such as div.
JavaScript
import { init } from "@masabando/easy-three";
import { useEffect, useRef } from "react";

export function MyComponent(props) {
  const ref = useRef();

  useEffect(() => {
    const { camera, create, animate, destroy } = init(ref.current);

    camera.position.set(0, 0, 2);
    create.ambientLight();
    create.directionalLight();
    create.cube();

    animate();

    return () => {
      destroy();
    };
  }, []);

  return <div
    ref={ref}
    style={{ width: "300px", height: "300px" }}
  />;
}

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.185.1/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.185.1/examples/jsm/",
      "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js",
      "@masabando/easy-three": "https://cdn.jsdelivr.net/gh/masabando/easy-three@1.15.0/dist/easy-three.js",
      "three-mesh-bvh": "https://cdn.jsdelivr.net/npm/three-mesh-bvh@0.9.10/build/index.module.js",
      "three-bvh-csg": "https://cdn.jsdelivr.net/npm/three-bvh-csg@0.0.18/build/index.module.js"
    }
  }
</script>
JavaScript
import { init } from "@masabando/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.185.1/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.185.1/examples/jsm/",
        "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js",
        "@masabando/easy-three": "https://cdn.jsdelivr.net/gh/masabando/easy-three@1.15.0/dist/easy-three.js",
        "three-mesh-bvh": "https://cdn.jsdelivr.net/npm/three-mesh-bvh@0.9.10/build/index.module.js",
        "three-bvh-csg": "https://cdn.jsdelivr.net/npm/three-bvh-csg@0.0.18/build/index.module.js"
      }
    }
  </script>
</head>

<body>
  <script type="module">
    import { init } from "@masabando/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