【Three.js】入门必读

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量749 收藏 8
点赞数 26
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangzhenmeng/article/details/142136361
版权

一. 简介

二. 准备工作

1 官网本地部署

Three.js的官网在国外, 访问速度比较慢, 而我们需要经常参考文档和示例
因此, 考虑将Three.js的官网部署到本地

1) 官网

Three.js – JavaScript 3D library

2) GitHub

GitHub - mrdoob/three.js: JavaScript 3D Library.
我们可以直接从GitHub上clone最新的dev分支, 部署在本地方便查看

3) 具体操作

通过git clone到本地

git clone https://github.com/mrdoob/three.js.git

安装依赖

npm install

运行

npm run start

2 搭建开发环境

1) 开发建议

在开发之前, 我有几点建议

  1. 一定使用代码自动补全!!!

由于three.js有众多的API, 名字长, 单词容易拼错, 基本上记不住

  1. 模块化开发

threejs的官方从150+版本后打算废弃直接引入的方式, 并在160版本移除
image.png

2) 初始化项目

创建一个目录three-basic, 执行

npm init -y

3) 安装three.js

npm install three@0.152

:::danger
⚠️ 特别注意
由于threejs的更新非常快, 这里默认安装会自动安装最新版的three.js, 不同的版本下API和目录结构可能不同
本教程(2023-05-10)使用的版本是最新版(v0.152.2)
为了保证一致性, 建议大家在安装时指定版本
:::

4) 使用vite

vite是开箱即用的下一代打包工具, 原生支持模块化开发
相比于webpack``Rollup Parcel更快, 更好用
将vite安装成开发时依赖, 使用vite启动开发服务

npm i vite -D

创建入口文件index.html, 在入口文件中引入

  • 初始化样式reset.css
  • 主入口文件main.js
<!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="./src/assets/styles/reset.css" />
  </head>
  <body>
    <!-- 使用模块化方式引入入口文件 -->
    <script src="./src/main.js" type="module"></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: skyblue;
}

// 导入THREE
import * as THREE from "three";

// 创建一个场景
const scene = new THREE.Scene();
console.log(scene);

编辑package.json脚本

"scripts": {
  "dev": "vite"
},

启动开发服务

npm run dev

测试

三. 起步案例

接下来, 我们通过一个起步案例来快速体验threejs

示例效果

起步案例效果.gif

1 基础概念

在三维世界中, 有这样几个概念我们需要先理解

  • 场景
  • 相机
  • 物体
  • 光源

image.png

1) 场景

如何理解场景

场景就是一个三维的世界, 在这个世界中可以放置各种各样的物体
可以理解成一个空间, 或者容器

2) 相机

如何理解相机

:::warning
🤔 **思考: **如何在二维平面表现三维效果
由于我们的显示器是二维平面, 只有两个维度, 如何在一个二维平面表现出三维效果呢?
在现实生活中, 得益于拍照技术, 从不同的角度拍射(观察)同一个物体, 然后通过一些光照阴影我们的大脑可以自行脑补出三维的画图
:::
这里的相机就是三维空间的观察者
当相机从不同的角度观察同一个物体会得到不同的图像, 然后把这些图像使用一定的技术拼接组合, 我们的大脑会根据生活在三维世界的经验自行脑补出三维空间

3) 物体

在三维空间, 可以放置一些物体, 这些物体就是被观察的对象
不同的物体形状, 大小, 材质和纹理不相同
尽可能模拟现实生活中的实际物体, 比如
threejs-3D汽车.gif

4) 光源

为了更好的模拟三维效果, 需要一些光照和阴影

2 实现步骤

使用three.js需要这样几步

  1. 创建一个三维场景(Scene)
  2. 创建一个相机(Camera)
  3. 创建渲染器渲染(Renderer)

1) 创建三维场景

const scene = new THREE.Scene();

2) 创建相机

// 2. 创建透视相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000,
);
camera.position.z = 5;

