前言:本篇主要是three.js的一个介绍,了解WebGL与three.js的关系。以及three.js的四个重要的组建。
WebGL
是一项可以在浏览器中流畅展示3D模型和场景的一种技术。他使用JavaScript作为编程语言,调用浏览器支持的3D绘制函数,来实现3D模型和场景的展现。
因为浏览器实现了OpenGL es的规范,这套规范可以直接使用指令操作显卡,使显卡渲染的3D世界,直接反应到浏览器中。
three.js是一个封装好的WebGL库,他使WebGL的学习更为简单。
如果使用了框架,可以npm后再导入
npm install three --save
在使用的文件中引入
var THREE = require('three');
//或者
import * as THREE from 'three';
首先先在官网下载好最新版本的three.js压缩包,解压后在build文件夹中找到three.js文件,将它复制到使用的文件夹下即可。
<script src="./js/three.js">script>
在three.js中,要渲染物体到网页中,需要4个组建:场景、相机、渲染器、和几何体。有了这四样东西,才能使用相机将场景渲染到网页上去。
场景就是所有物体的容器,可以把任何想要显示的东西,放在场景中的任何位置。
构建一个场景:
var scene = new THREE.Scene();
相机决定了场景中哪个角度的景色会显示出来。我们最终能够在浏览器中看到的景象,就是相机拍摄出来的。
相机分为两大类:
定义相机:只要设置不同的相机参数,就能让相机产生不一样的效果。
var camera = new THREE.PerspectiveCamera(80,window.innerWidth/window.innerHeight,0.1,1000);
透视相机:透视投影符合人们的心理习惯,即离视点近的物体大,离视点远的物体小,远到极点即为消失,成为灭点
。
就是远处和近处的是一样大。
渲染器,决定了画家怎么把眼前的场景画到屏幕上,即渲染器决定了渲染的结果应该画在页面的什么元素上,并且以怎样的方式来绘制。
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
注意:渲染器render的DOMElement元素,表示渲染器中的画布,所有的渲染都是画在DOMElement上的,所以这里的appendChild表示将这个domElement挂接在body下面,这样渲染的结果就能够在页面中显示了。
渲染应该使用渲染器,结合相机和场景来得到结果画面。
renderer.render(scene,camera);
//渲染函数的原型
render(scene,camera,renderTarget,forceClear);
实时渲染
:需要不停的对画面进行渲染,即使画面中什么也没有改变,也需要重新渲染。
其中一个重要的函数就是 requestAnimationFrame()
,这个函数就是然后浏览器去执行一次参数中的函数,再通过参数的函数去调用,就可以成为无限循环了。
离线渲染
:事先渲染好一帧一帧的图片,然后再把图片拼接成电影。
几何体,就是要显示在场景中的对象。
一个旋转的正方体
<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>01title>
<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>