threeJs学习笔记（一）

最新推荐文章于 2024-05-23 20:56:45 发布
最新推荐文章于 2024-05-23 20:56:45 发布
阅读量188 收藏
点赞数
文章标签： 学习 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72270036/article/details/134220712
版权

官网：Three.js – JavaScript 3D Library

1.threeJs三要素

1.场 景：放置物体的容器

import * as THREE from 'three'

let scene = new THREE.Scene()

2.摄像机：类似人眼，可调位置，角度等信息，展示不同画面

// 参数1：垂直角度（建议 75），视野范围
// 参数2：宽高比（建议与画布相同宽高），物体绘制比例
// 参数3：近截面距离摄像机距离
// 参数4：远截面距离摄像机距离
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

摄像机 4 个参数讲解：

  1. 角度：视野垂直范围，越大看到越多，物体越小

  2. 宽高比：影响图形拉伸/压缩，摄像机宽高比 = 画布宽高比（标准图形）

  3. 近截面：近边界

  4. 远截面：远边界

3.渲染器：接收场景和摄像机，计算在浏览器上渲染的最终 2D 画面

//创建渲染器
let renderer = new THREE.WebGLRenderer()

例如(以下代码俊以vue3为例)：

下包：npm  i  three

<template>
  <div id="threeID">

  </div>
</template>

<script setup>
// 1. 引入 three 库
import * as THREE from 'three'
// 创建场景，摄像机，渲染器
let scene, camera, renderer

function init() {
  // 2. 创建场景对象
  scene = new THREE.Scene()
  // 3. 创建摄像机对象
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  // 4. 创建渲染器，并设置画布大小，添加到 DOM 显示
  renderer = new THREE.WebGLRenderer()
  // 设置画布大小
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 把画布 canvas 标签添加到id为threeID上
  document.querySelector('#threeID').append(renderer.domElement)
  // 传入场景和摄像机，渲染画面
  renderer.render(scene, camera)
}

onMounted(() => {
  init()
})
</script>

<style  scoped></style>

 2.three.js立方体

1. 创建图形，宽高深为 1 单位（立方缓冲几何体）

const geometry = new THREE.BoxGeometry(1, 1, 1);

2. 创建材质，颜色为绿色 0x00ff00 （网格基础材质-线面纯颜色描绘表面） 

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

3. 创建网格物体对象，传入图形和材质（网格物体对象）

const cube = new THREE.Mesh(geometry, material);

4. 把创建的物体加入到场景中 

scene.add(cube);

整个代码：

function createCube() {
  // 1. 创建图形，宽高深为 1 单位（立方缓冲几何体）
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  // 2. 创建材质，颜色为绿色 0x00ff00 （网格基础材质-线面纯颜色描绘表面）
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  // 3. 创建网格物体对象，传入图形和材质（网格物体对象）
  const cube = new THREE.Mesh(geometry, material);
  // 4. 把物体加入到场景中
  scene.add(cube);
}

onMounted(() => {
  init()
  createCube()
  renderer.render(scene, camera)
})

移动摄像机向z轴5个单位(默认摄像机和物体在原点)

 camera.position.z = 5

更多材质和几何体需要查询官方文档

 3.three.js轨道控制器

目的：使摄像机围绕目标进行轨道运动，可以右键拖动，左键旋转，滚轮拉进，拉远摄像机。

 1.单独引入 OrbitControls 轨道控制器构造函数

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

2.创建轨道控制器

let controls
controls = new OrbitControls( camera, renderer.domElement )

 3.在渲染循环中更新场景渲染

function renderLoop() {
//在渲染循环中更新场景渲染
renderer.render(scene, camera)

// 手动 JS 代码更新过摄像机信息，必须调用轨道控制器 update 方法
controls.update()

// 根据当前计算机浏览器刷新帧率（默认 60 次/秒），不断递归调用此函数渲染最新的画面状态
// 好处：当前页面切换到后台，暂停递归
requestAnimationFrame(renderLoop)
}

renderLoop()

4.three.js坐标轴

目的：一个 x，y，z 方向的坐标轴辅助对象 ，帮我们理解物体在世界坐标系中位移，缩放，渲染等效果，可以辅助我们开发和调试。

function createHelper() {
  // 1. 创建坐标轴对象，设置长度
  const axesHelper = new THREE.AxesHelper(5)
  // 2. 添加到场景中
  scene.add(axesHelper)
}