3) 创建渲染器

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 4. 渲染
renderer.render(scene, camera);

如何理解渲染

渲染就是拿相机在场景中拍照, 拍的照片显示在canvas画布上

上述完整示例

// 导入threejs
import * as THREE from "three";

// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建透视相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000,
);
camera.position.z = 5;
// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 4. 渲染
renderer.render(scene, camera);

4) 添加物体

创建一个立方体, 添加到场景中
在three.js中, 使用Mesh(网格)表示一个物体, 包括

  • 几何形状(Geometry)
  • 表面材质(Material)
// 5. 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);

上述代码

  1. 创建了长宽高均为1个单位的立方体BoxGeometry

  2. 使用法向量材质MeshNormalMaterial

  3. 基于几何形状和材质创建立方体

  4. 添加到场景中

    效果

image.png
:::warning
🤔 思考
为什么感觉是一个二维的正方形?
:::

5) 添加动画

为了方便观察三维效果, 我们可以使用两种方式

  • 物体不变, 相机围绕物体旋转, 从不同的位置观察
  • 相机不变, 物体旋转

这里, 为了便于大家理解, 我们先固定相机, 通过动画旋转物体演示

function animation() {
  // 改变角度
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 重新渲染
  renderer.render(scene, camera);

  // 下一帧渲染回调
  requestAnimationFrame(animation);
}

animation();

6) 渲染优化

上述我们会看到明显的锯齿, 显示也不够清晰, 这里我们通过设置两个参数, 改善渲染效果

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

上述代码

  1. 通过设置渲染器的antialias属性为true, 开启抗锯齿
  2. 设置DPI, 使用更多的像素点来描述同一个物体

image.png

完整示例

// 导入threejs
import * as THREE from "three";

// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000,
);

camera.position.z = 5;

// 5. 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 4. 渲染
function animation() {
  // 改变角度
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 重新渲染
  renderer.render(scene, camera);

  // 下一帧渲染回调
  requestAnimationFrame(animation);
}

animation();

四. 开发辅助

物体的位置, 大小, 动画都离不开坐标系.
我们先了解坐标系对我们理解threejs的3D世界是非常有帮助的

1 显示坐标系

threejs采用的是右手坐标系

  • x轴水平方向: 向右为正
  • y轴垂直方向: 向上为正
  • z轴内外方向(垂直于xy平面): 向外为正

image.png

// 6. 显示坐标轴(x轴: 红色; y轴: 绿色; z轴: 蓝色 rgb)
// x轴水平方向(右正); y轴垂直方向(上正); z轴垂直xy平面即屏幕(外正)
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

完整示例

// 导入threejs
import * as THREE from "three";

// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000,
);

camera.position.z = 100;

// 5. 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);

// 6. 显示坐标轴(x轴: 红色; y轴: 绿色; z轴: 蓝色 rgb)
// x轴水平方向(右正); y轴垂直方向(上正); z轴垂直xy平面即屏幕(外正)
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 4. 渲染
renderer.render(scene, camera);
  1. 将相机的z坐标设置为100, 在远处观察
  2. 通过坐标辅助对象AxesHelper显示三维坐标系
    1. 10表示显示的坐标的长度为10个单位(立方体的宽高为1个单位)
  3. 将坐标辅助对象添加到场景中

但是我们并没有看到z轴
这是因为我们相机就位于z轴上在观察, 相当于顶视图
image.pngimage.png
为了方便调试与观察.
我们可以使用OrbitControls(轨道控制器)控制相机的位置

2 轨道控制器

轨道控制器可以改变相机在空间坐标系中的位置
进而方便从不同的角度观察物体

  1. 轨道控制器响应鼠标事件(按住左键旋转, 滚轮缩放, 按住右键平移)
  2. 调整相机在空间坐标系中的位置(坐标值)
  3. 改变坐标后, 重新渲染
    :::info
    相对运动
    这里有两套坐标系统
  • 3D世界的坐标系, 由红绿蓝三色线表示
  • 相机观察的坐标系

