commit 922ec98769596c68ef9ae62de6b88738c175b0df Author: lxc <237024898@qq.com> Date: Mon Dec 5 09:21:24 2022 +0800 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..a032a35 --- /dev/null +++ b/README.md @@ -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 +