WEBGL学习笔记（四）：three.js的结构

 

游戏已经做好，但是博客园不能支持哈，我在我的独立博客里面加入了这个游戏。

 

 

 

加载时候会黑屏，等待数秒即可，点击这里体验试玩：FlappyBird3d游戏试玩

 

 

 

我们知道three.js有几大件，掌握好这几个类，那么就算入门了！

场景scene，摄像机camera，渲染器render。光源light、控制control、加载器loader

 

three.js的写法由一个套路，基本上是

1.新建场景*

2.摄像机*

3.新建object3d，光源等（添加到场景）※

4.新建渲染器并渲染*（three.js-master\examples\js\renderers）

5.添加控制※(three.js-master\examples\js\controls)

6.游戏循环和动画※

 

上面带*的都是必须的，比较基础这里不说了。下面说两个3和5

 

下面说一下loader，我管他叫加载器，其实我觉得它实际干的是格式转换的活。

 

因为three.js本身很难做出复杂的模型，因此复杂的人物模型都依靠加载js格式的3d模型，比如

 

                var loader = new THREE.JSONLoader();
                loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
                    createScene( geometry, materials, 0, FLOOR, -300, 60 )
                    // GUI
                    initGUI();
                } );

 

 

 

但是很多3d模型都不是js格式的，所以three.js提供了很多loader，说白了就是转换工具，把其他3d模型转换为js格式。目前支持的格式在我看来非常的多，3mf，obj，amf，awd....

在目录three.js-master\examples\js\loaders里面非常多，同时可以在example里面看到很多示例，很好上手。以obj模型为例，加载obj模型的语法大概是这样的

 

var loader = new THREE.OBJLoader( manager );
                loader.load( 'obj/male02/male02.obj', function ( object ) {

                    object.traverse( function ( child ) {

                        if ( child instanceof THREE.Mesh ) {

                            child.material.map = texture;

                        }

                    } );

 

 

 

这些代码在example里面都有，这里不详细展开了。依我看来，想要做出比较精细的模型，loader的使用是必不可少的，我认为他很重要。

 

还有一个我认为也十分重要的是control，如果你打开示例，你会发现很多例子都支持拖拽，鼠标移动视角，缩放或者旋转等等。这些东西如果都用js单独定义lisenter去实现显得太麻烦了。

现在controls类来了，你只需要把control引用，然后添加到dom里面就可以了，非常方便。都有哪些control呢？你可以打开(three.js-master\examples\js\controls)很多。

 

就我个人而言，也是一个初学者，我接触的control主要有两个，第一个THREE.OrbitControls，这个很容易实现3d的缩放旋转（鼠标旋转，滚轮缩放）

它的用法很简单，如下：

 

var controls = new THREE.OrbitControls(camera, renderer.domElement);

            controls.addEventListener('change', render);

            //旋转的中心点
            controls.target.set(0, 0, 0);
            
            controls.update();

        
        function render() {
           
            renderer.render(scene, camera);

        }

 

 

 

通过上面的代码，看出这是个绕点旋转的control，比较简单实用，遗憾的是不支持平移（鼠标右键的平移应该是绕点平移）。问题不大，还有很多其他的control，他们是支持平移的，可以参考，这是一种control类型。

 

还有一种，第一人称视角的control，前一种说白了移动的是物体，第一人称视角移动的是摄像头。如果你建立一个世界模型，想做一个类似cs的查看方式，你需要的就是移动摄像头。我首先找到了这个

firstPersonControls，用起来挺简单的，和前一个差不多，只不过这个视角移动太low了，和cs游戏里面的差距不是一般的大！有兴趣的可以去看看，简单是简单，效果不好。

 

然后我找到了PointerLockControls，这个就完全实现了cs游戏的效果了，缺点也是很明显，貌似只能全屏，就我看到的例子和自己试验，只能全屏...不过效果真的没的说！代码这里不贴了，给个地址吧

https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_pointerlock.html

 

如果你下载了github代码，打开这个three.js-master/examples/index.html#misc_controls_pointerlock就是了。

 

除了上面介绍的几种control，还有很多，我也没一一研究，大家可以根据自己的实际需要来用。对于一些简单的，完全可以自己写control，并不难！

 

博客园主页的webgl，我直接偷懒使用了OrbitControls，没有自己写，毕竟自己写要麻烦些，如果我只想左右旋转，像这种情况，自己写的效果要好于使用OrbitControls

 

end~