由于人眼的位置是固定不变的, 相当于站在相机的角度看3D世界
相机不变, 3D世界做相对运动
:::

效果

轨道控制器.gif

1) 导入组件

OrbitControls是一个附加组件, 在使用之前需要先导入

// 导入轨道控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

2) 创建控制器

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
  • 相机对象
  • 渲染dom

3) 动态渲染

// 4. 动态渲染
function animation() {
  controls.update();
  renderer.render(scene, camera);

  requestAnimationFrame(animation);
}
animation();

完整示例

// 导入threejs
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000,
);

camera.position.z = 50;

// 5. 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);

// 6. 显示坐标轴(x轴: 红色; y轴: 绿色; z轴: 蓝色 rgb)
// x轴水平方向(右正); y轴垂直方向(上正); z轴垂直xy平面即屏幕(外正)
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 7. 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 4. 动态渲染
function animation() {
  controls.update();
  renderer.render(scene, camera);

  requestAnimationFrame(animation);
}
animation();

3 自适应画布

当浏览器的显示窗口改变时, 会引起尺寸改变(innerWidth/innerHeight).
此时, 需要调整相机的宽高比和渲染器的成像大小

// 监听window的resize事件, 在回调中重绘canvas
window.addEventListener("resize", () => {
  // 设置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  // 设置渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
});

五. 基础变换

接下来, 我们通过三种基础的变换来加深对3D坐标系中坐标和单位的理解, 同时也是动画的基础. 分别是

  • 移动

  • 缩放

  • 旋转

    效果

坐标demo.gif

1 网络辅助工具

为了更好的理解坐标和单位, 我们引入网格辅助工具(GridHelper)
image.png

// 5. 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
const cubeMaterial = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// 创建网格辅助工具
const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff);
// 为了更方便观察, 设置opacity透明度
gridHelper.material.transparent = true;
gridHelper.material.opacity = 0.5;

// 添加到场景中
scene.add(gridHelper);
  1. 为了方便观察, 我们把立方体的大小改成了(2,2,2). 这种x轴的范围为(-1, 1)
  2. 创建网格辅助工具, 并添加到场景中
    1. 第一个参数(size): 网格的总宽高, 设置为20, 对应x轴的坐标范围为(-10, 10), 默认值为10
    2. 第二个参数(divisions): 网格分成多少份, 设置为20, 每份就是1个单位, 默认值为10
    3. 第三个参数(colorCenterLine): 中线的颜色, 默认值为0x444444
    4. 第四个参数(colorGrid): 网络线的颜色, 默认值为0x888888

2 移动

通过改变物体的position属性, 控制物体的移动

// 通过设置三维向量的属性控制移动
cube.position.x = 2;
cube.position.y = 2;
cube.position.z = 2;
// 通过调用三维向量的方法控制移动
cube.position.set(3, 3, 3);
// 添加到场景
scene.add(cube);

通过设置cube的position(三维向量)对象的x, y, z的值来控制立方体分别沿x, y, z轴移动

3 缩放

通过改变物体的scale属性, 控制物体的缩放

// 通过设置三维向量的属性控制缩放比例
cube.scale.x = 1;
cube.scale.y = 2;
cube.scale.z = 3;
// 通过调用三维向量的方法控制缩放
cube.scale.set(3, 3, 3);

4 旋转

通过改变物体的rotation属性, 控制物体的旋转.
这里需要注意的是: 旋转的单位是弧度, 不是角度
:::info
换算公式
π弧度 = 180度

  • 弧度=角度×(π ÷ 180)
  • 角度=弧度×(180 ÷ π)

常用弧度
π/2弧度 = 90度
π/3弧度 = 60度
π/4弧度 = 45度
π/6弧度 = 30度
:::
按照右手法则, 大拇指指向x轴, 四指方向为正方向, 即从x轴方向观察, 逆时间旋转

