threejs的初步认识和学习记录

已于 2023-04-10 21:03:59 修改
阅读量598 收藏
点赞数
分类专栏： 3d 文章标签： 学习 前端 javascript
于 2022-08-14 23:34:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li_dengke/article/details/126337349
版权

文章目录

THREE 学习记录

这里项目搭建的打包工具使用的不是 webpack 也不是 vite 更不是 gulp ，而是 parcel 一个极速零配置 web 应用打包工具。

首先需要全局安装这个工具

$ npm install -g parcel-bundler

搭建项目环境

新建一个项目文件夹，然后初始化项目目录

两种初始化项目的方式，一种是开发依赖安装 parcel-bundler，一种是开发依赖安装 parcel 。

$ npm init -y
$ npm install parcel-bundler -D
$ npm install three

然后修改 package.json 文件的脚本

{
    "scripts": {
        "dev": "parcel src/index.html",
        "build": "parcel build src/index.html"
    }
}

然后再根目录新建若干文件：

- node_modules
- src
    - assets
        - css
            - style.css
        - images
    - main
        - main.js
    - index.html
- package.json

然后在 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">
    <link rel="stylesheet" href="./assets/css/style.css">
    <title>Three</title>
</head>
<body>
    
</body>
<script src="./main/main.js"></script>
</html>

然后运行 npm run dev 这个时候项目回启动一个本地服务：http://localhost:1234/ 并且在根目录会生成一个 dist 文件夹——打包后的文件。

然后安装 gsap 和 dat.gui

$ npm install gsap dat.gui

开始一个简单的3D效果

制作一个简单的3D动画效果，需要5部分组成

  • 场景，类似于 canvas 画布
  • 相机，类似于人的视角
  • 几何物体，三维空间的物体
  • 控制器，三维空间物体的控制
  • 渲染器，顾名思义让3D动画在视图中显示的工具

声明一个场景对象

// main/maim.js
import * as THREE from 'three'
const scene = new THREE.Scene()

声明一个相机

