最新文章:

您的位置: 富录-前端开发|web技术博客 > Three.js > Three.js入门——五步构建立体模型

Three.js入门——五步构建立体模型

发布时间:2017年11月08日 评论数:抢沙发阅读数: 9122

    概述

    Three.js是一款webGL框架,webGL可以让我们在canvas上实现3D效果

    立体模型构建

    Three.js立体模型构建需要五个步骤

    设置渲染器renderer

    设置相机camera

    设置光源light

    设置场景scene

    设置物体object

    第一步 渲染器设置

    三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。 具体来说要进行下面这些处理。

    声明全局变量(对象);

    获取画布容器的宽高;

    生成渲染器对象(属性:抗锯齿效果为设置有效;

    设定渲染器的高宽(和画布框大小一致;

    追加canvas元素到画布容器中;

    设置渲染器的清除色(clearColor)。

    var myCanvas = document.getElementById("mycanvas");
    // 渲染器
    var renderer,//声明全局变量(对象)
        mycanvasW,
        mycanvasH;
    function initRender() {
        mycanvasW = myCanvas.clientWidth;//获取画布容器宽
        mycanvasH = myCanvas.clientHeight;//获取画布容器高
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });//生成渲染器对象(属性:抗锯齿效果为设置有效)
        renderer.setSize(mycanvasW, mycanvasH);//设置渲染器的高宽(和画布框大小一致)
        myCanvas.appendChild(renderer.domElement);追加canvas元素到画布容器mycanvas中;
        renderer.setClearColor(0xfffffff, 1.0);//设置渲染器的清除色
    }

    第二步设置相机

    Three.js中有透视相机和正投影相机,设置步骤如下:

    声明全局变量(对象);

    设置透视投影的相机;

    设置相机的位置坐标;

    设置相机的上为z轴方向;

    设置视野的中心坐标。

    // 相机
    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera( 45,mycanvasW/mycanvasH, 1, 100000 );
        camera.position.y = 10;//设置相机的位置坐标;
        camera.position.z = 10;
        camera.up.z = 1;//设置相机的上为z轴方向;
        camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
    }

    第三步设置场景scene

    场景就是一个三维空间。用 [Scene] 类声明一个叫 [scene] 的对象。

    设置场景

    var scene;
    function initScene() {   
        scene = new THREE.Scene();
    }

    第四步设置光源light

    OpenGL(WebGL)的三维空间中,存在点光源和聚光灯两种类型。 而且,作为点光源的一种特例还存在平行光源(无线远光源)。另外,作为光源的参数还可以进行 [环境光] 等设置。 作为对应, Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)],和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上,都是环境光和其他几种光源进行组合。 如果不设置环境光,那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源,在这之后还会追加环境光。

    (0) 声明全局变量(对象)

    (1) 设置平行光源

    (2) 设置光源向量

    (3) 追加光源到场景

    这里我们用「DirectionalLight」类声明一个叫 [light] 的对象来代表平行光源

    设置光源  

    var light;
    function initLight() { 
    	light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
    	light.position.set( 200, 200, 200 );//设置光源向量
    	scene.add(light);// 追加光源到场景
    }

    第五步设置物体object

    这里声明一个球

    var sphere;
    function initObject(){  
    	sphere = new THREE.Mesh(
    		new THREE.SphereGeometry(20,20),                //width,height,depth
    		new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
    	);
    	scene.add(sphere);
    	sphere.position.set(0,0,0);
    }	
二维码加载中...
本文作者:DGF      文章标题: Three.js入门——五步构建立体模型
本文地址: https://arbays.com/post-48.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论