3个j

JavaScript 三维库

该项目的目的是创建一个易于使用,轻量级,3D级的库. 库提供Canvas 2D,SVG,CSS3D和WebGL渲染器.

实例 —— 说 文档 —— 说 维基 —— 说 移动 —— 说 问 题 —— 说 论坛 —— 说 减肥 —— 说 偷懒

使用量

下载 已修改的库 ,并将其纳入您的 HTML,或者安装并导入为 模块, (中文(简体) ), 或见 如何自己建图书馆。 。 。 .

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

这个代码创造了一个场景,相机,和一个几何立方体,它将立方体添加到场景中. 然后它就创造了一个 WebGL 场景和相机的渲染器,并在文档中添加了该取景口. 身体要素。 最后,它为相机动画了场景内的立方体.

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

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();

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

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    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 );

}

如果一切顺利,你应该看看 这个。 。 。 .

更改日志

释放