three.js 细一万倍教程 从入门到精通（一）

目录

一、three.js开发环境搭建

1.1、使用parcel搭建开发环境

1.2、使用three.js渲染第一个场景和物体

1.3、轨道控制器查看物体

二、three.js辅助设置

2.1、添加坐标轴辅助器

2.2、设置物体移动

2.3、物体的缩放与旋转

缩放

旋转

2.4、应用requestAnimationFrame

2.5、通过Clock跟踪时间处理动画

2.6、Gsap动画库基本使用与原理

2.7、Gsap控制动画属性与方法

2.8、根据尺寸变化实现自适应画面

阻尼效果

自适应画面

2.9、调用js接口控制画布全屏和退出全屏

2.10、应用图形用户界面更改变量

一、three.js开发环境搭建

1.1、使用parcel搭建开发环境

第一步：创建空项目

第二步：终端输入

npm init

直接一路回车。

第三步：安装parcel

npm install parcel-bundler

接着，通过修改你的package.json来添加这些任务脚本

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

第四步：创建src/index.html

第五步：终端输入命令

npm install parcel-bundler -dev

第六步：创建静态文件，引入静态文件

第七步：编写style.css代码

* {margin: 0;padding: 0;
}body {background-color: skyblue;
}

第八步：安装threejs依赖

npm install three --save

第九步：编写main.js代码，看threejs是否安装成功

import * as THREE from "three"console.log(THREE);

第十步：启动项目

1.2、使用three.js渲染第一个场景和物体

import * as THREE from "three"// 1、创建场景
const scene = new THREE.Scene()// 2、创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 3、设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera)// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00});
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将物体添加到场景中
scene.add(cube)// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);

1.3、轨道控制器查看物体

import * as THREE from "three"
// 导入轨道控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'// 1、创建场景
const scene = new THREE.Scene()// 2、创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 3、设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera)// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00});
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将物体添加到场景中
scene.add(cube)// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);// 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);function render() {renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render)
}render();

可以拖动了。

二、three.js辅助设置

2.1、添加坐标轴辅助器

// 添加坐标轴辅助器 5代表轴的线段长度
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

红色代表X轴，绿色代表Y轴，蓝色代表Z轴。

2.2、设置物体移动

// 修改物体的位置
// 参数分别为 x,y,z
cube.position.set(5, 2, 0)

当然你也可以使用直接点的形式：

cube.position.x = 5
cube.position.y = 2

小案例：模拟物体从左到右循环运动

function render() {cube.position.x += 0.01if (cube.position.x > 5) {cube.position.x = 0}renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render)
}

2.3、物体的缩放与旋转

缩放

// 缩放
// 参数 x轴是3倍，y轴是两倍
cube.scale.set(3, 2, 1)

旋转

//旋转
// 参数都为弧度，Math.PI / 4代表绕X轴旋转45度
cube.rotation.set(Math.PI / 4, 0, 0)

小案例：模拟物体从左到右循环运动，并按X轴旋转

function render() {cube.position.x += 0.01cube.rotation.x += 0.01if (cube.position.x > 5) {cube.position.x = 0}renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render)
}

2.4、应用requestAnimationFrame

首先，我们的render函数有个默认的参数time，代表每一帧的时间，如果你打印会发现每一帧的时间都不太匀速，比如我们上面这个案例，x轴长度为5，假如我打算1秒运动长度1，匀速就是5秒完成，但打印结果并不是匀速的。

// 匀速
function render(time) {let t = time / 1000 % 5;cube.position.x = t * 1if (cube.position.x > 5) {cube.position.x = 0}renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render)
}

2.5、通过Clock跟踪时间处理动画

// 设置时钟
const clock = new THREE.Clock();function render() {// 获取时钟运行的总时长let time = clock.getElapsedTime();console.log("时钟运行总时长：", time);let deltaTime = clock.getDelta();console.log("两次获取时间的间隔时间：", deltaTime)let t = time % 5;cube.position.x = t * 1if (cube.position.x > 5) {cube.position.x = 0}renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render)
}

