three.js 之 入门篇1

news2025/1/17 15:22:11

目录

  • three.js 之 入门篇
    • 1:使用parcel搭建 three.js 开发环境
    • 2:运行一个简单的场景和物体
      • 2.1 main.js
      • 2.2效果
    • 3:轨道控制器和控制物体 mesh
    • 3.1 main.js
    • 3.2效果
    • 4:添加坐标辅助器 AxesHelper
      • 4.1
      • 4.2效果
    • 5:设置几何体移动
      • 5.1
      • 5.2 效果
    • 6:设置几何体缩放和旋转 mesh下的 rotation
    • 8:设置基本动画
    • 9:通过Clock 跟踪时间处理动画

three.js 之 入门篇

1:使用parcel搭建 three.js 开发环境

parcel

  • 项目之中安装:npm install parcel-bundler --save-dev
  • 安装之中 配置脚本指令 ( 项目根目录下 src / index,html )
    
      "scripts": {
        "dev": "parcel <your entry file>", // eg: "dev": "parcel src/index.html",
        "build": "parcel build <your entry file>",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
    
  • 安装three : npm install three --save
  • 文件目录
    • 在这里插入图片描述
  • src / 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>Document</title>
    </head>
    <body>
      <script src="./main/main.js" type="module"></script>
    </body>
    </html>
    
  • src / main / main.js
    import * as THREE from "three"
    console.log('main.js',THREE);
    
  • 运行项目 : npm run dev

2:运行一个简单的场景和物体

2.1 main.js

import * as THREE from "three"
// console.log('main.js',THREE);
// 1:创建场景
const scene = new THREE.Scene()

// 2:创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

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

2.2效果

在这里插入图片描述

3:轨道控制器和控制物体 mesh

3.1 main.js

import * as THREE from "three"
// console.log('main.js',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)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

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

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

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

3.2效果

在这里插入图片描述

4:添加坐标辅助器 AxesHelper

4.1

import * as THREE from "three"
// console.log('main.js',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)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

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

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

4.2效果

在这里插入图片描述

5:设置几何体移动

5.1

import * as THREE from "three"
// console.log('main.js',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)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
mesh.position.set(5,0,0)
// mesh.position.x = 3

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

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

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1:添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 06-2设置几何物体 集合体再x轴之中移动,到5的时候,回到原始位置
  mesh.position.x += 0.01
  if ( mesh.position.x > 5 ) {
    mesh.position.x = 0
  }
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

5.2 效果

在这里插入图片描述

6:设置几何体缩放和旋转 mesh下的 rotation

import * as THREE from "three"
// console.log('main.js',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)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
// mesh.position.set(5,0,0)
// mesh.position.x = 3

// 07-1 几何体的缩放
// mesh.scale.set(3,2,1)
// mesh.scale.x = 3
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是,先旋转那个轴

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

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

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1:添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 06-2设置几何物体 集合体再x轴之中移动,到5的时候,回到原始位置
  mesh.position.x += 0.01
  // 07-3 几何体的旋转2
  mesh.rotation.x += 0.01
  if ( mesh.position.x > 5 ) {
    mesh.position.x = 0
  }
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

8:设置基本动画

import * as THREE from "three"
// console.log('main.js',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)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
// mesh.position.set(5,0,0)
// mesh.position.x = 3

// 07-1 几何体的缩放
// mesh.scale.set(3,2,1)
// mesh.scale.x = 3
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是,先旋转那个轴

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

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

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1:添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 渲染函数 - 每一帧渲染一次
function animate(time) {
  // 08-1:动画的时候 
  let t = time / 1000 // time 当前毫秒数
  mesh.position.x = t * 1;
  if ( mesh.position.x > 5 ) {
    mesh.position.x = 0
  }
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

9:通过Clock 跟踪时间处理动画

在这里插入图片描述

import * as THREE from "three"
// console.log('main.js',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)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
// mesh.position.set(5,0,0)
// mesh.position.x = 3

// 07-1 几何体的缩放
// mesh.scale.set(3,2,1)
// mesh.scale.x = 3
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是,先旋转那个轴

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

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

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1:添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 9-1 设置时钟
let clock = new THREE.Clock()

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 9-2 设置时钟
  let time = clock.getElapsedTime() // 获取时钟运行总时长
  // let deltaTime = clock.getDelta() // 两次获取时钟的间隔时间
  let t = time % 5 // time 当前毫秒数
  mesh.position.x = t * 1;

  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习 Day24——使用Pytorch环境实现mnist手写数字识别

深度学习 Day24——使用Pytorch环境实现mnist手写数字识别 文章目录深度学习 Day24——使用Pytorch环境实现mnist手写数字识别一、前言二、我的环境三、Pytorch简介四、前期工作1、导入依赖项和设置GPU2、导入数据3、加载数据4、数据可视化五、构建简单的CNN网络六、训练模型1、…

Spring的嵌套事务(Propagation.NESTED)到底是个啥

什么是嵌套事务 嵌套事务其实是对数据库SavePoint概念的Java操作版封装&#xff0c;什么是SavePoint参考我另一篇blog&#xff1a;juejin.cn/post/718544… SavePoint是数据库事务中的一个概念, 可以将整个事务切割为不同的小事务, 可以选择将状态回滚到某个小事务发生时的样…

Java图形化界面---AWT布局管理器

目录 一、布局管理器介绍 二、布局管理器用法 &#xff08;1&#xff09;FlowLayout &#xff08;2&#xff09;BorderLayout &#xff08;3&#xff09;GridLayout &#xff08;4&#xff09;CardLayout &#xff08;5&#xff09;BoxLayout 三、Box容器的讲解 一、布…

自主实现HTTP

"让我们&#xff0c;跳吧在无比宏达的星系!" 一、背景 超文本传输协议&#xff08;Hyper Text Transfer Protocol&#xff0c;HTTP&#xff09;是一个简单的请求-响应协议&#xff0c;它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么…

STL list容器底层代码剖析、正向迭代器与反向迭代器的类的封装

目录 一、迭代器是什么 二、迭代器的本质 三、如何给一个容器实现迭代器功能 四、正向迭代器功能的具体实现 五、反向迭代器 六、list底层代码剖析 一、迭代器是什么 迭代器&#xff08;iterator&#xff09;有时又称光标&#xff08;cursor&#xff09;是程序设计的软件设…

【手写 Vue2.x 源码】第六篇 - 数据代理的实现

一&#xff0c;前言 上篇&#xff0c;主要介绍了 Vue 数据初始化流程中&#xff0c;数组类型的数据劫持是如何实现的&#xff0c;核心思路如下&#xff1a; 出于对性能的考虑&#xff0c;Vue 没有对数组采用 Object.defineProperty 进行递归劫持&#xff0c;而是对能够导致原…

NOSQL数据库习题

NOSQL数据库习题第一章第二章第三章第四章第五章NoSQL数据库上机测试第一章 1.写出DB、RDB、DBMS、TRDB、NoSQL、NewSQL、NDFS的中文名称。 答&#xff1a;DB&#xff1a;数据库 RDB&#xff1a;关系型数据库 DBMS&#xff1a;数据库管理系统 TRDB&#xff1a;传统关系型数据…

解决Shotgrid登陆不上, 上传出错,窗口卡住不动等问题

在使用Shotgrid时&#xff0c;是否遇到这种问题&#xff1a; accounts.autodesk.com出错 auth.autodesk.com出错 再或者这样出错&#xff1a; Shotgrid登陆出错 再再这样关闭Load…时这样出错&#xff0c; 窗口半天都关闭不了&#xff1a; 分析&#xff1a; 1 出现这种错…

(一分钟)激光SLAM扫描匹配 文献阅读

本博客介绍了激光SLAM扫描匹配的相关问题。编辑切换为居中添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09;扫描匹配也是数据关联类的问题&#xff0c;是SLAM里面的重要构成部分。编辑切换为居中添加图片注释&#xff0c;不超过 140 字&#xff08;可选&…

PyTorch实例2——文本情绪分类器

实例主要用于熟悉相关模型&#xff0c;并且练习创建一个模型的步骤&#xff1a;数据收集、数据预处理、构建模型、训练模型、测试模型、观察模型表现、保存模型传送门&#xff1a;蓝桥云课实验 目录1. 实验环境2. 实验目的3. 相关原理4. 实验步骤4.1 数据收集从在线商城抓取评论…

OpenHarmony 标准系统HDF框架之I2C驱动开发

OpenHarmony 标准系统HDF框架之I2C驱动开发主要内容I2C 基础知识## I2C 基础知识 —— 概念和特性I2C 基础知识 —— 协议、四种信号组合I2C 调试手段## I2C 调试手段 —— 硬件I2C 调试手段 —— 软件HDF 框架下的 I2C 设备驱动## HDF 框架下的 I2C 设备驱动 —— 案例描述HDF…

Shell 传递参数

我们可以在执行 Shell 脚本时&#xff0c;向脚本传递参数&#xff0c;脚本内获取参数的格式为&#xff1a;$n。n 代表一个数字&#xff0c;1 为执行脚本的第一个参数&#xff0c;2 为执行脚本的第二个参数&#xff0c;以此类推……实例以下实例我们向脚本传递三个参数&#xff…

ArcGIS Pro脚本工具(15)——按字段属性值分类导图

之前做了配合地图系列批量导图的脚本工具 ArcGIS Pro脚本工具&#xff08;9&#xff09;——配合地图系列批量导图_学学GIS的博客-CSDN博客_arcgispro批量导出地图pngPro的地图系列是批量制图的利器&#xff0c;但是有个不便的地方&#xff0c;就是设置完成地图系列后&#xf…

机器学习实战教程(13篇)

机器学习实战教程(13篇)这些网址非常适合想学习机器学习&#xff0c;却苦于没有项目&#xff08;尤其缺少数据&#xff09;的人。无意中看到&#xff0c;给自己做一个记录。机器学习实战教程&#xff08;一&#xff09;&#xff1a;K-近邻算法&#xff08;史诗级干货长文&#…

2022年度外设产品行业增长分析:鼠标、键盘同比增长27%

近年来&#xff0c;信息技术迅速发展&#xff0c;网民数量不断增长&#xff0c;深刻改变着社会的运作方式&#xff0c;对社会生产、商业运作模式等方面产生重大影响。广泛的行业应用为网络设备品牌商、制造商带来了差异化的细分市场&#xff0c;各类互联网设备接入数量也快速增…

混合空间增强

混合图像增强是一种图像处理技术&#xff0c;用于在不损失图像细节的情况下增强图像的对比度和亮度。它通常通过将图像拆分成多个通道&#xff0c;然后对每个通道进行独立处理来实现。 综合利用平滑滤波&#xff0c;锐化滤波&#xff0c;灰度拉伸等技术对图像进行处理&#xff…

【Linux】sudo给某条指令提权

sudo1.为什么要有sudo2.使用sudo提权的前提2. 在root下添加普通用户到信任列表3.验证4.总结1.为什么要有sudo 首先我们要知道&#xff0c;普通用户是受Linux的权限约束的。就比如普通用户对自己的家目录有完全管理的权限&#xff0c;但是不能随意查看其他人的家目录&#xff0c…

1.机器学习中的关键组件

1.机器学习中的关键组件 无论什么类型的机器学习问题&#xff0c;都会遇到这些组件&#xff1a; 可以用来学习的_数据_&#xff08;data&#xff09;&#xff1b;如何转换数据的_模型_&#xff08;model&#xff09;&#xff1b;一个_目标函数_&#xff08;objective function…

JavaScript 输出

文章目录JavaScript 输出JavaScript 显示数据使用 window.alert()操作 HTML 元素在本教程中写到 HTML 文档写到控制台您知道吗?JavaScript 输出 JavaScript 没有任何打印或者输出的函数。 JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据&#xff1a; 使用 wi…

TiDB 6.5 LTS 发版

在 2023 伊始&#xff0c;我们很高兴向大家宣布&#xff0c;TiDB 6.5 LTS 版本已经发布了。这是 TiDB V6 的第二个长期支持版&#xff08;上一个是 TiDB 6.1&#xff09;&#xff0c;除了携带了诸多备受期待的新特性&#xff0c;同时也将得到 TiDB 开发社区的长期维护&#xff…