LIGHTWEIGHT 3D LIB.
WebGL RENDERER.
CANVAS 2D, SVG and CSS3D RENDERERS.
var scene = new THREE.Scene();
var width = window.innerWidth;
var height = window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, width, height, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
import React, { useRef } from "react";
import { Canvas, useFrame } from "react-three-fiber";
function Cube() {
const ref = useRef();
useFrame(() => {
ref.current.rotation.x += 0.01;
ref.current.rotation.y += 0.01;
});
return (
<mesh ref={ref}>
<boxGeometry attach="geometry" args={[1, 1, 1]} />
<meshBasicMaterial attach="material" color={0x00ff00} />
</mesh>
);
}
export default function App() {
return (
<Canvas
camera={{ position: [0, 0, 5] }}
>
<Cube />
</Canvas>
);
}
react-three-fiber
"Building dynamic scene graphs declaratively with re-usable components that respond to state changes and interactions makes handling Threejs easier and brings order and sanity to your codebase."
DEMO