// 通过设置三维向量的属性控制旋转
cube.rotation.x = Math.PI / 4;
// 通过三维向量的方法控制旋转
cube.rotation.set(Math.PI / 4, 0, 0);

5 集成Gui工具

我们发现, 如果每次通过修改代码的方式修改属性值效率太低
这里我们可以集成一种Gui工具, 通过UI交互界面来修改方便很多
dat.gui的npm链接

1) 安装

npm i dat.gui

2) 基本使用

// 导入dat
import * as dat from "dat.gui";
// 初始化
const gui = new dat.GUI();
gui.add(cube.position, "x").min(-10).max(10).step(1);

这里我们可以做一个分组

// 5. 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
const cubeMaterial = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

const gui = new dat.GUI();
const guiPosition = gui.addFolder("移动");
guiPosition.add(cube.position, "x").min(-10).max(10).step(1);
guiPosition.add(cube.position, "y").min(-10).max(10).step(1);
guiPosition.add(cube.position, "z").min(-10).max(10).step(1);

const guiScale = gui.addFolder("缩放");
guiScale.add(cube.scale, "x").min(1).max(10).step(1);
guiScale.add(cube.scale, "y").min(1).max(10).step(1);
guiScale.add(cube.scale, "z").min(1).max(10).step(1);

const guiRotation = gui.addFolder("旋转");
guiRotation.add(cube.rotation, "x").min(-Math.PI).max(Math.PI).step(0.01);
guiRotation.add(cube.rotation, "y").min(-Math.PI).max(Math.PI).step(0.01);
guiRotation.add(cube.rotation, "z").min(-Math.PI).max(Math.PI).step(0.01);

完整示例

// 导入threejs
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// 导入Gui工具
import * as dat from "dat.gui";

// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000,
);

camera.position.set(20, 20, 20);

// 5. 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
const cubeMaterial = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

const gui = new dat.GUI();
const guiPosition = gui.addFolder("移动");
guiPosition.add(cube.position, "x").min(-10).max(10).step(1);
guiPosition.add(cube.position, "y").min(-10).max(10).step(1);
guiPosition.add(cube.position, "z").min(-10).max(10).step(1);

const guiScale = gui.addFolder("缩放");
guiScale.add(cube.scale, "x").min(1).max(10).step(1);
guiScale.add(cube.scale, "y").min(1).max(10).step(1);
guiScale.add(cube.scale, "z").min(1).max(10).step(1);

const guiRotation = gui.addFolder("旋转");
guiRotation.add(cube.rotation, "x").min(-Math.PI).max(Math.PI).step(0.01);
guiRotation.add(cube.rotation, "y").min(-Math.PI).max(Math.PI).step(0.01);
guiRotation.add(cube.rotation, "z").min(-Math.PI).max(Math.PI).step(0.01);
// 添加到场景
scene.add(cube);

// 6. 坐标轴辅助工具(x轴: 红色; y轴: 绿色; z轴: 蓝色 rgb)
// x轴水平方向(右正); y轴垂直方向(上正); z轴垂直xy平面即屏幕(外正)
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建网络辅助工具
const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff);
gridHelper.material.transparent = true;
gridHelper.material.opacity = 0.5;

scene.add(gridHelper);

const controls = new OrbitControls(camera, renderer.domElement);
// 4. 渲染
function animation() {
  renderer.render(scene, camera);
  requestAnimationFrame(animation);
}
animation();

// 监听window的resize事件, 在回调中重绘canvas
window.addEventListener("resize", () => {
  // 设置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  // 设置渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
});

六. 项目规划

一个three.js的项目由这么几个部分组成

  • 场景
  • 物体
  • 灯光
  • 相机
  • 渲染器
  • 工具

这里我们可以对项目目录结构进行拆分, 分为

  • scene: 场景
  • mesh: 网格(物体)
  • light: 灯光
  • camera: 相机
  • renderer: 渲染器
  • utils: 工具

1 封装场景

创建src/scene/index.js

import * as THREE from "three";

const scene = new THREE.Scene();

export default scene;

