Three.js 场景、相机、渲染（01）

前言：本篇主要是three.js的一个介绍，了解WebGL与three.js的关系。以及three.js的四个重要的组建。

文章目录

一、什么是WebGL？

WebGL是一项可以在浏览器中流畅展示3D模型和场景的一种技术。他使用JavaScript作为编程语言，调用浏览器支持的3D绘制函数，来实现3D模型和场景的展现。

1.1浏览器为什么能绘制3D？

因为浏览器实现了OpenGL es的规范，这套规范可以直接使用指令操作显卡，使显卡渲染的3D世界，直接反应到浏览器中。

1.2webgl能做什么

游戏
家居
虚拟现实
城市地图
CAD制图

1.3 WebGL与three.js的关系

three.js是一个封装好的WebGL库，他使WebGL的学习更为简单。

1.4 导入three.js

（1）直接npm

如果使用了框架，可以npm后再导入

npm install three --save

在使用的文件中引入

var THREE = require('three');
//或者
import * as THREE from 'three';

（2）单页面中引入

首先先在官网下载好最新版本的three.js压缩包，解压后在build文件夹中找到three.js文件，将它复制到使用的文件夹下即可。

<script src="./js/three.js"></script>

二、四大组建

在three.js中，要渲染物体到网页中，需要4个组建：场景、相机、渲染器、和几何体。有了这四样东西，才能使用相机将场景渲染到网页上去。

2.1 场景

场景就是所有物体的容器，可以把任何想要显示的东西，放在场景中的任何位置。

在three.js中场景就只有一种
用THREE.Scene来表示。

构建一个场景：

var scene = new THREE.Scene();

2.2 相机

相机决定了场景中哪个角度的景色会显示出来。我们最终能够在浏览器中看到的景象，就是相机拍摄出来的。

相机分为两大类：

透视相机
正投影相机

定义相机：只要设置不同的相机参数，就能让相机产生不一样的效果。

var camera = new THREE.PerspectiveCamera(80,window.innerWidth/window.innerHeight,0.1,1000);

2.2.1 透视相机

透视相机：透视投影符合人们的心理习惯，即离视点近的物体大，离视点远的物体小，远到极点即为消失，成为灭点。

2.2.2 正投影相机

就是远处和近处的是一样大。

2.3 渲染器

渲染器，决定了画家怎么把眼前的场景画到屏幕上，即渲染器决定了渲染的结果应该画在页面的什么元素上，并且以怎样的方式来绘制。

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

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

2.3.1 渲染

渲染应该使用渲染器，结合相机和场景来得到结果画面。

renderer.render(scene,camera);
//渲染函数的原型
render(scene,camera,renderTarget,forceClear);

scene:前面定义的场景
camera:前面定义的相机
renderTarget:渲染的目标，默认是渲染到前面定义的render变量中
forceClear:每次绘制之前都将画布的内容清除，即使自动清楚标志autoClear为false，也会清除。

2.3.2 实时渲染和离线渲染

实时渲染：需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。

其中一个重要的函数就是 requestAnimationFrame(),这个函数就是然后浏览器去执行一次参数中的函数，再通过参数的函数去调用，就可以成为无限循环了。

离线渲染：事先渲染好一帧一帧的图片，然后再把图片拼接成电影。

2.4 几何体

几何体，就是要显示在场景中的对象。

三、一个栗子

一个旋转的正方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01</title>
    <script src="three.js"></script>
</head>
<body>
    <script>
        //1.创建场景
        var scene = new THREE.Scene();
        //2.创建相机
        var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
        //3.创建渲染器
        var renderer = new THREE.WebGLRenderer();
        //渲染器的尺寸大小
        renderer.setSize(window.innerWidth,window.innerHeight);
        //将渲染器结果挂载到body中
        document.body.appendChild(renderer.domElement);
        //4.定义一个几何体
        //var geometry = new THREE.CubeGeometry(1,1,1);  这样子定义正方体报错了？？
        var geometry = new THREE.BoxGeometry(1,1,1); //定义一个正方体
        var material = new THREE.MeshBasicMaterial({
    
    color:0xff0000}); //定义材质
        //定义实体，即这是最终展现出来的实体
        var cube = new THREE.Mesh(geometry,material); 
        scene.add(cube);    //将实体加到场景里

        //将物体移动到可视位置
        camera.position.z = 5;
        function render(){
    
       //render函数执行一次就会重新绘制一次
            requestAnimationFrame(render);  //不断去调用render这个函数
            cube.rotation.x+=0.01;  //绕x的旋转+0.01
            cube.rotation.y+=0.01;
            renderer.render(scene,camera);  
        }
        render();
    </script>
</body>
</html>

来源：oschina

链接：https://my.oschina.net/u/4408222/blog/4949980

标签

WebGL

npm