1. 技术文章
  2. three.js入门3

three.js入门3

由 我怕爱的太早我们不能终老 提交于 2019-12-20 21:23:25

为什么要用three.js

Three.js为我们封装了底层的WebGl接口，使我们在无需掌握繁冗的图形学知识的基础下可以轻松的创建三维场景。相比较使用底层的WebGL我们可以使用更少的代码，大大的降低了学习成本，使开发变的更高效。

新建HTML页面

首先新建一个HTML页面，引入Three.js文件。

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8"> 
        <title>three.js</title> 
    </head> 
    <body> 
        <script type="text/javascript" src="js/Three/three.js"></script> 
        <script> 
          
        </script> 
    </body> 
  
</html>

 

 

创建一个三维场景

  var scene = new THREE.Scene();

 

添加一个渲染器

Three.js为我们提供了如：canvas,SVG,CSS3..众多渲染器，但是WebGL渲染器相较比较灵活，所以均以WebGL为例。

    var render = new THREE. THREE.WebGLRenderer({  
                    //抗锯齿属性，WebGLRenderer常用的一个属性
                    antialias: true  
                });  
                
        //设置背景色为白色(0xffffff)
        render.setClearColor(0xffffff);  
        
        //设置渲染尺寸为页面大小
        render.setSize(window.innerWidth, window.innerHeight); 
        
        //使用WebGLRenderer生成canvas元素。
        document.body.appendChild(render.domElement);

 

当然也可以自己定义一个canvas

canvas <canvas id="myCanvas" width="400px" height="300px" ></canvas>

并将WebGLRenderer定义改为

var render = new THREE.WebGLRenderer({
canvas: document.getElementById('myCanvas'),
antialias: true
});

 

三维场景中重要的组件

三维场景中重要的组件包括   renderer(渲染器)、scene(场景) 和camera(相机)。

three.js使用的右手坐标系。

camera

camera(相机)，决定了你开始看到三维场景的位置，朝向和角度等信息。

three.js相机有两种

var camera = new THREE.PerspectiveCamera(45, 4/3, 0.1, 1000);  

var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 1000);

PerspectiveCamera(fov,aspect,near,far) 透视相机

 fov  :视角。从相机能看到的部分场景。对于游戏来讲大概有60到90度左右的视场。推荐默认值：45

 aspect:长宽比。渲染结果的横向长度和纵向长度比。推荐默认值：window.innerWidth/window.innerHeight

 near ：相机开始看到的渲染距离。推荐默认值:0.1

 far :相机最远可以看到的渲染距离。推荐默认值：1000


 OrthographicCamera(left,right,top,bottom,near,far) 正投影相机

 left  ：相机可以看到渲染的左平面。

 right ：相机可以看到渲染的右平面。

 top  ：相机可以看到渲染的上平面。

 bottom：相机可以看到渲染的下平面。

 naer  :同上PerspectiveCamera

 far  :同上PerspectiveCamera

 

camera 常用到的函数包括：lookAt()设置相机所看的位置

 <span style="font-family:Courier New;">camera.lookAt(new THREE.Vector3(10,10,10));</span>

 

 

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);  
   
       //设置相机朝向位置为(20,0,20) 
        camera.lookAt(new THREE.Vector3(20, 0, 20));

 

light

light(光源)，决定了你的场景拥有的光源类型和会产生的光照效果。

three.js里面灯光主要有四种

1.AmbientLight(影响整个场景的光源)

AmbientLight的光线没有特定的来源，所以不需要指定位置信息。也不会对阴影的生成产生影响。


2.PointLight(照射所有方向的光源)

PointLight一般不用来产生阴影，PointLight的光线来自四面八方产生阴影会为GPU带来沉重负担。


3.SpotLight(具有锥形效果的光源)

SpotLight产生的阴影为圆锥形状。


4.DirectionLight(模拟远处类似太阳的光源)

DirectionLight产生的阴影为方块形状。

光源的几个主要属性：color:光源颜色

 intensity:光源的强度  默认值：1 distance:光源的照射距离 position:光源的所在位置                                 visible:光源是否可见

 

 

材质和几何体构成网格，决定几何体是否像金属，透明与否，已经是否显示成线框。

 

  • MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框

  • MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体

  • MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体

 

我们在场景中先添加了几个物体,然后添加了一个会移动的SpotLight光源便会看到物体阴影会随着光源变化而变化。

  物体添加阴影：


1.渲染器开启shadowMap

 
  1. renderer.shadowMapEnabled = true;  

shadowMap的样式有 THREE.BasicShadowMap ， THREE.PCFShadowMap ， THREE.PCFSoftShadowMap 三种。参数为0-2。

如：设置shadowMap样式为 THREE.BasicShadowMap

 

  1. renderer.shadowMap = 0;  

2.灯光生成阴影

 
  1. light.castShadow = true;  

3.地面接收阴影

 
  1. plane.receiveShadow = true;  