2.6、Gsap动画库基本使用与原理

npm install gsap

动画库的作用就解决了我们上面手动计算处理动画的问题。

// 设置动画
// x轴上移动到5的位置，所花费时间5秒
gsap.to(cube.position, {x: 5, duration: 5, ease: "power1.out"})
// 绕x轴上旋转到360度，所花费时间5秒
gsap.to(cube.rotation, {x: 2 * Math.PI, duration: 5})function render() {renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render)
}

ease属性（速率）：

        power1.out：起始阶段平滑地加速，然后以逐渐减速的方式结束。

        power1.in：起始阶段缓慢加速，然后以较快的速度向目标值靠近。

        power1.inOut：在动画开始和结束时，属性的变化速度较慢，然后在动画的中间阶段达到最快的变化速度。

2.7、Gsap控制动画属性与方法

// 设置动画
// x轴上移动到5的位置，所花费时间5秒
let animate1 = gsap.to(cube.position, {x: 5,duration: 5,ease: "power1.inOut",repeat: -1,  // 设置重复的次数，无限次循环-1yoyo: true, // 往返运动delay: 2, // 延迟2秒运动onStart: () => {console.log("动画开始")},onComplete: () => {console.log("动画完成")}
})
// 绕x轴上旋转到360度，所花费时间5秒
gsap.to(cube.rotation, {x: 2 * Math.PI, duration: 5})// 点击动画，暂停或恢复
window.addEventListener("click", () => {if(animate1.isActive()) {animate1.pause(); // 暂停} else {animate1.resume(); // 恢复运动}
})

2.8、根据尺寸变化实现自适应画面

阻尼效果

// 设置控制器阻尼，让控制器更有真实效果，必须在动画循环里调用update()
controls.enableDamping = true;function render() {controls.update();renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render)
}

自适应画面

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectMatrix();// 在更新渲染器renderer.setSize(window.innerWidth, window.innerHeight)// 设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio);
})

尽管你更改分辨率，这段代码都会保持画面原样。

2.9、调用js接口控制画布全屏和退出全屏

// 双击控制屏幕进入全屏，退出全屏
window.addEventListener("dblclick", () => {const fullScreenElement = document.fullscreenElement; // 页面是否处于全屏if (!fullScreenElement){renderer.domElement.requestFullscreen(); // 全屏} else {document.exitFullscreen(); // 退出全屏}
})

2.10、应用图形用户界面更改变量

很多时候我们调试3D图像很麻烦，普遍都是改完代码然后看页面效果，而dat.gui就大大简化了我们的操作问题。

