最新文章:

您的位置: 富录-前端开发|web技术博客 > Three.js > three.js起步

three.js起步

发布时间:2018年01月18日 评论数:抢沙发阅读数: 2367

    活到老,学到老。选择了技术就不能停下学习的脚步。

    最近项目中用到three.js,这让我感觉非常痛苦呀,没有详细的文档介绍,所以感觉不好下手,且学习成本高。

    废话少说就不多少了,下面就开始进入学习了:

    学习前先看一个例子:http://aleksandarrodic.com/p/jellyfish/

    three.js下载地址: https://github.com/mrdoob/three.js

    1、three的目录结构



    .github这个不管,从GitHub中checkout的开源项目都有

    build目录,里面有三个文件three.js 、three.min.js和three.modules.js。这个是项目中要引用的文件;

    docs目录,里面试three.js的帮助文件,里面是各个函数的api,可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。

    editor目录,一个类似3D-max的简单编辑程序,它能创建一些三维物体

    examples目录,一些demo

    src目录,所有源代码

    test目录,这个开源项目的一些测试代码

    utils目录,存放一些脚本,python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。

    其他的就不管了。

    2、three.js的引入

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>canvas { width: 100%; height: 100% }</style>
    </head>
    <body>
        <script src="js/three.js"></script>
    </body>
    </html>


    打开浏览器控制台,输入THREE.REVISION命令,得到82,这表示现在使用的three.js文件的版本是82,如下图所示:


    tips:THREE是一个three.js对象,可以狭隘的理解为three.js引擎的抽象。它代表着three.js引擎本身,其中包含引擎的很多常用属性和方法。例如 THREE.REVISION就是代码引擎的版本。

    3、三大组件

    threejs要渲染物体到网页中,需要三大组件: 场景(scene)、相机(camera)和渲染器(renderer)

    1.在Threejs中场景就只有一种,用THREE.Scene来表示,要构件一个场景也很简单,只要new一个对象就可以了,代码如下:

    var scene = new THREE.Scene();

    场景是所有物体的容器,如果要显示一个苹果,就需要将苹果对象加入场景中。

    2.相机决定了场景中哪个角度的景色会显示出来。相机就像人的眼睛一样,人站在不同位置,抬头或者低头都能够看到不同的景色。

    3.渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以怎样的方式来绘制

    渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的,所以这里的appendChild表示将这个domElement挂接在body下面,这样渲染的结果就能够在页面中显示了。

    4、threejs中定义一个点


    THREE.Vector3 = function ( x, y, z ) {
        this.x = x || 0;
        this.y = y || 0;
        this.z = z || 0;
    };


    中间使用了一个“||”(或)运算符,就是当x=null或者undefine时,this.x的值应该取0。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=utf-8>
            <title>My first Three.js app</title>
            <style>
                body { margin: 0; }
                canvas { width: 100%; height: 100% }
            </style>
        </head>
        <body>
            <script src="three.min.js"></script>
            <script>
                // our javascript will go here
                // 实例化场景
                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 );
                // 向body中插入canvas
                document.body.appendChild( renderer.domElement );
    
                var geometry = new THREE.BoxGeometry( 1, 1, 1 );
                var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
                var cube = new THREE.Mesh( geometry, material );
                scene.add( cube );
    
                camera.position.z = 5;
    
                var render = function () {
                    requestAnimationFrame( render );
    
                    cube.rotation.x += 0.1;
                    cube.rotation.y += 0.1;
    
                    renderer.render(scene, camera);
                };
    
                render();
            </script>
        </body>
    </html>


二维码加载中...
本文作者:DGF      文章标题: three.js起步
本文地址: https://www.arbays.com/post-65.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论