2 封装相机

创建src/camera/index.js

import * as THREE from "three";

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);

camera.position.set(0, 0, 10);

export default camera;

3 封装渲染器

创建src/renderer/index.js

import * as THREE from "three";

function isFunction(val) {
  return typeof val === "function";
}

class Renderer extends THREE.WebGLRenderer {
  constructor(scene, camera) {
    super({ antialias: true });
    this.scene = scene;
    this.camera = camera;
    this.init();
  }
  init() {
    this.setPixelRatio(window.devicePixelRatio);
    this.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(this.domElement);

    // 默认渲染
    this.render(this.scene, this.camera);
  }
  animation(cb) {
    if (!isFunction(cb)) {
      console.error("param must be a function");
      return;
    }

    this.setAnimationLoop(cb);
  }
}

export default Renderer;

4 封装物体

创建src/mesh/index.js

import * as THREE from "three";

const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
const cubeMaterial = new THREE.MeshNormalMaterial();

const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

export default cube;

5 封装工具集

创建src/untils/index.js

import * as THREE from "three";

import { OrbitControls } from "three/addons/controls/OrbitControls";

export default class Utils {
  constructor(options = {}) {
    this.scene = options.scene;
    this.camera = options.camera;
    this.renderer = options.renderer;

    if (!this.scene || !this.camera || !this.renderer) {
      console.error("scene, camera, renderer can not be null");
      return;
    }
    this.init(options);
  }
  init(options) {
    this.initOrbitControls(options.orbitControl);
    this.initAxesHelper(options.axesHelper);
    this.initGridHelper(options.gridHelper);
  }
  // 默认开启轨道控制器， 只有当传入的orbitControl===false时关闭
  initOrbitControls(value) {
    if (value === false) {
      console.log("orbitControl disabled");
      return;
    }

    new OrbitControls(this.camera, this.renderer.domElement);
  }
  // 默认开启坐标轴辅助工具， 只有当传入的axesHelper===false时关闭
  initAxesHelper(value) {
    if (value === false) {
      console.log("axesHelper disabled");
      return;
    }

    const init = {
      size: 10,
    };
    const params = Object.assign(init, value);

    const axesHelper = new THREE.AxesHelper(params.size);
    this.scene.add(axesHelper);
  }
  // 默认开启网格辅助工具， 只有当传入的gridHelper===false时关闭
  initGridHelper(value) {
    if (value === false) {
      console.log("gridHelper disabled");
      return;
    }
    const init = {
      size: 20,
      divisions: 20,
      color1: 0xffffff,
      color2: 0xffffff,
    };
    const params = Object.assign(init, value);

    const gridHelper = new THREE.GridHelper(...Object.values(params));
    gridHelper.material.transparent = true;
    gridHelper.material.opacity = 0.5;

    this.scene.add(gridHelper);
  }
}

6 导入使用

在main.js中导入

import scene from "./scene";
import camera from "./camera";
import mesh from "./mesh";
import Renderer from "./renderer";
import Utils from "./utils";

scene.add(mesh);

const renderer = new Renderer(scene, camera);

renderer.animation(() => {
  renderer.render(scene, camera);
});