/**
 * 参数1：相机的可视区域夹角度数
 * 参数2：相机的宽高比
 * 参数3：相机的近景距离
 * 参数4：相机的远景距离
 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000)

// 把相机添加到场景当中
scene.add(camera)

声明一个几何体

// 创建一个几何体
const cubeGeometry = new THREE.BoxGeometry()

// 设置几何体的材质（基础网格材质）
const cubMaterial = new THREE.MeshBasicMaterial({ color: 0xffff000 })

// 根据几何体和材质创建一个物体
const cube = new THREE.Mesh(cubeGeometry, cubMaterial)

// 将几何体添加到场景中
scene.add(cube)

声明一个控制器

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

controls.update()
设置阻尼器
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)

// 设置阻尼器，让控制器更有真实效果，但是必须要在动画循环中调用 update()
controls.enableDamping = true

function animation () {

    controls.update()

    // 进入下一帧的时候触发
    requestAnimationFrame(animation)

    renderer.render(scene, camera)
}

声明一个渲染器

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()

// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)

// 将渲染的canvas内容添加到body中
document.body.appendChild(renderer.domElement)

// 使用渲染器将相机和场景渲染进来
renderer.render(scene, camera)

让物体动起来

修改几何体的位置

// 修改几何物体的位置，两种方法，一中调用方法，一种修改属性值
cube.position.set(5, 0, 0)
cube.position.x = 5

让物体沿着X轴水平移动

function animation () {

    cube.position.x += 0.05
    if (cube.position.x === 5) {
        // 物体位置回到原点
        cube.position.x = 0
    }

    // 进入下一帧的时候触发
    requestAnimationFrame(animation)

    renderer.render(scene, camera)
}

使用补间动画工具来处理动画（Gasp）

import gsap from 'gsap'

// 设置动画
var animation_1 = gsap.to(cube.position, { 
    x: 5, // 沿着X轴移动的距离
    duration: 5, // 动画持续时间
    ease: 'power1.inOut', // 动画撒贝尔曲线
    repeat: 2, // 动画重复次数，值为-1时为无限循环
    yoyo: true, // 往返的运动
    delay: 2, // 延迟时间
    onStart: () => {
        console.log('动画开始')
    },
    onComplete: () => {
        console.log('动画完成')
    }
})
// 双击让动画停下来
window.addEventListener('dblclick', () => {
    // 判断动画是否是激活状态
    if (animation_1.isActive()) {
        // 暂停动画
        animation_1.pause()
    } else {
        // 恢复动画
        animation_1.resume()
    }
})

通过 Clock 时钟来跟踪时间、处理时间

const clock = new THREE.Clock()

// 获取时钟运行总时长
let dateTime = clock.getDelta()

通过用户操作界面更改物体属性（dat.gui）

import * as dat from 'dat.gui'
const gui = new dat.GUI()

添加物体水平移动的用户可操作项

gui.add(cube.position, 'x')
    .min(0)
    .max(5)
    .step(0.01)
    .name('水平移动')
    .onChange(value => {
        console.log('物体水平移动的距离：' + value)
    })
    .onFinishChange(value => {
        console.log('完成改变时的物体水平移动的距离：' + value)
    })

添加改变物体颜色的用户可操作项

const params = {
    color: '#FFFFFF'
}
gui.addColor(params, 'color').name('改变颜色')
    .onChange(value => {
        console.log('物体改变的颜色是：' + value)
        cube.material.color.set(value)
    })

添加物体是否显示的用户可操作项

gui.add(cube, 'visible').name('是否显示')

将多个用户操作项归纳到一个折叠框中

const folder = gui.addFolder('设置物体的属性')
const params = {
    color: '#ffff00',
    fn: () => {
        gsap.to(cube.position, { x: 5, duration: 2, yoyo: true, repeat: -1 })
    }
}
folder.add(cube.material, 'wireframe')
folder.addColor(params, 'color').name('改变颜色')
folder.add(params, 'fn').name('开启动画')

纹理贴图

在这里插入图片描述

// 导入纹理
const textureLoader = new THREE.TextureLoader()

// 图片的位置在 /dist/texture/bg1.jpg 
const doorColorTexture = textureLoader.load('./texture/bg1.jpg')

// 贴图偏移量设置
doorColorTexture.offset.x = 0.5
doorColorTexture.offset.set(0.5, 0)

// 设置贴图旋转
// 设置贴图的旋转中心
doorColorTexture.center.set(0.5,0.5)
// 设置贴图旋转 45deg
doorColorTexture.rotation = Math.PI / 4

// 设置贴图重复
// 水平重复2次，垂直重复3次
doorColorTexture.repeat.set(2, 3)

// 设置水平方向贴图重复的模式（贴边重复）
doorColorTexture.wrapS = THREE.RepeatWarppering
// 设置垂直方向贴图重复的模式（贴边重复）
doorColorTexture.wrapT = THREE.MirrepeatWarppering

// 设置几何体的材质（基础网格材质）
const cubMaterial = new THREE.MeshBasicMaterial({
    // 这里的 color 颜色会叠加到纹理图上
    // color: 0xffff000,
    map: doorColorTexture
})

在这里插入图片描述

设置透明材质

在这里插入图片描述

// 导入纹理
const textureLoader = new THREE.TextureLoader()

// 图片的位置在 /dist/texture/alpha-bg.jpg
// 图片中黑色区域会被渲染成透明状，白色区域会被渲染成不透明，灰色区域会被渲染成半透明状
const doorColorTexture = textureLoader.load('./texture/alpha-bg.jpg')

// 设置几何体的材质（基础网格材质）
const cubMaterial = new THREE.MeshBasicMaterial({
    map: doorColorTexture,
    alphaMap: doorAlphaTexture,
    transparent: true // 设置为 true 透明贴图才会起效
})

在这里插入图片描述

添加平面

// 添加平面
const basicColorTexture = textureLoader.load('./texture/bg4.jpg')

const plane = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(1,1),
    // cubMaterial
    new THREE.MeshBasicMaterial({
        map: basicColorTexture
    })
)

plane.position.set(3, 0, 0)

scene.add(plane)

AO 环境遮挡

在这里插入图片描述

const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1)

// 这是一张白色背景，黑色线条的图，白色在渲染时，会被忽略，黑色线条被作为环境贴图的描边效果，如阴影
const doorAotexture = textureLoader.load('./texture/bg5.jpg')

const cubMaterial = new THREE.MeshBasicMaterial({
    map: doorColorTexture,
    alphaMap: doorAlphaTexture,
    transparent: true,
    aoMap: doorAotexture
})
cubeGeometry.setAttribute(
    'uv2',
    new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2)
)

在这里插入图片描述

贴图加载管理

单个贴图加载
const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load('./texture/bg1.jpg')
textureLoader.onLoad = () => {
    console.log('加载完成')
}
贴图加载包管理器批量处理

第一种方式：

const manager = new THREE.LoadingManager()
manager.onStart = function (url, itemsLoaded, itemsTotal) {
    console.log('开始加载文件：', { url, itemsLoaded, itemsTotal })
}
manager.onLoad = function () {
    console.log('加载完成')
}
manager.onProgress = function (url, itemsLoaded, itemsTotal) {
    console.log({ url, itemsLoaded, itemsTotal })
}
manager.onError = function (url) {
    console.error('加载失败')
    console.error(url)
}

第二种方式：

const event = {}
event.onLoad = function () {
    console.log('图片加载完成')
}
event.onProgress = function (url, num, total) {
    console.log('图片加载完成：', url)
    console.log('图片加载进度：', num)
    console.log('图片总数：', total)
    console.log('图片加载进度的百分比：', ((num / total) * 100).toFixed(2) + '%')
}
event.onError = function () {
    console.log('图片加载失败')
}

const manager = new THREE.LoadingManager(
    event.onLoad,
    event.onProgress,
    event.onError
)

// 把包加载管理器传递给贴图加载器，然后每次加载贴图资源的时候都会触发包加载管理器
const textureLoader = new THREE.TextureLoader(manager)

const doorColorTexture = textureLoader.load('./texture/bg1.jpg')

物理光线

环境光线

// 环境光线（从四面八方照射过来的光线）
const light = new THREE.AmbientLight(0xffffff, 0.1)
scene.add(light)

平行光线

// 平行光线（相当于太阳光照射的光线）
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(0, 10, 10)
scene.add(directionalLight)

在这里插入图片描述

设置置换贴图和贴图厚度

在这里插入图片描述

const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1, 100, 100, 100)

// 导入置换贴图
const doorHeightTexture = textureLoader.load('./texture/bg_5.jpg')

// 设置材质
const cubeMaterial = new THREE.MeshBasicMaterial({
    map: doorColorTexture,
    alphaMap: doorAlphaTexture,
    transparent: true,
    aoMap: doorAotexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture // 置换贴图
    displacementScale: 0.1, // 置换贴图厚度
})

在这里插入图片描述

设置置换贴图粗糙度和光滑度

// 设置材质
const cubeMaterial = new THREE.MeshBasicMaterial({
    map: doorColorTexture,
    alphaMap: doorAlphaTexture,
    transparent: true,
    aoMap: doorAotexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture // 门面贴图
    displacementScale: 0.1, // 门面厚度
    roughness: 0, // 粗糙度
})

在这里插入图片描述

给门上的铆钉设置贴图

在这里插入图片描述

// 加载贴图
const door_6_texture = textureLoader.load('./texture/bg_6.jpg')

// 设置材质
const cubeMaterial = new THREE.MeshBasicMaterial({
    map: doorColorTexture,
    alphaMap: doorAlphaTexture,
    transparent: true,
    aoMap: doorAotexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture // 门面贴图
    displacementScale: 0.1, // 门面厚度
    roughness: 0, // 粗糙度
    roughnessMap: door_6_texture, // 铆钉贴图
})

在这里插入图片描述

设置金属度效果和金属厚度效果

在这里插入图片描述

// 金属贴图
const door_7_texture = textureLoader.load('./texture/bg_7.jpg')

// 设置材质
const cubeMaterial = new THREE.MeshBasicMaterial({
    map: doorColorTexture,
    alphaMap: doorAlphaTexture,
    transparent: true,
    aoMap: doorAotexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture // 门面贴图
    displacementScale: 0.1, // 门面厚度
    roughness: 1, // 粗糙度
    roughnessMap: door_6_texture, // 铆钉贴图
    metalness: 1, // 金属度
    metalnessMap: door_7_texture, // 铆钉金属贴图
})

在这里插入图片描述

设置门面的法线贴图和凹凸效果

在这里插入图片描述

// 导入法线贴图
const door_8_texture = textureLoader.load('./texture/bg_8.jpg')

// 设置材质
const cubeMaterial = new THREE.MeshBasicMaterial({
    map: doorColorTexture,
    alphaMap: doorAlphaTexture,
    transparent: true,
    aoMap: doorAotexture,
    aoMapIntensity: 1,
    displacementMap: doorHeightTexture // 门面贴图
    displacementScale: 0.1, // 门面厚度
    roughness: 1, // 粗糙度
    roughnessMap: door_6_texture, // 铆钉贴图
    metalness: 1, // 金属度
    metalnessMap: door_7_texture, // 铆钉金属贴图
    normalMap: door_8_texture, // 门面法线贴图
})

在这里插入图片描述

环境贴图

百里狂生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 随机选取动画_Three.js + GreenSock 模拟简单随机动画
weixin_31544603的博客
02-06 879
什么是three.j比抖朋要插支一圈不者地sThree其架通了动以近道都过一在达近道都过一在达.js封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染，相对于webGL，Three.js封装了底层的图形接口，在不了解图形学的情况下，也能用简单的代码实现三维场景的渲浏。富混工就划这些本公的响示近览记的迹更是再个效文司效应。近览记的迹更是再个效文...
Threejs学习笔记(一) 基础篇
qq_52054730的博客
08-25 865
基本概念 一个完整的3D环境包含以下元素: 1.场景(Scene)：是物体、光源等元素的容器， 2.相机（Camera）：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机 3.物体对象（Mesh）：包括二维物体（点、线、面）、三维物体、粒子 4.光源（Light）：包括全局光、平行光、点光源 5.渲染器（Renderer）:指定渲染方式，如webGL\canvas2D\Css2D\Css3D等。 6.控制器(Control): 相机控件，可通过键盘、鼠标控制相机的移动 场景(Sc
threejs实现简单全景看房demo
晨曦的博客
06-20 3794
threejs实现简单全景看房demo
Three.js 笔记
cky_123的博客
06-26 1562
three.js笔记
我的threejs学习笔记（一）
chenqiong1991的博客
03-12 1280
生成three.js场景的基本步骤一、引入jquery和threejs（注意顺序，jquery在后） 1. <script src="../three.js-master/build/three.js"></script> 2. <script src="../jquery/jquery.js"></script>二、内联css控制场景布满页面<style> body{
前端学习笔记
e1592027130的博客
10-19 1178
笔记 小知识 V-ON绑定事件 V-BIND绑定属性 Network中可以查看当前发起的请求 XHR这个标签出现在Chrome浏览器的开发者工具Network选项卡中 XHR类型即通过XMLHttpRequest方法发送的请求即AJAX请求 外部JS引入当前Vue实例 函数中传this指向就好了 forEach没有返回值要有返回值的话用map git checkout -b dev origin/dev 建立分支并且从远程拉取 APP的组件生命周期与小程序有出入 scroll view 有滑动时间并把sc
前端2020面试题195道
热门推荐
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
基于ssm的记账管理系统设计与实现【毕业设计jsp】
qq_17739911的博客
01-29 3356
本 科 毕 业 设 计（论文） 题 目：记账管理系统专题题目：记账管理系统 查阅完整毕设： 【Java毕业设计】基于ssm的记账管理系统设计与实现（论文PPT+完整源码+视频+数据库） - 互站网 https://www.huzhan.com/code/goods344478.html 或：https://download.csdn.net/download/qq_17739911/12241049 本 科 毕 业 设 计（论文）任 务 书 题 目：...
java面试题
weixin_49277956的博客
09-05 7147
Java考试题 一：单选题 下列哪一种叙述是正确的（D ） A． abstract修饰符可修饰字段、方法和类 B． 抽象方法的body部分必须用一对大括号{ }包住 C． 声明抽象方法，大括号可有可无 D． 声明抽象方法不可写出大括号 如下代码 public class Test { public int aMethod() { static int i = 0; i++; return i; } public static void main (String args[]) { Test test
环境企业表单权限分配填报数据系统设计与实现
子舆的专栏
06-05 1万+
环境信息化是政府信息化建设的重要组成部分,深入推进环境信息化建设是国家信息化发展的客观要求,是建设服务型政府的重要手段,是实现环境管理科学决策和提升环境监管效能的基本保障。对于一套兼容并包的信息管理系统，不同的类型的企业机构有相对应的属性业务表单，需要对建立的表单建立关联关系，并且系统的用户有填报、审核及管理的多重功能。 本文开发一套系统应用于环境企业的差异化表单填报与用户权限分配的实际场景，可以有效提升系统的管理与业务数据的汇总和分析。 本文完成的主要工作如下： 1.通过对当前业界
软件测试学习笔记丨Pytest配置文件
ceshiren_com的博客
08-27 3448
pytest.ini是pytest的配置文件；可以修改pytest的默认行为；不能使用任何中文符号，包括汉字、空格、引号、冒号等。
12306项目学习笔记（框架篇Base）
qq_74851649的博客
08-30 485
首先学习的是基础框架提供了一种静态方式来访问Spring容器中的Bean，适用于某些特定场景，如工具类和框架集成。在12306项目中由于我们引入了RocketMQ消息队列，这些库的对象通常不是Spring管理的，无法直接使用@Autowired注入，所以需要类提供一种静态方式来访问Spring容器中的Bean。比如在我们的TicketServiceImpl中的bean对象就是用以下方法获取的。
Datawhale X 李宏毅苹果书AI夏令营 学习笔记
最新发布
m0_61049596的博客
08-31 406
今天，我继续学习了深度学习中的优化算法，并且着重理解了如何利用。等高级优化器来提高模型训练的效率和效果。2024年8月30日。
前端开发学习Docker记录02容器操作
第⑦个前端
08-29 3139
使用docker ps 可以看到有哪些镜像在运行。
AI实践与学习8-AI Agent Workflow助力解题和验证答案置信度
xiaosi的博客
08-30 352
之前在试着提高解题正确率，目标100%，发现外部知识不足仅依靠大模型的话比较困难。而试题人工生产成本巨大。本质因为大模型生成内容会有幻觉特点，也就是说解答的试题正确性不太好评判，直接解答试题生产场景不太可控。后面考虑调用OpenAI解题的时候，像xxx那样通过输出置信度来帮助判断答案的正确性 or 其他形式只要能保证LLM生成答案是可靠（程序判断）的。
记一次学习--webshell绕过
banliyaoguai的博客
08-31 640
这道题目要读取flag，且当前目录下的文件数目要大于三才可以读取，然后这里的思路就是创建文件。上面题目，下面的call_user_func有一个可变长参数，这个可变长参数是$parameters然后上面有一个if语句判断$parameters是否有action，如果有就删除掉，然后再action参数传system，在parameters传你要执行的命令。我们这里也要想办法利用A中的f，这个就要利用ob_start，ob_start调用例子，这里和call_user_func调用差不多。
算法的学习笔记—把数字翻译成字符串
业精于勤，荒于嬉
08-31 523
通过动态规划的方法，我们可以高效地计算出一个数字字符串有多少种不同的翻译方法。这个问题不仅考察了我们对动态规划的理解，还让我们熟悉了如何处理字符串中的边界情况和状态转移。希望通过这个例子的讲解，能够帮助你更好地理解动态规划的应用。😁热门专栏推荐想学习vue的可以看看这个java基础合集数据库合集redis合集nginx合集linux合集手写机制微服务组件spring_尘觉springMVCmybit欢迎大家加入我的社区尘觉社区文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论
Scratch教学案例-《三顾茅庐》：让编程学习如同故事般引人入胜
q742808221的博客
08-30 566
在编程的世界里，我们常常寻找那种既能激发创意，又能提升技能的学习方式。这是一部将经典故事与编程教学巧妙结合的Scratch项目，让孩子们在轻松愉快的氛围中掌握编程技巧。《三顾茅庐》以三国演义中的经典故事为背景，带领学生们进入一个充满历史韵味的编程世界。通过编程实现故事情节，学生不仅能深入了解三国故事，还能在实际操作中掌握Scratch编程的基本概念。《三顾茅庐》的设计考虑到了不同年龄段学生的学习需求。通过完成《三顾茅庐》项目，学生不仅能学会Scratch编程的基础知识，还能培养解决问题的能力和创造力。
如何学习自动化测试工具！
qq_43371695的博客
08-28 885
要学习和掌握自动化测试工具的使用方法，可以按照以下步骤进行：一、明确学习目标 首先，需要明确你想要学习哪种自动化测试工具。自动化测试工具种类繁多，包括但不限于Selenium、Appium、JMeter、Postman、Robot Framework等，每种工具都有其特定的使用场景和优势。因此，在选择学习工具时，应结合自己的实际需求和学习目标进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值