npm install -save dat.gui
// 导入dat.gui
import * as dat from 'dat.gui'const gui = new dat.GUI();
gui.add(cube.position, "x").min(0).max(5).name("移动X轴坐标").onChange((value) => {console.log("值被修改：", value)
}).onFinishChange((value) => {console.log("完全停下来触发：", value)
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/680555.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

c#cad 创建-文本（一）

c#cad 创建-文本（一）

运行环境 vs2022 c# cad2016 调试成功 一、代码说明 该代码是一个用于在AutoCAD中创建文本的命令。 首先，通过添加using语句引用了需要使用的Autodesk.AutoCAD命名空间。 然后，在命名空间CreateTextInCad下定义了一个名为CreateTextCommand的类&…
阅读更多...
海里定理例题

海里定理例题

1. lim ⁡ x − > 0 s i n ( 1 x ) \lim\limits_{x ->0}sin(\frac{1}{x}) x−>0lim​sin(x1​)的极限不存在 取数列f(x), x n 1 2 n Π − Π 2 x_n\frac{1}{2nΠ-\frac{Π}{2}} xn​2nΠ−2Π​1​和 y n 1 2 n Π Π 2 y_n\frac{1}{2nΠ\frac{Π}{2}} yn​2nΠ2…
阅读更多...
Hive SQL编译成MapReduce任务的过程

Hive SQL编译成MapReduce任务的过程

一、 Hive 底层执行架构 1） Hive简介 Hive是Facebook实现的一个开源的数据仓库工具。将结构化的数据文件映射为数据库表，并提供HQL查询功能，将HQL语句转化为MapReduce任务运行 2） Hive本质：将 HQL 转化成 MapReduce 程…
阅读更多...
Linux：搭建docker私有仓库（registry）

Linux：搭建docker私有仓库（registry）

当我们内部需要存储镜像时候，官方提供了registry搭建好直接用，废话少说直接操作 1.下载安装docker 在 Linux 上安装 Docker Desktop |Docker 文档https://docs.docker.com/desktop/install/linux-install/安装 Docker 引擎 |Docker 文档https://docs.do…
阅读更多...
手把手教你开发Python桌面应用-PyQt6图书管理系统-图书信息删除实现

手把手教你开发Python桌面应用-PyQt6图书管理系统-图书信息删除实现

锋哥原创的PyQt6图书管理系统视频教程： PyQt6图书管理系统视频教程 Python桌面开发 Python入门级项目实战 (无废话版) 火爆连载更新中~_哔哩哔哩_bilibiliPyQt6图书管理系统视频教程 Python桌面开发 Python入门级项目实战 (无废话版) 火爆连载更新中~共计24条视频&…
阅读更多...
【51单片机】串口通信实验（包括波特率如何计算）

【51单片机】串口通信实验（包括波特率如何计算）

目录 串口通信实验通信的基本概念串行通信与并行通信异步通信与同步通信单工、 半双工与全双工通信通信速率 51单片机串口介绍串口介绍串口通信简介串口相关寄存器串口工作方式方式0方式1方式 2 和方式 3 串口的使用方法（计算波特率） 硬件设计软件设计1、…
阅读更多...
类与结构体（6）

类与结构体（6）

我们上一起讲了这一期讲存储类和继承，这个难度很大的。 存储类 存储类主要规定了函数和变量的范围，在c中有这些存储类↓： ৹ auto（自动判断函数是什么类型） ৹ register (常用的变量和inline差不多，但应…
阅读更多...
【Vue】computed与watch

【Vue】computed与watch

📝个人主页：五敷有你 🔥系列专栏：Vue⛺️稳重求进，晒太阳 计算属性 概念：基于现有的数据，计算出来新的属性，依赖的数据变化，自动重新计算 语法： 声明…
阅读更多...
rbd快照管理、rbd快照克隆原理与实现、rbd镜像开机自动挂载、ceph文件系统、对象存储、配置对象存储客户端、访问Dashboard

rbd快照管理、rbd快照克隆原理与实现、rbd镜像开机自动挂载、ceph文件系统、对象存储、配置对象存储客户端、访问Dashboard

目录 快照 快照克隆 开机自动挂载 ceph文件系统 使用MDS 对象存储 配置服务器端 配置客户端 访问Dashborad 快照 快照可以保存某一时间点时的状态数据快照是映像在特定时间点的只读逻辑副本希望回到以前的一个状态，可以恢复快照使用镜像、快照综合示例 #…
阅读更多...
《SQLi-Labs》05. Less 29~37

《SQLi-Labs》05. Less 29~37

title: 《SQLi-Labs》05. Less 29~37 date: 2024-01-17 22:49:10 updated: 2024-02-12 18:09:10 categories: WriteUp：Security-Lab excerpt: HTTP 参数污染，联合注入、宽字节注入。 comments: false tags: top_image: /images/backimg/SunsetClimbing.p…
阅读更多...
【leetcode】100. 相同的树

【leetcode】100. 相同的树

题目链接 100. 相同的树 bool isSameTree(struct TreeNode* p, struct TreeNode* q) {if (p && q) {return p->val q->val // 分解&& isSameTree(p->left, q->left)&& isSameTree(p->right, q->right);} else if (p NULL &&…
阅读更多...
Linux第50步_移植ST公司的linux内核第2步_编译ST公司的linux源码和修改网络驱动

Linux第50步_移植ST公司的linux内核第2步_编译ST公司的linux源码和修改网络驱动

1、修改“linux-5.4.31”目录下的“Makefile” 1)、使用VSCode打开“linux-5.4.31.code-workspace” 2)、点击“linux-5.4.31”目录下的“Makefile” 3)、点击“编辑”，点击“查找”，输入“CROSS_COMPILE回车”，找到“ARCH ? $(SUBARCH)”…
阅读更多...
回归预测模型：MATLAB岭回归和Lasso回归

回归预测模型：MATLAB岭回归和Lasso回归

1. 岭回归和Lasso回归的基本原理 1.1 岭回归： 岭回归（Ridge Regression） 是一种用于共线性数据分析的技术。共线性指的是自变量之间存在高度相关关系。岭回归通过在损失函数中添加一个L2正则项（ λ ∑ j 1 n β j 2 \lambda \s…
阅读更多...
【蓝桥杯选拔赛真题34】C++最大值 第十三届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

【蓝桥杯选拔赛真题34】C++最大值 第十三届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

目录 C/C++最大值 一、题目要求 1、编程实现 2、输入输出
阅读更多...
JavaWeb：关于登录认证的简单拓展

JavaWeb：关于登录认证的简单拓展

前提介绍 本文基于文章-------JavaWeb：SpringBootWeb登录认证 --黑马笔记 -------再做简单拓展 如果没有关于登录认证知识的基础，可以先看上面所说的的文章，文章在专栏javaweb中，下面我为了大家观看，直接放了链接。…
阅读更多...
26. 可变参数和Collection集合工具类

26. 可变参数和Collection集合工具类

可变参数与Collections 1. 可变参数1. 概述2. 格式3. 代码示例4. 注意事项 2. Collections集合工具类2.1 概述2.2 方法2.3 代码示例2.4 注意事项 1. 可变参数 1. 概述 可变参数（Variable Arguments）是指在参数列表中允许传入不定个数的参数。在许多编程…
阅读更多...
《动手学深度学习(PyTorch版)》笔记7.6

《动手学深度学习(PyTorch版)》笔记7.6

注：书中对代码的讲解并不详细，本文对很多细节做了详细注释。另外，书上的源代码是在Jupyter Notebook上运行的，较为分散，本文将代码集中起来，并加以完善，全部用vscode在python 3.9.18下测试通过&…
阅读更多...
嵌入式Qt 第一个Qt项目

嵌入式Qt 第一个Qt项目

一.创建Qt项目 打开Qt Creator 界面选择 New Project或者选择菜单栏 【文件】-【新建文件或项目】菜单项 弹出New Project对话框，选择Qt Widgets Application 选择【Choose】按钮，弹出如下对话框 设置项目名称和路径，按照向导进行下一步 选…
阅读更多...
EMC学习笔记（二十六）降低EMI的PCB设计指南（六）

EMC学习笔记（二十六）降低EMI的PCB设计指南（六）

降低EMI的PCB设计指南（六） 1.PCB布局1.1 带键盘和显示器的前置面板PCB在汽车和消费类应用中的应用1.2 敏感元器件的布局1.3 自动布线器 2.屏蔽2.1 工作原理2.2 屏蔽接地2.3 电缆屏蔽至旁路2.4 缝隙天线：冷却槽和缝隙 tips：资料主要…
阅读更多...
MySQL篇----第二十一篇

MySQL篇----第二十一篇

系列文章目录 文章目录 系列文章目录前言一、什么是乐观锁二、什么是悲观锁三、什么是时间戳四、什么是行级锁前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。 一、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023