$ npm install @masabando/easy-threeThree.js made simple
Three.js's powerful features, simplified for beginners.
easy-three supports everything from creating objects to animations and lighting setups.
No Installation Required
No special software or configuration is required. You can start right away with just a browser.
It can also be used in environments where software installation is restricted, such as schools.
※ A server is required when loading resources such as images (details here).
Simple Code
You can create 3D objects with short code.
Animations can also be set up easily.
const { camera, create, animate } = init()
camera.position.set(1, 1, 1)
create.ambientLight()
create.directionalLight()
const cube = create.cube({ rounded: true, segments: 7 })
animate(({ time }) => {
cube.rotation.x = time
cube.rotation.y = time
})
Quick and Easy Model Setup
Displaying models like VRM is simple ( internally uses three-vrm).
Mouse-based camera operation is also easy.
const { camera, create, animate, controls, helper, load } = init();
controls.autoRotate = true
camera.position.set(0, 2, -2)
controls.target.set(0, 1, 0)
create.ambientLight()
create.directionalLight({ intensity: 2, position: [10, 10, -10] })
helper.axes()
helper.grid()
const cube = create.cube({
size: 0.5,
position: [1, 1, 0],
rounded: true,
segments: 7,
})
let model
load.vrm("./model/sample.vrm").then((m) => {
model = m
})
animate(({ time, delta }) => {
cube.rotation.y += delta
cube.rotation.x += delta
if (model) {
model.bone("leftUpperArm").rotation.z =
Math.sin(time) * Math.PI * 0.25
model.update(delta)
}
})
Can also be used with React
You can also use it directly with React.
Perfect for adding a touch of 3D to your web page.
const Simple = (props) => {
const ref = useRef()
useEffect(() => {
const { camera, create, animate, destroy } = init(ref.current)
camera.position.set(5, 5, 5);
create.ambientLight()
create.directionalLight()
const cube = create.cube({ size: 3 })
animate(({ time }) => {
cube.rotation.x = time
cube.rotation.y = time
})
return () => {
destroy()
}
}, [])
return (
<div ref={ref} {...props}></div>
)
}
Comparison with vanilla Three.js
easy-three
35%
vanilla Three.js
100%
Compared to vanilla Three.js, the code is simplified and easier to understand.
easy-three
1import { init } from "easy-three";
2const { camera, create, controls, animate } = init()
3
4// camera settings
5camera.position.set(-2, 2, 2)
6
7// use OrbitControls
8controls.connect()
9
10// add lights
11create.ambientLight()
12create.directionalLight()
13
14// add cube
15const cube = create.cube()
16
17// animation
18animate(({ delta }) => {
19 cube.rotation.x += delta
20 cube.rotation.y += delta
21})vanilla Three.js
1import * as THREE from "three";
2import { OrbitControls } from "three/addons/controls/OrbitControls.js";
3const scene = new THREE.Scene();
4const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
5renderer.setSize(window.innerWidth, window.innerHeight)
6document.body.appendChild(renderer.domElement)
7renderer.shadowMap.enabled = true
8renderer.setPixelRatio(window.devicePixelRatio)
9
10// camera settings
11const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
12camera.position.set(-2, 2, 2)
13
14// use OrbitControls
15const controls = new OrbitControls(camera, renderer.domElement)
16
17// add lights
18const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
19scene.add(ambientLight)
20const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
21directionalLight.position.set(5, 5, 5)
22scene.add(directionalLight)
23
24// add cube
25const box = new THREE.Mesh(
26 new THREE.BoxGeometry(1, 1, 1),
27 new THREE.MeshStandardMaterial({ color: 0x1155ff })
28)
29scene.add(box)
30
31// animation
32const clock = new THREE.Clock()
33function animate() {
34 controls.update()
35 const delta = clock.getDelta()
36 box.rotation.x += delta
37 box.rotation.y += delta
38 renderer.render(scene, camera)
39}
40renderer.setAnimationLoop(animate)