Three.JS一1 简介与基本示例

Three.js是一个基于Webgl的三维绘图MIT开源js框架。它封装了原生Webgl的诸多API细节，以一种大众的简单的方式提供绘图与动画控制的接口。场景（Scene）、相机（Camera）、渲染(Render)是它的三大组件。基于它，我们能比较容易地编写出网页3D效果与动画。
官网：https://threejs.org/
文档：https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
示例：https://threejs.org/examples/#webgl_animation_cloth

以下是官方的一个基本示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>three.js Hello world</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            // Our Javascript will go here.
            var scene = new THREE.Scene();      //创建一个场影对象（场景就相当于一个世界）
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );    //创建相机对象（相机相当于我们的视角，如何窃探场景那一个世界）

            var renderer = new THREE.WebGLRenderer();   //创建一个渲染对象  （渲染相当于眼睛神经，生成影像使我们能感知）
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            var geometry = new THREE.BoxGeometry( 1, 1, 1 );    //创建一个形状
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );    //创建一种材质
            var cube = new THREE.Mesh( geometry, material );     //将形状与材质合成一个三维实体
            scene.add( cube );    //向场景中添加三维实体

            camera.position.z = 5;

            //动画函数
            var animate = function () {
            /*
        1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，其间隔时长基本与浏览器的刷新频率，一般为每秒60帧。
        2、对于隐藏或不可见的元素，requestAnimationFrame将不会进行重绘或回流，这有助于减小消耗。
            */
                requestAnimationFrame( animate );  

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

 

 

收集了的教程：
使用Three.JS以及A*寻路算法制作自动寻路场景
3D模型加载与键换控制运动
FBX格式模型及动画加载

 

posted on 2020-06-08 12:34  Yu-weiz  阅读(549)  评论(0)  编辑  收藏  举报

导航