createHelper()

5.three.js轨道控制器-控制效果

目的：调整轨道控制器属性，影响摄像机细节

阻尼效果(带有缓冲效果)：new OrbitControls(camera, renderer.domElement).enableDamping = true

开启自动旋转轨道控制器效果:new OrbitControls(camera, renderer.domElement).autoRotate = true

function controlsCreate() {
  //  创建轨道控制器
  controls = new OrbitControls(camera, renderer.domElement)
  // 1. 阻尼效果
  controls.enableDamping = true
  // 2. 开启自动旋转轨道控制器效果->带动摄像机一起旋转（摄像机顺时针水平旋转）
  // controls.autoRotate = true
  // 3. 垂直角度范围控制（0 上面，Math.PI 下面）
  controls.maxPolarAngle = Math.PI
  controls.minPolarAngle = 0
  // 水平角度范围控制
  controls.maxAzimuthAngle = 1.5 * Math.PI
  controls.minAzimuthAngle = 0.5 * Math.PI
  // 4. 摄像机移动范围控制
  controls.minDistance = 2
  controls.maxDistance = 10
}

更多属性查看官方文档：

6. 优化-适配场景大小

目的：浏览器窗口，尺寸改变时，画布自适应

1.创建适配函数，监听浏览器 resize 事件

2.调整渲染器画布宽高，摄像机宽高比和更新视椎体空间

function createHelper() {
  // 1. 创建坐标轴对象，设置长度
  const axesHelper = new THREE.AxesHelper(5)
  // 2. 添加到场景中
  scene.add(axesHelper)
}
renderResize()

7.three.js移动立方体

目的：移动目标立方体，查看效果和 three.js 组织对象的类关系

1.位移 position 属性

2.旋转 rotation 属性

3.缩放 scale 属性

function moveCube() {
  // 1. 位移 position 属性（Vector3 三维向量对象）
  cube.position.x = 5
  // cube.position.set(5, 5, 0)
  // 2. 旋转 rotation 属性（Euler 欧拉角弧度制角度对象）
   在轴的正方向看是逆时针旋转
  // cube.rotation.x = Math.PI / 4
  // 3. 缩放 scale 属性（Vector3 三维向量对象，中心原点不动，向 2 边拉伸/缩小）
   cube.scale.z = 2
}
moveCube()

8.three.js 使用 GUI 工具

目的：借助 GUI 工具实时辅助调试 3D 物体

安装：npm i dat.gui

引入：import * as dat from 'dat.gui'

使用：

1. 创建 GUI 对象

  const gui = new dat.GUI()

2.添加具体控制器使用

gui.add(参数1,参数2)

参数1：关联 DOM 对象，JS 对象，3D 物体对象

参数2：对象其中的某个属性，给这个属性关联用户界面工具（从而快速调整它的值）

3.控制立方体颜色

gui.addColol()

4.创建分组-影响立方体位置

 gui.addFolder()

插件文档：https://github.com/dataarts/dat.gui/blob/master/API.md 

function createGUI() {
  const gui = new dat.GUI()
  gui.add(document, 'title')

  // 1 控制立方体显示/隐藏（布尔->多选框）
  gui.add(cube, 'visible')
  // 2 轨道控制器回归初始角度（函数->按钮）
  gui.add(controls, 'reset')
  // 3 控制立方体颜色（找属性方式：文档->打印->百度）
  // 效果：立方体默认颜色和文字 <=> 显示在工具标签上
  const colorObj = {
    'col': `#${cube.material.color.getHexString()}`
  }
  gui.addColor(colorObj, 'col').onChange(val => {
    // val: #ff00ff 十六进制的颜色字符串
    cube.material.color = new THREE.Color(val)
  })
  // 4 创建分组-影响立方体位置
  const folder = gui.addFolder('位移')
  // 参数3：最小值范围，参数4：最大值范围，参数5：步长 （数字->进度条）
  folder.add(cube.position, 'x', 0, 5, 0.1)
  folder.add(cube.position, 'y', 0, 5, 0.1)
  folder.add(cube.position, 'z', 0, 5, 0.1)
  // 5 下拉菜单(关键：第三个参数为对象时->下拉菜单)
  // 对象中属性名->下拉菜单选项名
  // 初始值匹配后会影响下拉菜单默认选中哪一项
  gui.add({ type: '1' }, 'type', { '方案1': '1', '方案2': '2', '方案3': '3' }).onChange(val => {
    // val 方案对象的 '1','2'
    switch (val) {
      //方案1
      case '1':
        cube.position.set(0, 0, 0)
        break;
      //方案2
      case '2':
        cube.position.set(2, 2, 2)
        break;
      //方案3
      case '3':
        cube.position.set(2, 0, 0)
        break;
    }
  })

}
createGUI()

