WEBGL学习笔记(四):three.js的结构

时间:2021-11-27 04:16:15

 

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

 

 

 

加载时候会黑屏,等待数秒即可,点击这里体验试玩: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~