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.hqwc.cn/news/466835.html

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

相关文章

电动汽车上哪些部位用到了电机？

电动汽车上哪些部位用到了电机？

一、背景 电动汽车中除了主驱动电机之外的其他电机的控制复杂度因电机的种类和功能而异。 一般来说，助力转向电机、空调风扇电机、冷却水泵电机等辅助电机的控制相对较为简单。这些电机通常只需要进行简单的开/关控制或速度调节，以满足车辆的基本需求。…
阅读更多...
docker本地目录挂载

docker本地目录挂载

小命令 1、查看容器详情 docker inspect 容器名称 还是以nginx为例，上篇文章我们制作了nginx静态目录的数据卷，此时查看nginx容器时会展示出来（docker inspect nginx 展示信息太多，这里只截图数据卷挂载信息）&#…
阅读更多...
「数据结构」二叉搜索树1：实现BST

「数据结构」二叉搜索树1：实现BST

🎇个人主页：Ice_Sugar_7 🎇所属专栏：Java数据结构 🎇欢迎点赞收藏加关注哦！ 实现BST 🍉二叉搜索树的性质🍉实现二叉搜索树🍌插入🍌查找🍌删除 &am…
阅读更多...
中国电子学会2019年3月份青少年软件编程Scratch图形化等级考试试卷三级真题（选择题、判断题）

中国电子学会2019年3月份青少年软件编程Scratch图形化等级考试试卷三级真题（选择题、判断题）

一、单选题(共 25 题，每题 2 分，共 50 分) 1. 要使以下代码运行后画出如图所示三角形风车,则以下代码中①②③④处应分别填入多少?( ) A.3 4 90 120 B.4 3 90 120 C.3 4 120 90 D.4 3 120 90 2.运行下列脚本，i的值为（ &am…
阅读更多...
ChatGPT高效提问—prompt实践

ChatGPT高效提问—prompt实践

ChatGPT高效提问—prompt实践 ​ 探索prompt在实际生活中的各种应用，旨在帮助理解和掌握如何将之前学到的prompt基础和技巧应用到具体实践中，从而在各个领域实现人工智能的价值。 ​ 通过生动的案例，发现并挖掘ChatGPT和prompt的无穷潜力。…
阅读更多...
搜索专项---最短路模型

搜索专项---最短路模型

文章目录 迷宫问题武士风度的牛抓住那头牛 一、迷宫问题OJ链接 本题思路:只需要记录各个点是有哪个点走过来的，就能递推得出路径。记录前驱假设从 1,1 这个点向下走到了2, 1，则将2,1这个点的前驱记为1,1。这样，将整张地图 bfs 后&#xff0c…
阅读更多...
LabVIEW智能温度监控系统

LabVIEW智能温度监控系统

LabVIEW智能环境监测系统 介绍了一个基于LabVIEW的智能环境监测系统的开发过程。该系统在实时监测和分析环境参数，如温度、湿度、气体浓度等，以提供精确的数据支持，确保环境安全与健康。通过高效的数据处理和友好的用户界面，系统…
阅读更多...
C++联合体详解！

C++联合体详解！

个人主页：PingdiGuo_guo 收录专栏：C干货专栏 大家伙新年快乐，今天我们来了解一下C联合体。 文章目录 1.联合体 1.1联合体的概念 1.2联合体的思想 1.3联合体的作用 1.3.1内存优化 1.3.2二进制数据操作 1.3.3类型转换 1.3.4解决特定问…
阅读更多...
人脸追踪案例及机器学习认识

人脸追踪案例及机器学习认识

1.人脸追踪机器人初制 用程序控制舵机运动的方法与机械臂项目完全相同。 由于摄像头的安装方式为上下倒转安装，我们在编写程序读取图像时需使用 flip 函数将 图像上下翻转。 现在，只需要使用哈尔特征检测得到人脸在图像中的位置，再指示舵机运…
阅读更多...
BUUCTF-Real-[Jupyter]notebook-rce

BUUCTF-Real-[Jupyter]notebook-rce

1、简介 Jupyter Notebook（此前被称为 IPython notebook）是一个交互式笔记本，支持运行 40 多种编程语言。 如果管理员未为Jupyter Notebook配置密码，将导致未授权访问漏洞，游客可在其中创建一个console并执行任意Pytho…
阅读更多...
《UE5_C++多人TPS完整教程》学习笔记2 ——《P3 多人游戏概念（Multiplayer Concept）》

《UE5_C++多人TPS完整教程》学习笔记2 ——《P3 多人游戏概念（Multiplayer Concept）》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P3 多人游戏概念（Multiplayer Concept）》 的学习笔记，该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版，UP主（也是译…
阅读更多...
研究多态恶意软件，探讨网络安全与AI

研究多态恶意软件，探讨网络安全与AI

前言 近期ChatGPT火遍全球，AI技术被应用到了全球各行各业当中，国内外各大厂商也开始推出自己的ChatGPT，笔者所在公司在前段时间也推出了自研的安全GPT，AI技术在网络安全行业得到了很多的应用，不管是网络安全研究人员、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023