整个代码：

<template>
  <div id="threeID">

  </div>
</template>

<script setup>
//  引入 three 库
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
//引入dat.gui 库
import * as dat from 'dat.gui'
// 创建场景，摄像机，渲染器
let scene, camera, renderer
// 创建轨道控制器
let controls
//创建立方体
let cube

/**
 * 创建基础场景
 */
function init() {
  // 1. 创建场景对象
  scene = new THREE.Scene()
  // 2. 创建摄像机对象
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  //移动摄像机向z轴5个单位(默认摄像机和物体在原点)
  camera.position.z = 5
  // 3. 创建渲染器，并设置画布大小，添加到 DOM 显示
  renderer = new THREE.WebGLRenderer()
  // 设置画布大小
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 把画布 canvas 标签添加到id为threeID上
  document.querySelector('#threeID').append(renderer.domElement)
}

/**
 * 创建立方体
 */
function createCube() {
  // 1. 创建图形，宽高深为 1 单位（立方缓冲几何体）
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  // 2. 创建材质，颜色为绿色 0x00ff00 （网格基础材质-线面纯颜色描绘表面）
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  // 3. 创建网格物体对象，传入图形和材质（网格物体对象）
  cube = new THREE.Mesh(geometry, material);
  // 4. 把物体加入到场景中
  scene.add(cube);
}

/**
 * 轨道控制器
 */
function controlsCreate() {
  //  创建轨道控制器
  controls = new OrbitControls(camera, renderer.domElement)
  // 1. 阻尼效果
  controls.enableDamping = true
  // 2. 开启自动旋转轨道控制器效果->带动摄像机一起旋转（摄像机顺时针水平旋转）
  // controls.autoRotate = true
  // 3. 垂直角度范围控制（0 上面，Math.PI 下面）
  // controls.maxPolarAngle = Math.PI
  // controls.minPolarAngle = 0
  // 水平角度范围控制
  // controls.maxAzimuthAngle = 1.5 * Math.PI
  // controls.minAzimuthAngle = 0.5 * Math.PI
  // 4. 摄像机移动范围控制
  // controls.minDistance = 2
  // controls.maxDistance = 10
}

function renderLoop() {
  //  在渲染循环中更新场景渲染
  renderer.render(scene, camera)
  // 手动 JS 代码更新过摄像机信息，必须调用轨道控制器 update 方法
  controls.update()
  // 根据当前计算机浏览器刷新帧率（默认 60 次/秒），不断递归调用此函数渲染最新的画面状态
  // 好处：当前页面切换到后台，暂停递归
  requestAnimationFrame(renderLoop)
}


/**
 * 坐标轴
 */
function createHelper() {
  // 1. 创建坐标轴对象，设置长度
  const axesHelper = new THREE.AxesHelper(5)
  // 2. 添加到场景中
  scene.add(axesHelper)
}

/**
 * 适配场景大小
 */
function renderResize() {
  // 1. 创建适配函数，监听浏览器 resize 事件
  window.addEventListener('resize', () => {
    // 2. 调整渲染器画布大小，摄像机宽高比和更新视椎体空间
    renderer.setSize(window.innerWidth, window.innerHeight)
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
  })
}

/**
 * 移动立方体
 */
function moveCube() {
  // 1. 位移 position 属性（Vector3 三维向量对象）
  cube.position.x = 5
  // cube.position.set(5, 5, 0)
  // 2. 旋转 rotation 属性（Euler 欧拉角弧度制角度对象）
  // 在轴的正方向看是逆时针旋转
  // cube.rotation.x = Math.PI / 4
  // 3. 缩放 scale 属性（Vector3 三维向量对象，中心原点不动，向 2 边拉伸/缩小）
  // cube.scale.z = 2
}

/**
 * 使用GUI工具
 */
