threeJS简介

为了真正能够使用three.js显示任何内容，我们需要三件事：场景，相机和渲染器，以便我们可以使用相机渲染场景。github地址：https://github.com/mrdoob/three.js，直接下载，会非常慢，出现下载不成功。奉上资源的百度网盘地址：https://pan.baidu.com/s/1d5miM_0qmntxVt8QdvZ8UQ ，密码:mu1r

threeJs的几个核心对象：

Scene（场景）
Camera（相机）
Light（光源）
Mesh（模型）
Renderer（渲染器）
Loader（加载器，用来导入模型）

three.js中常用的语法：

语法	描述
new THREE.Scene()	创建场景
new THREE.PerspectiveCamera(num,width/height)	创建相机，第一个参数是视野。表示看到的场景范围，以度为单位。第二个是长宽比。接下来的两个参数表示近和远裁剪平面，指对象从相机比的值越远远或近于附近将不会被渲染。
new THREE.WebGLRenderer()	创建渲染器
renderer.setSize()	设置渲染器尺寸
query.appendChild(renderer.domElement)	将<canvas>元素添加到dom元素中
new THREE.Mesh(geometry, material)	创建一个模型，第一个参数表示几何形状，第二个参数表示材质
scene.add()	将参数（模型、光源等对象）添加到场景中
renderer.render(scene, camera)	将场景和相机渲染到页面中

一个完整的简单的three.js案例：
在这里插入图片描述
案例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
</head>
<body>
    <script src="../js/three.js"></script>
    <script>
    
        init();
        box();
        animate();

        var scene,camera,renderer,cube

        function init(){
            //创建场景
            scene = new THREE.Scene();
            
            //创建相机
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            
            //创建渲染器
            renderer = new THREE.WebGLRenderer();
            //渲染器的尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            //将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。
            //这就是渲染器用来显示场景给我们看的<canvas>元素
            document.body.appendChild(renderer.domElement);
             //默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。
            //为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
            camera.position.z = 5;
        }
        
        function box(){
             //创建一个立方体，我们需要一个BoxGeometry（立方体）对象
             var geometry = new THREE.BoxGeometry(1, 1, 1);
            //材质，来让它有颜色
            var material = new THREE.MeshBasicMaterial({
                color: 0x00ff00
            });
            //Mesh（网格）。 网格包含一个几何体以及作用在此几何体上的材质
            cube = new THREE.Mesh(geometry, material);
            scene.add(cube);
        }

        //“渲染循环”（render loop）或者“动画循环”（animate loop）
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
    </script>
</body>
</html>

下一篇文章来实现加载3D皮卡丘.obj模型，实现缩放、旋转等功能。

threeJs学习随笔（一），附百度网盘下载地址

threeJS简介

猜你喜欢