commit
922ec98769
1 changed files with 84 additions and 0 deletions
@ -0,0 +1,84 @@ |
|||
# three.js |
|||
|
|||
[![NPM Package][npm]][npm-url] |
|||
[![Build Size][build-size]][build-size-url] |
|||
[![NPM Downloads][npm-downloads]][npmtrends-url] |
|||
[![DeepScan][deepscan]][deepscan-url] |
|||
[![Discord][discord]][discord-url] |
|||
|
|||
#### JavaScript 3D library |
|||
|
|||
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available as addons. |
|||
|
|||
[Examples](https://threejs.org/examples/) — |
|||
[Docs](https://threejs.org/docs/) — |
|||
[Manual](https://threejs.org/manual/) — |
|||
[Wiki](https://github.com/mrdoob/three.js/wiki) — |
|||
[Migrating](https://github.com/mrdoob/three.js/wiki/Migration-Guide) — |
|||
[Questions](https://stackoverflow.com/questions/tagged/three.js) — |
|||
[Forum](https://discourse.threejs.org/) — |
|||
[Discord](https://discord.gg/56GBJwAnUS) |
|||
|
|||
### Usage |
|||
|
|||
This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a `WebGL` renderer for the scene and camera, and it adds that viewport to the `document.body` element. Finally, it animates the cube within the scene for the camera. |
|||
|
|||
```javascript |
|||
import * as THREE from 'three'; |
|||
|
|||
// init |
|||
|
|||
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 ); |
|||
camera.position.z = 1; |
|||
|
|||
const scene = new THREE.Scene(); |
|||
|
|||
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); |
|||
const material = new THREE.MeshNormalMaterial(); |
|||
|
|||
const mesh = new THREE.Mesh( geometry, material ); |
|||
scene.add( mesh ); |
|||
|
|||
const renderer = new THREE.WebGLRenderer( { antialias: true } ); |
|||
renderer.setSize( window.innerWidth, window.innerHeight ); |
|||
renderer.setAnimationLoop( animation ); |
|||
document.body.appendChild( renderer.domElement ); |
|||
|
|||
// animation |
|||
|
|||
function animation( time ) { |
|||
|
|||
mesh.rotation.x = time / 2000; |
|||
mesh.rotation.y = time / 1000; |
|||
|
|||
renderer.render( scene, camera ); |
|||
|
|||
} |
|||
``` |
|||
|
|||
If everything went well, you should see [this](https://jsfiddle.net/7u84j6kp/). |
|||
|
|||
### Cloning this repository |
|||
|
|||
Cloning the repo with all its history results in a ~2 GB download. If you don't need the whole history you can use the `depth` parameter to significantly reduce download size. |
|||
|
|||
```sh |
|||
git clone --depth=1 https://github.com/mrdoob/three.js.git |
|||
``` |
|||
|
|||
### Change log |
|||
|
|||
[Releases](https://github.com/mrdoob/three.js/releases) |
|||
|
|||
|
|||
[npm]: https://img.shields.io/npm/v/three |
|||
[npm-url]: https://www.npmjs.com/package/three |
|||
[build-size]: https://badgen.net/bundlephobia/minzip/three |
|||
[build-size-url]: https://bundlephobia.com/result?p=three |
|||
[npm-downloads]: https://img.shields.io/npm/dw/three |
|||
[npmtrends-url]: https://www.npmtrends.com/three |
|||
[deepscan]: https://deepscan.io/api/teams/16600/projects/19901/branches/525701/badge/grade.svg |
|||
[deepscan-url]: https://deepscan.io/dashboard#view=project&tid=16600&pid=19901&bid=525701 |
|||
[discord]: https://img.shields.io/discord/685241246557667386 |
|||
[discord-url]: https://discord.gg/56GBJwAnUS |
|||
|
Loading…
Reference in new issue