mrdoob/three.js

# three.js [][npm-url] [][build-size-url] [][npmtrends-url] [][jsdelivr-url] [][discord-url] #### JavaScript 3D 库 该项目的目标是创建一个易于使用、轻量级、跨浏览器且通用的 3D 库。当前的构建版本仅包含 WebGL 和 WebGPU 渲染器，但 SVG 和 CSS3D 渲染器也可作为插件（addons）使用。 [示例](https://threejs.org/examples/) — [文档](https://threejs.org/docs/) — [手册](https://threejs.org/manual/) — [Wiki](https://github.com/mrdoob/three.js/wiki) — [迁移指南](https://github.com/mrdoob/three.js/wiki/Migration-Guide) — [常见问题](https://stackoverflow.com/questions/tagged/three.js) — [论坛](https://discourse.threejs.org/) — [Discord](https://discord.gg/56GBJwAnUS) ### 用法 这段代码创建了一个场景、一个摄像机和一个几何立方体，并将该立方体添加到场景中。然后，它为场景和摄像机创建了一个 `WebGL` 渲染器，并将该视口添加到 `document.body` 元素中。最后，它为摄像机在场景中为立方体添加动画效果。 ``` import * as THREE from 'three'; const width = window.innerWidth, height = window.innerHeight; // init const camera = new THREE.PerspectiveCamera( 70, width / height, 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( width, height ); renderer.setAnimationLoop( animate ); document.body.appendChild( renderer.domElement ); // animation function animate( time ) { mesh.rotation.x = time / 2000; mesh.rotation.y = time / 1000; renderer.render( scene, camera ); } ``` 如果一切顺利，你应该会看到[这个](https://jsfiddle.net/w43x5Lgh/)。 ### 克隆此仓库 克隆包含完整历史的仓库会导致约 2 GB 的下载量。如果你不需要完整的历史记录，可以使用 `depth` 参数来显著减少下载大小。 ``` git clone --depth=1 https://github.com/mrdoob/three.js.git ``` ### 更新日志 [发布版本](https://github.com/mrdoob/three.js/releases)

标签：3D, 3D图形库, 3D引擎, 3D渲染, CMS安全, CSS3D, JavaScript, LangChain, Mutation, SVG渲染, three.js, Web3D, WebGL, WebGPU, 前端3D, 可视化, 开源库, 搜索引擎爬虫, 数据可视化, 自定义脚本, 跨浏览器, 轻量级