WebGL(Web Graphics Library)是一种 JavaScript API,用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形,不需要插件,即专门处理计算或处理3D图像的JS API。
Three.js 是一款 WebGL 框架,其WebGL 的 API 接口基础上又进行的一层封装。由西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发,人称Mr.doob。
Parcel 是 Web 应用打包工具,适用于经验不同的开发者。它利用多核处理提供了极快的速度,并且不需要任何配置。其他详细用法详见官网。
yarn add parcel -D
{
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
}
}
博主建议搭建一个本地的three.js
环境,方便快速查看文档。
├─ .parcel-cache
│ ├─ data.mdb
│ └─ lock.mdb
├─ dist
│ ├─ index.07fedde6.css
│ ├─ index.07fedde6.css.map
│ ├─ index.246235aa.js
│ ├─ index.246235aa.js.map
│ ├─ index.html
│ ├─ main.0632549a.js
│ ├─ main.0632549a.js.map
│ ├─ style.a11e3109.css
│ ├─ style.a11e3109.css.map
│ ├─ style.a11e3109.js
│ └─ style.a11e3109.js.map
├─ package.json
├─ src
│ ├─ assets
│ │ ├─ css
│ │ │ └─ style.css
│ │ └─ img
│ ├─ index.html
│ └─ main
│ └─ main.js
└─ yarn.lock
three
yarn add three -S
main.js
并在index.html
引用<!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>Document</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<script src="./main/main.js" type="module"></script>
</body>
</html>
创建场景借助three.js
来进行显示,需要场景、相机和渲染器3个对象,透过然后通过摄像机渲染出场景。
new THREE.Scence();
three.js
里有几种不同的相机,这使用的是PerspectiveCamera
(透视摄像机),接收四个参数:
当物体某些部分比摄像机的远截面远或者比近截面近的时候,该这些部分将不会被渲染到场景中。该值必须大于near plane(摄像机视锥体近端面)的值。
new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 0, 10)
scene.add(camera)
BoxGeometry
是四边形的原始几何类,它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。
BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
Mesh
表示基于以三角形为polygon mesh
(多边形网格)的物体的类。把几何体与材料融合就得到了网格,网格才是我们真正渲染的东西。
用法:Mesh( geometry : BufferGeometry, material : Material )const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
scene.add(cube)
场景写完之后,需要进行渲染。
这里使用的是WebGL1Renderer
,该版本的渲染器会强制使用 WebGL 1
渲染上下文。注意:自r118起,WebGLRenderer会自动使用 WebGL 2 渲染上下文。
const renderer = new THREE.WebGL1Renderer()
console.log(renderer)//renderer中有一个canvas对象,就是我们看到的画布内容
renderer.setSize(window.innerWidth ,window.innerHeight)
webgl
渲染的canvas
内容添加到body
document.body.appendChild(renderer.domElement)
创建一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环。使用requestAnimationFrame时,当用户切换到其它的标签页时会暂停,不会浪费用户处理器资源,也不会损耗电池的使用寿命。
function render(){
renderer.render(scene,camera)
//渲染下一帧的就会调用
requestAnimationFrame(render)
}
render()
Orbit controls
(轨道控制器)可以使得相机围绕目标进行轨道运动。
用法:OrbitControls( object : Camera, domElement : HTMLDOMElement )
main.js
中的源码如下
import * as THREE from 'three'
//导入控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
console.log(THREE)
//创建场景
const scene = new THREE.Scene();
//创建相机(角度,宽高比,,)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//相机位置
camera.position.set(0, 0, 10)
scene.add(camera);
//添加物体
//创建几何体
const cubeGeometry = new THREE.BoxGeometry();
//设置材质
const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00})
//根据几何体,材质创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
// 将几何体添加到场景
scene.add(cube)
//初始化渲染器
const renderer = new THREE.WebGL1Renderer()
//设置渲染的尺寸大小
renderer.setSize(window.innerWidth ,window.innerHeight)
console.log(renderer)//renderer中有一个canvas对象
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)
//使用渲染器,通过相机将场景渲染进来
// renderer.render(scene,camera)
//创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);
//创建一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环
function render(){
renderer.render(scene,camera)
//渲染下一帧的就会调用
requestAnimationFrame(render)
}
render()
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。