4.物体产生阴影

 
    1. mesh.castShadow = true; 

 


    var light = new THREE.AmbientLight(0xffffff);
    
        //使用 Scene()的add方法将light添加到Scene中  
        scene.add(light);

 

object

THREE.CubeGeometry ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides );//立方体
THREE.CylinderGeometry ( radiusTop, radiusBottom, height, segmentsRadius, segmentsHeight, openEnded );//円錐型
THREE.OctahedronGeometry ( radius, detail ) //八面体
THREE.PlaneGeometry ( width, height, segmentsWidth, segmentsHeight ); //平面型
THREE.SphereGeometry ( radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength );//球型
THREE.TorusGeometry ( radius, tube, segmentsR, segmentsT, arc )//トーラス型

 

object(物体)，你想要添加到场景中的各式各样的物体。

    //物体三维图形
    var geometry = new THREE.CubeGeometry(4, 4, 4); 
    
    //物体材质 
    var material = new THREE.MeshBasicMaterial({  
                    color: 0x4d6dad  
                });  
                
    //生成三维物体
    var mesh = new THREE.Mesh(geometry, material);  
    
        mesh.position.set(10, 0, 10);  
        
        //使用 Scene()的add方法将mesh添加到Scene中
        scene.add(mesh);

 

渲染场景

1.声明渲染器对象，我们用new THREE.WebGLRenderer()来新建一个WebGL渲染器。

  其中WebGLRenderer()中有一些参数我们可以设置，以下这些参数来自于官方文档：

  (1)antialias:

　　  值：true/false

　　  含义：是否开启反锯齿，设置为true开启反锯齿。

  (2)precision:

　　  值：highp/mediump/lowp

　　  含义：着色精度选择。

  (3)alpha:

　　  值：true/false

　　  含义：是否可以设置背景色透明。

  (4)premultipliedAlpha:

　　  值：true/false

　　  含义：？

  (5)stencil:

　　  值：true/false

　　  含义：?

  (6)preserveDrawingBuffer:

　　  值：true/false

　　  含义：是否保存绘图缓冲，若设为true，则可以提取canvas绘图的缓冲。

  (7)maxLights:

　　  值：数值int

　　  含义：最大灯光数，我们的场景中最多能够添加多少个灯光。

2.制定渲染器的宽高，我们用renderer.setSize(width,height)来设置；

3.追加生成的canvas元素到容器元素中。canvas对象的获取方法为renderer.domElement；

4.设置canvas背景色(clearColor)和背景色透明度（clearAlpha）,renderer.setClearColor(clearColor,clearAlpha);

那么以上就是three.js渲染器的一些常用设置了，大家可以实际检验一下各种参数所起的作用。

定时刷新场景，调用WebGLRenderer的render函数刷新场景。

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

 

添加动画

我们可以通过在render()函数中对object(物体)的position(位置)，rotation(旋转)和scale(缩放)属性进行控制来实现简单地动画效果。渲染的FPS为60，也就意味着一秒钟会变化60次。

   mesh.rotation.y += Math.PI / 180 * 1;

 

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>three-basic</title>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <script type="text/javascript" src="libs/three.js"></script>
        <script>
            var scene, renderer, camera, mesh;//场景，渲染器，相机，网格
            function init() {//初始化
                scene = new THREE.Scene();//场景
                renderer = new THREE.WebGLRenderer({//渲染器
                antialias: true//是否开启反锯齿  
                });
                renderer.setClearColor(0xffffff); //设置canvas背景色(clearColor)  
                renderer.setSize(window.innerWidth, window.innerHeight);//指定渲染器的高宽（和画布框大小一致）  
                
                
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 透视相机(视角，长宽比，开始看到的渲染距离，最远的渲染距离)
                camera.lookAt(new THREE.Vector3(20, 0, 20));//设置相机朝向位置为(20,0,20) 
                
                var light = new THREE.AmbientLight(0xffffff);//灯光，AmbientLight影响整个场景的光源
                scene.add(light);
                var geometry = new THREE.CubeGeometry(4, 4, 4);//创建立方体
                var material = new THREE.MeshBasicMaterial({//材质，MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框
                    color: 0x4d6dad
                });
                
                mesh = new THREE.Mesh(geometry, material);//Mesh（图元装配函数）   生成三维物体
                mesh.position.set(10, 0, 10);
                scene.add(mesh); //使用 Scene()的add方法将mesh添加到Scene中
                document.body.appendChild(renderer.domElement);
                render();
            }
            function render() {
                mesh.rotation.y += Math.PI / 180 * 1;//添加动画
                renderer.render(scene, camera);//调用WebGLRenderer的render函数刷新场景
                requestAnimationFrame(render);
            }
            init();
        </script>
        <script type="text/javascript" src="../js/cjy_info.js"></script>
    </body>

</html>

 

 

原文https://chenjy1225.github.io/2016/08/08/three-js-basic/

标签
渲染器
canvas
相机
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!