Three.js的学习历程(一)

      WebGL之Three.js的学习之路，WebGL本身学习起来不太容易，偶尔发现Three.js库封装的很好，简单记录下学习语法。

     首先Three分三大块来组装:

           (1)场景(scene)

           (2)相机(camera)

           (3)渲染器(renderer)

      如何创建这三大块呢？直接代码来展示

           场景:  

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(400, 300); // 设置渲染器的宽度和高度
document.body.appendChild(renderer.domElement); // 添加到页面当中

 

          OK，基本框架完成。

        第二步:将物体添加到场景中去

            

var geometry = new THREE.CubeGeometry(1, 1, 1); // 生成立方体，参数是X轴 Y轴 Z轴的长度
var material = new THREE.MeshBasicMaterial({color: 0xff0000}); // 立方体纹理
var cube = new THREE.Mesh(geometry, material); // 将纹理覆盖到立方体上

scene.add(cube); // 将立方体添加到场景中

         第三步:渲染

                下面使用渲染器将立方体渲染到页面中去，实现这功能的函数是:

                        renderer.render(scene, camera); // 看参数名字就知道 scene是场景，camera是相机

          OK，接下来看全部代码：