three.js

前端 图像
JavaScript 3D 库
2天前 6 10 我要收藏

three.js

JavaScript 3D 库

该项目旨在创建一个轻量的,易用的 3D 图形库 — 换句话说,这个库提供了 <canvas>, <svg>, CSS3DWebGL 的渲染器。

例子文档迁移帮助

用法

下载 压缩版 包含在你的 html 中,或者查看 how to build the library yourself.

<script src="js/three.min.js"></script>

下面的代码创建了一个场景(scene),一个摄影机(camera) 和一个立方体(cube ),并且将立方体加入到场景中去。然后为场景 和摄影机创建了一个 <canvas> 渲染器,并且将这个视图加入到了 document.body元素中去了。最后让立方体在场景中为摄影机完成了动画。

<script>

    var scene, camera, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        requestAnimationFrame( animate );

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

</script>

如果一切都正常工作的话,你应该看看 这个

更新日志

releases

three.js 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论(6)