function createGUI() {
  const gui = new dat.GUI()
  gui.add(document, 'title')

  // 1 控制立方体显示/隐藏（布尔->多选框）
  gui.add(cube, 'visible')
  // 2 轨道控制器回归初始角度（函数->按钮）
  gui.add(controls, 'reset')
  // 3 控制立方体颜色（找属性方式：文档->打印->百度）
  // 效果：立方体默认颜色和文字 <=> 显示在工具标签上
  const colorObj = {
    'col': `#${cube.material.color.getHexString()}`
  }
  gui.addColor(colorObj, 'col').onChange(val => {
    // val: #ff00ff 十六进制的颜色字符串
    cube.material.color = new THREE.Color(val)
  })
  // 4 创建分组-影响立方体位置
  const folder = gui.addFolder('位移')
  // 参数3：最小值范围，参数4：最大值范围，参数5：步长 （数字->进度条）
  folder.add(cube.position, 'x', 0, 5, 0.1)
  folder.add(cube.position, 'y', 0, 5, 0.1)
  folder.add(cube.position, 'z', 0, 5, 0.1)
  // 5 下拉菜单(关键：第三个参数为对象时->下拉菜单)
  // 对象中属性名->下拉菜单选项名
  // 初始值匹配后会影响下拉菜单默认选中哪一项
  gui.add({ type: '1' }, 'type', { '方案1': '1', '方案2': '2', '方案3': '3' }).onChange(val => {
    // val 方案对象的 '1','2'
    switch (val) {
      //方案1
      case '1':
        cube.position.set(0, 0, 0)
        break;
      //方案2
      case '2':
        cube.position.set(2, 2, 2)
        break;
      //方案3
      case '3':
        cube.position.set(2, 0, 0)
        break;
    }
  })

}


onMounted(() => {
  init() //初始化
  createCube()//创建立方体
  controlsCreate()//轨道控制器
  renderLoop()//循环渲染轨道控制器
  createHelper()//坐标轴
  renderResize()//适配场景大小
  moveCube()//移动立方体
  createGUI()//使用GUI工具
  renderer.render(scene, camera)
})
</script>

<style  scoped></style>

 

