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.01
    if (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.01
    cube.rotation.x += 0.01
    if (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 * 1
    if (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 * 1
    if (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,  // 设置重复的次数，无限次循环-1
    yoyo: 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)
})

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ImageAnimator组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ImageAnimator组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ImageAnimator组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、ImageAnimator组件 提供分隔器组件，分隔不同内容块/内容元素…
阅读更多...
一、DataX简介

一、DataX简介

DataX简介 一、什么是DataX二、DataX设计三、支持的数据源四、框架设计五、运行原理六、DataX和Sqoop对比 一、什么是DataX DataX是阿里巴巴开源的一个异构数据源离线同步工具，致力于实现包括关系型数据库（MySQL、Oracle等）、HDFS、Hive、OD…
阅读更多...
python -m SimpleHTTPServer mac报错

python -m SimpleHTTPServer mac报错

错误内容： Traceback (most recent call last):File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/runpy.py", line 174, in _run_module_as_main"__main__", fname, loader, pkg_name)File "/System/Libra…
阅读更多...
【GameFramework框架内置模块】1、全局配置（Config）

【GameFramework框架内置模块】1、全局配置（Config）

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址 大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 一、前言 【GameFramework框架】系列教程目录： https://blog.csdn.net/q7…
阅读更多...
回归预测模型：MATLAB岭回归和Lasso回归

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

1. 岭回归和Lasso回归的基本原理 1.1 岭回归： 岭回归（Ridge Regression） 是一种用于共线性数据分析的技术。共线性指的是自变量之间存在高度相关关系。岭回归通过在损失函数中添加一个L2正则项（ λ ∑ j 1 n β j 2 \lambda \s…
阅读更多...
LeetCode662：二叉树最大宽度（二叉树非典型最大宽度，BFS层序遍历重编号）

LeetCode662：二叉树最大宽度（二叉树非典型最大宽度，BFS层序遍历重编号）

题目 给你一棵二叉树的根节点 root ，返回树的 最大宽度 。 树的 最大宽度 是所有层中最大的 宽度 。 每一层的 宽度 被定义为该层最左和最右的非空节点（即，两个端点）之间的长度。将这个二叉树视作与满二叉树结构相同，…
阅读更多...
雨云裸金属服务器

雨云裸金属服务器

雨云服务器与裸金属服务器：云端与实体的完美交融 随着信息技术的迅猛发展，云服务已经成为企业和个人数据处理与存储的重要选择。其中，雨云服务器和裸金属服务器作为两种截然不同的服务形式，各自拥有独特的优势和应用场景。本文将深…
阅读更多...
深度学习基础之《深度学习介绍》

深度学习基础之《深度学习介绍》

一、深度学习与机器学习的区别 1、特征提取方面 机器学习：人工特征提取 分类算法 深度学习：没有人工特征提取，直接将特征值传进去 （1）机器学习的特征工程步骤是要靠手工完成的，而且需要大量领域专业知识…
阅读更多...
[2-远程开发-01]idea远程连接开发

[2-远程开发-01]idea远程连接开发

背景 因为本次的项目使用到一些网络相关的库只在linux可使用，项目本身也会在linux运行，而且如果在mac上进行开发的话，也涉及到部署的问题，而且也不能调试。 所以直接在本专栏第一篇的centos主机上进行开发，以远程连接…
阅读更多...
三、案例 - MySQL数据迁移至ClickHouse

三、案例 - MySQL数据迁移至ClickHouse

MySQL数据迁移至ClickHouse 一、生成测试数据表和数据1.在MySQL创建数据表和数据2.在ClickHouse创建数据表 二、生成模板文件1.模板文件内容2.模板文件参数详解2.1 全局设置2.2 数据读取（Reader）2.3 数据写入（Writer）2.4 性能设置…
阅读更多...
协议-TCP协议-基础概念04-可能发生丢包的位置-linux配置项梳理（TCP连接的建立和断开、收发包过程）

协议-TCP协议-基础概念04-可能发生丢包的位置-linux配置项梳理（TCP连接的建立和断开、收发包过程）

可能发生丢包的位置-linux配置项梳理（TCP连接的建立和断开、收发包过程）-SYN Flood攻击和防御原理 参考来源： 极客时间-Linux性能优化实战 极客时间-Linux内核技术实战课 到底是哪里发生了丢包呢？ Linux 的网络收发流程 从图中…
阅读更多...
Qt简易登录界面

Qt简易登录界面

代码： #include "mywidget.h" #include "ui_mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent), ui(new Ui::MyWidget) {ui->setupUi(this);ui->background->setPixmap(QPixmap(":/qt picture/logo.png"))…
阅读更多...
【Java程序设计】【C00271】基于Springboot的地方美食分享网站（有论文）

【Java程序设计】【C00271】基于Springboot的地方美食分享网站（有论文）

基于Springboot的地方美食分享网站（有论文） 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的地方美食分享网站 本系统分为系统功能模块、管理员功能模块、以及用户功能模块。 系统功能模块：网站首页可以查看首…
阅读更多...
CentOS7下如何安装Nginx

CentOS7下如何安装Nginx

一、Ngxin是什么 Nginx是一个开源的 Web 服务器，具有反向代理、负载均衡、缓存等功能。它可以作为 HTTP 服务器，将服务器上的静态文件（如 HTML、图片）通过 HTTP 协议展现给客户端，也可以实现动静分离，把动态…
阅读更多...
前端工程化面试题 | 07.精选前端工程化高频面试题

前端工程化面试题 | 07.精选前端工程化高频面试题

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
WSL外部SSH连接有效方法

WSL外部SSH连接有效方法

前言 wsl作为windows下使用linux平台有效的手段之一，本文可以让win作为工作站，外部系统用来连接win下的wsl系统。 自动启动服务脚本 https://zhuanlan.zhihu.com/p/47733615 开机自启端口转发 wslname "Ubuntu-20.04" 要转发端口的Linux…
阅读更多...
SPI NOR FLASH和SPI NAND FLASH

SPI NOR FLASH和SPI NAND FLASH

SPI NOR FLASH和SPI NAND FLASH是两种不同的存储设备，它们在硬件接口和软件应用上都有所不同。以下是关于这两种存储设备更详细的介绍： 1.SPI NOR FLASH SPI NOR FLASH是一种非易失性存储器，它通过串行接口进行数据传输，具有读写…
阅读更多...
【Git】移除Git中的文件

【Git】移除Git中的文件

有的时候需要移除或者更新 Git 中的文件，我们无法直接在远程仓库中移除，移除或者更新操作需要在本地端实现。 1、移除被跟踪文件 当某个文件被添加到暂存区或者本地仓库，此时会被标记为“跟踪状态”，此时 Git 就会代为管理这个文…
阅读更多...
Proteus -模拟串口被关闭后怎样打开

Proteus -模拟串口被关闭后怎样打开

Proteus -模拟串口被关闭后怎样打开 点击恢复弹出窗口，即可重新打开
阅读更多...
STM32 寄存器操作 GPIO 与中断

STM32 寄存器操作 GPIO 与中断

一、如何使用stm32寄存器点灯？ 1.1 寄存器映射表 寄存器本质就是一个开关，当我们把芯片寄存器配置指定的状态时即可使用芯片的硬件能力。 寄存器映射表则是开关的地址说明。对于我们希望点亮 GPIO_B 的一个灯来说，需要关注以下的两个寄存器…
阅读更多...
最新文章

Copyright @ 2022~2023