new Utils({
  scene,
  camera,
  renderer,
});
凉菜凉凉
关注
threejs点击模型实现模型边缘高亮的选中效果--更改后提
2301_78234743的博客
08-09 93
之前的经验都不适用了。考察知识点：数组题目分析：由于可以根据k值判断数组中数的范围(0 ~ k - 1)，可以使用计数的方法，先遍历一遍数组，将每个数出现的次数记录下来，然后按照从小。题干要求计算素因子的和，n个数，每个数都可能有若干个素因子，选择当前数的素因子相当于一次分叉，那么选择过程形成一个多叉树，最后一个数的素因子选择后，相当于到达多。牛牛们，有没有好用的加速器啊，github老上不去 #我的实习求职记录# #正在实习的碎碎念# #我的实习求职记录# #我的实习日记# #晒一晒我的offer#
支持javascript的ppt软件_javascript制作幻灯片
weixin_39966225的博客
12-30 497
分享10篇优秀的 jQuery 幻灯片制作教程及应用案例jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果。幻灯片效果是常用的内容展示方式之一，这是一种在有限的网页空间内展示系列项目时非常好的方法。今天要给大家分享的是10篇非常棒的 jQuery 幻灯片...文章秋天风景2011-04-15706浏览量...
前端免费高清电子书(史上最全)
雪域蓝天的专栏
04-29 5637
简介 平时自己收藏和整理的前端系列免费高清电子书（大概有100多本），点击下面对应链接即可下载，无需密码；电子书种类全面，如下图所示。 小编自己也喜欢看书，平时也会收集一些电子书先翻一翻，如果看得还ok的话，就买实体书 注：转载请注明出处，谢谢配合 Html+css系列 零基础学HTML+CSS [第三版].pdf HTML5移动Web开发指南.pdf...
深度学习如何入门？
热门推荐
GarfieldEr007的专栏
05-25 1万+
beanfrog ，computer vision 161 人赞同 先了解个大概 A Deep Learning Tutorial: From Perceptrons to Algorithms 神经网络肯定是要学习的，主要是BP算法，可以看看PRML3、4、5三章，可先忽略其中的贝叶斯视角的解释。一些主要的算法理解要看具体的论文了，有个Matlab的程序不错，有基本算法的实
10 分钟快速入门 Python3
黑技的博客
06-03 105
附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全： 书单导航页（点击右侧 极客侠栈 即可打开个人博客）：极客侠栈 ①【Java】学习之路吐血整理技术书从入门到进阶最全50+本（珍藏版) ②【算法数据结构+acm】从入门到进阶吐血整理书单50+本（珍藏版) ③【数据库】从入门到进阶必读18本技术书籍网盘吐血整理网盘(珍藏版) ④【Web前端】从HT...
GSAP学习笔记
firewrk的博客
10-16 2143
easing可能是动画中最重要的设计之一，一个好的easing可能会给动画带来更个性更有趣的感觉看下面的例子，尤其是这个bounce});});ease底层是数学计算，但是我们可以依靠gsap提供的可视化工具去调整挑选合适的ease只有需要自定义stagger逻辑时才使用函数的方式定义staggery: 100,},});这个函数会在数组中的每个目标元素中调用一次，并且返回起始位置到该元素的总延迟（不是上一个元素的开始延迟），可以用下面三个给予的参数来进行所需的计算index 数组中的索引值。
2020-web前端-JavaScript基础笔记
itwangyang520的博客
10-08 621
====================================================================================================================================================== ==================================================================== JavaScript =========================
JAVA正则表达的必读篇
北落師門b的专栏
07-10 682
在Sun的Java JDK 1.40版本中，Java自带了支持正则表达式的包，本文就抛砖引玉地介绍了如何使用java.util.regex包。 　　可粗略估计一下，除了偶尔用Linux的外，其他Linu x用户都会遇到正则表达式。正则表达式是个极端强大工具，而且在字符串模式-匹配和字符串模式-替换方面富有弹性。在Unix世界里，正则表达式几乎没有什么限制，可肯定的是，它应用非常之广泛。
Python爬虫入门和一个轻量级实例
the_GUA的博客
11-06 443
目录爬虫简介简单的爬虫架构架构中的三大模块url管理器网页下载器网页解析器Beautifulsorp实例测试轻量级实例 爬虫简介 爬虫简介：一段自动抓取互联网信息的程序 取代人工从浏览器访问，从一个url出发，访问所有的url，并从中获取有价值的数据 爬虫有什么用？ 举个栗子：我可以把网上各个网站最漂亮的美女图片爬取出来，然后做一个最漂亮最全面的美女图片网 简单的爬虫架构 爬虫包含...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 856
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 491
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 447
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 875
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1302
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 363
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 258
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 207
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 600
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值