three.js介绍和安装
1.three.js概念
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能
什么是threejs,很简单,你将它理解成three + js就可以了。three表示3D的意思,js表示javascript的意思。那么合起来,three.js就是使用javascript来写3D程序的意思。Javascript是运行在网页端的脚本语言,那么毫无疑问Three.js也是运行在浏览器上的。
2.three.js的功能
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。
3.相关网站
官网:https://threejs.org/
中文文档:https://threejs.org/docs/index.html#manual/zh
github:https://github.com/mrdoob/three.js
使用parcel打包工具开发
Parcel 是 Web 应用打包工具,适用于经验不同的开发者。它利用多核处理提供了极快的速度,并且不需要任何配置。
官网:https://www.parceljs.cn/
-
创建npm项目
mkdir three_basic cd three_basic npm init -y npm install parcel-bundler npm install parcel-bundler --save-dev
-
接着,通过修改你的
package.json
来添加这些任务脚本{ ... "scripts": { "dev": "parcel src/index.html", "build": "parcel build src/index.html" }, ... }
-
创建基础文件
mkdir src cd src mkdir index.html mkdir assets mkdir css/style.css mkdir main/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> <!-- type="module" 为模块化开发 --> <script src="./main/main.js" type="module"></script> </body> </html>
-
style.css
* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body { background-color: skyblue; }
-
main.js
import * as THREE from "three";
使用npm安装
cd three_basic
npm install three --save
启动项目
npm run dev
了解three.js最基本创建的内容
所有页面基本都要基础代码
import * as THREE from "three";
import {
OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Stats from 'three/examples/js/libs/stats.min.js'
// console.log(THREE)
// 1. 创建场景(必要)
const scene = new THREE.Scene();
// 2. 创建相机(必要)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);
// 3. 添加物体(必要)
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xffff00 });
// 根据几何体和材质创建物体
const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 将物体放进场景
scene.add(mesh);
// 4. 初始化渲染器(必要)
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容放置到html中
document.body.appendChild(renderer.domElement);
//使用渲染器,通过相机将场景渲染进来
renderer.render(scene, camera);
// 5. 轨道控制器 (非必要)
const controls = new OrbitControls(camera, renderer.domElement);
// 7. 辅助坐标系(非必要)
const axes = new THREE.AxesHelper(5)
scene.add(axes);
// 8. 性能插件(非必要)
// 引入stats.js
const stats = new Stats()
// 设置stats样式
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
document.body.appendChild(stats.dom);
// 6. 重新渲染动画(必要)
function render() {
renderer.render(scene, camera);
// 更新stats
stats.update();
// 渲染下一帧的时候就会调用render函数
requestAnimationFrame(render);
}
render();
// 9. 页面变化,页面也要相对的更新(必要)
window.addEventListener('resize', function () {
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
// 更新渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio)
})
全屏和退出全屏
// 双击控制屏幕进入全屏,退出全屏
window.addEventListener("dblclick", function () {
// 获取文档全屏元素,没有时为 undefined
let fullScreenElemet = document.fullscreenElement;
if (fullScreenElemet) {
// 以文档退出全屏
document.exitFullscreen();
} else {
// 以画布进入全屏
renderer.domElement.requestFullscreen();
}
})