当前位置：首页 > news >正文

three.js入门 1 介绍和基础代码

news 来源：原创 2024/5/17 19:31:33

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();
  }

})