Three.js 场景、相机、渲染(01)

2021/02/08 07:51
阅读数 189

前言:本篇主要是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>
展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部