2-学习Three.js基础认识三大组建

三大组建

学习Three.js，如果要创建一个3D物体，就需要这三个组建：场景（Scene）、相机（Camera）、渲染器（Renderer）。就好比现实世界中，空间，眼睛，渲染物体。

这里看一个示例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="../js/three.js"></script>
</head>
<body>
<script>
    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.CubeGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    var cube = new THREE.Mesh(geometry, material); scene.add(cube);
    camera.position.z = 5;
    function render() {
        requestAnimationFrame(render);
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
        renderer.render(scene, camera);
    }
    render();
</script>
</body>
</html>

运行后如图，一个不断旋转的立方体：

根据代码分别具体了解三大组建。

场景

场景就如现实世界的空间，是所有物体的容器，在Three.js中添加的物体都是添加到场景中的。在程序最开始的时候进行实例化，然后将物体添加到场景中即可。

var scene = new THREE.Scene();

相机

相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。相机在3D中，有两种相机，一种叫做透视投影相机，一种叫做正交投影相机。这二者使用的相机使用的坐标系是右手坐标系。而这里是透视相机。

 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

渲染器

渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。这里我们定义了一个WebRenderer渲染器，代码如下所示：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

说明在最后

内容并非原创，如有不妥请联系删除：QQ1034070006