小方很无聊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
WebGL学习教程之Three.js学习笔记(第一篇)
10-17
Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧
ThreeJS学习笔记一：场景、相机、渲染器、光源
to_the_Future的博客
10-12 842
在three中，场景、相机、渲染器是最核心的三个概念。我们通过相机拍摄场景，再通过渲染器把场景呈现在视图中。本文主要记录了threeJS中场景、相机、渲染器、光源的基本概念，以及实现了一个简单的3D场景。下次再见。
threejs学习笔记（仅供学习参考）
c_qianxia5040的博客
01-13 1758
更多案例 http://www.yanhuangxueyuan.com/3D.html 物联网粮仓3D可视化案例：http://www.yanhuangxueyuan.com/3D/liangcang/index.html 沙发在线预览： http://app.xuanke3d.com/apps/trayton/#/show 服装在线预览： http://suit.xuantech.cn/ 洗衣机在线交互预览：https://cdn.weshape3d.com/hir001/1021/web/index.
Threejs学习笔记
qq_45265059的博客
08-04 2676
Three.js Three.js 学习笔记，来自： https://gitchat.csdn.net/columnTopic/5b320731bebc3c4bd7e725cb?utm_source=juhe https://blog.csdn.net/qq_30100043/article/category/7003591?utm_source=juhe https://zhuanlan.zhihu.com/p/95463367 前面 什么是 WebGL？ WebGL（Web 图形库）是一种 Ja
three.js学习笔记
Z_Gleng的博客
10-22 846
three.js学习笔记
一、threejs 学习笔记-基础入门
weixin_60645637的博客
07-01 219
npm命令下载// .position 设置相机位置// .lookAt 设置观察目标位置参数含义默认值fov相机视锥体竖直方向视野角度50aspect相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height1near相机视锥体近裁截面相对相机距离0.1far相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向2000。
three学习笔记.docx
10-21
Three.js（https://github.com/mrdoob/three.js）是一个JavaScript 3D库，封装了底层的WebGL图形接口，提供简化、高效的三维图形程序开发。使用Three.js可以使你在不了解图形学知识的前提下，快速方便地开发三维图形...
WebGL three.js学习笔记之阴影与实现物体的动画效果
01-21
实现物体的旋转、跳动以及场景阴影的开启与优化 本程序将创建一个场景，并实现物体的动画效果 ...Three.js</title> [removed][removed] [removed][removed] <script src=../../../Import/Setting
#资源达人分享计划#threejs学习Demo笔记.rar
08-06
#资源达人分享计划#threejs线条以及动画效果源码示例，部分效果需要在服务器下打开
引用实战学习
qiuzhiuser的博客
05-19 141
【代码】引用实战学习。
在学习uni-app过程中使用的css样式记录
qq_34080064的博客
05-20 873
​在学习uni-app过程中，记录下使用的css样式，持续更新。
JVM学习-执行引擎
丢爸
05-21 821
当然是否需要启动JIT编译器将字节码直接编译为对应平台的本地机器指令，则需要根据代码被调用。大部分的程序代码转换为物理机的目标代码或虚拟机能执行的指令集之前，都需要经过下图各个步骤。，将其直接编译为对应平台的本地机器指令，以此提升Java程序的执行性能。”，JIT编译器在运行时会针对那些频繁被调用的热点代码做出。Java代码编译是由Java源码编译器来完成，流程图如下。而定，关于那些需要被编译为本地代码的字节码，称为“Java字节码的执行是由JVM执行引擎来完成。
llama-factory学习个人记录
qq_55736201的博客
05-22 965
1.llama-factory部署在LLaMA-Factory项目中，单显卡可以用命令或训练，多显卡只能用用命令的方式。
C++函数指针，键值对集合的学习
最新发布
ai大力的小杰
05-23 431
这段代码使用了来存储作为键（key），而对应的值（value）是一个类型的函数指针。这个结构使得根据字符串键来动态调用不同的函数成为可能。下面，我将详细解释代码中的每个关键部分。这是一个基于哈希表的关联容器，它允许快速的键值对查找。键（key）是唯一的，并且每个键都映射到一个值。在这个例子中，键是类型，而值是一个函数指针，封装在中。是一个函数包装器，它可以存储、调用或引用任何可调用的目标——函数、Lambda 表达式、函数指针、或其他函数对象。这里，它被用来存储接受三个参数的函数：一个，一个。
qmt量化交易策略小白学习笔记第10期【qmt编程之获取股票订单流数据--内置Python】
fanglue3705的博客
05-23 257
获取股票订单流数据 获取股票在某个价位的订单数量 提示 1.该数据通过get_market_data和get_market_data_ex接口获取，period参数选择orderflow1m或者orderflow1d 2.获取历史数据前需要先用download_history_data下载历史数据，订单流数据仅提供orderflow1m周期数据下载，其他周期的订单流数据都是通过1m周期合成的 3.订单流版 权限数据 #内置python 原型 python
Java入门基础学习笔记41——实体类
CCH2024的专栏
05-19 130
Java入门基础学习笔记
【PHP小课堂】学习了解PHP中Memcached扩展的使用
硬核项目经理
05-20 844
学习了解PHP中Memcached扩展的使用说实话，在目前的开发环境中，使用 Memcache 的项目还真的不多。在 Redis 大行其道的今天，Memcache 的衰退也可以说是大势所趋。不过，可能很多刚开始学习 PHP 的新同学不知道，当年在 LAMP 时代，除了这四个字母所代表的这些服务端软件之外，缓存上最出名的就是这个 Memcache ，它和 PHP 搭配的历史也非常的长。因此，今天我们...
大模型提示词Prompt学习
石头记
05-21 965
关于chatGPT的Prompt Engineer，大家肯定耳朵都听起茧了。但是它的来由？，怎么能用好？很多人可能并不觉得并不是一个问题，或者说认定是一个很快会过时的概念。但其实也不能说得非常清楚（因为觉得没必要深究）。但我觉得，它毕竟存在过，火过，我们还是必须对它有更深入的理解，所以，我花时间认真了解了一下。
【Go语言入门学习笔记】Part3.指针和运算符、以及基本输入
FellAveal的博客
05-21 253
仍然好多和C语言类似，计算机的学生应该是很容易入门这一环节，我还在最后的输入中看到了一些些Java输入的影子，而自动的变量类型推断更是有Python那个味道，正可谓几百家之所长了。
node.js学习笔记
04-28
以下是学习Node.js的一些笔记： 1. 安装Node.js：首先需要安装Node.js，可以去官网下载对应的安装包，安装过程中需要注意选择合适的安装路径和配置环境变量。 2. Node.js的基本语法：学习Node.js的第一步是了解它...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值