Three.js——learn02

Three.js——learn02

  • Three.js——learn02
    • 通过轨道控制器查看物体OrbitControls
      • 核心代码
      • index2.html
      • index.css
      • index2.js
    • result
    • 添加辅助器
      • 1.坐标轴辅助器AxesHelper
        • 核心代码
        • 完整代码
      • 2.箭头辅助器ArrowHelper
        • 核心代码
        • 完整代码
      • 3.相机视锥体辅助器CameraHelper
        • 核心代码
        • 完整代码

Three.js——learn02

通过轨道控制器查看物体OrbitControls

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动
和动画不同的是，轨道控制器由用户操控，手动调整位置来观察物体

核心代码

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
/创建轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//更新控制器
control.update()
//给物体添加动画
const an = () => {
  //requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命
  requestAnimationFrame(an)
  control.update()
  //开始渲染
  renderer.render(scene, camera)
}
an()

index2.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" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/styles/index.css" />
  </head>
  <body>
    <script src="./core/index2.js" type="module"></script>
  </body>
</html>

index.css

* {
  margin: 0;
  padding: 0;
  background-color: beige;
}

index2.js

import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

//创建场景
const scene = new THREE.Scene()

/**
 * 创建相机并设置相机参数
 * 参数：
 * 1. fov视野角度
 * 2.长宽比
 * 3.近端距离参数（近截面）最近能看到哪里
 * 4.远端距离参数（远截面）最远能看到哪里
 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//设置相机位置
camera.position.set(0, 0, 5)
//将相机放置到场景中
scene.add(camera)
//创建渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器渲染大小
renderer.setSize(window.innerWidth, window.innerHeight)
//添加渲染器到页面中
document.body.appendChild(renderer.domElement)
//创建几何体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
//设置基础材质（颜色:0x00ff00）
const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
//创建物体对象（几何体+材质）
const cube = new THREE.Mesh(geometry, material)
//添加物体到材质中
scene.add(cube)
//创建轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//更新控制器
control.update()
//给物体添加动画
const an = () => {
  //requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命
  requestAnimationFrame(an)
  control.update()
  //开始渲染
  renderer.render(scene, camera)
}
an()

result

在这里插入图片描述

添加辅助器

1.坐标轴辅助器AxesHelper

用于简单模拟3个坐标轴的对象，红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴

核心代码

//创建辅助器
const axesHelper = new THREE.AxesHelper(5)
//场景中添加辅助器，用于简单模拟3个坐标轴的对象
scene.add(axesHelper)

完整代码

import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

//创建场景
const scene = new THREE.Scene()

/**
 * 创建相机并设置相机参数
 * 参数：
 * 1. fov视野角度
 * 2.长宽比
 * 3.近端距离参数（近截面）最近能看到哪里
 * 4.远端距离参数（远截面）最远能看到哪里
 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//设置相机位置
camera.position.set(0, 0, 5)
//将相机放置到场景中
scene.add(camera)
//创建渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器渲染大小
renderer.setSize(window.innerWidth, window.innerHeight)
//添加渲染器到页面中
document.body.appendChild(renderer.domElement)
//创建几何体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
//设置基础材质（颜色:0x00ff00）
const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
//创建物体对象（几何体+材质）
const cube = new THREE.Mesh(geometry, material)
//添加物体到材质中
scene.add(cube)
//创建轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//更新控制器
control.update()
//创建辅助器
const axesHelper = new THREE.AxesHelper(5)
//场景中添加辅助器，用于简单模拟3个坐标轴的对象
scene.add(axesHelper)
//给物体添加动画
const an = () => {
  //requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命
  requestAnimationFrame(an)
  control.update()
  //开始渲染
  renderer.render(scene, camera)
}
an()

在这里插入图片描述

2.箭头辅助器ArrowHelper

用于模拟方向的3维箭头对象

核心代码

/**
 * 构建一个三维向量
 * x - 向量的x值，默认为0。
 * y - 向量的y值，默认为0。
 * z - 向量的z值，默认为0。
 */
const dirx = new THREE.Vector3(1, 0, 0)
//将该向量转换为单位向量（unit vector）， 也就是说，将该向量的方向设置为和原向量相同，但是其长度（length）为1。
dirx.normalize()
const origin = new THREE.Vector3(0, 0, 0)
const length = 3
const hex = 0xffffff
/**
 * 构建箭头
 * dir -- 基于箭头原点的方向. 必须为单位向量.
 * origin -- 箭头的原点.
 * length -- 箭头的长度. 默认为 1.
 * hex -- 定义的16进制颜色值. 默认为 0xffff00.
 * headLength -- 箭头头部(锥体)的长度. 默认为箭头长度的0.2倍(0.2 * length).
 * headWidth -- The width of the head of the arrow. Default is 0.2 * headLength.
 */
const arrowHelperX = new THREE.ArrowHelper(dirx, origin, length, hex)
//我们可以给三个轴线添加箭头
//添加到场景中
scene.add(arrowHelperX)

完整代码

import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

//创建场景
const scene = new THREE.Scene()

/**
 * 创建相机并设置相机参数
 * 参数：
 * 1. fov视野角度
 * 2.长宽比
 * 3.近端距离参数（近截面）最近能看到哪里
 * 4.远端距离参数（远截面）最远能看到哪里
 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//设置相机位置
camera.position.set(0, 0, 5)
//将相机放置到场景中
scene.add(camera)
//创建渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器渲染大小
renderer.setSize(window.innerWidth, window.innerHeight)
//添加渲染器到页面中
document.body.appendChild(renderer.domElement)
//创建几何体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
//设置基础材质（颜色:0x00ff00）
const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
//创建物体对象（几何体+材质）
const cube = new THREE.Mesh(geometry, material)
//添加物体到材质中
scene.add(cube)
//创建轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//更新控制器
control.update()
//创建辅助器
const axesHelper = new THREE.AxesHelper(5)
//场景中添加辅助器，用于简单模拟3个坐标轴的对象
scene.add(axesHelper)
/**
 * 构建一个三维向量
 * x - 向量的x值，默认为0。
 * y - 向量的y值，默认为0。
 * z - 向量的z值，默认为0。
 */
const dirx = new THREE.Vector3(1, 0, 0)
const diry = new THREE.Vector3(0, 1, 0)
const dirz = new THREE.Vector3(0, 0, 1)
//将该向量转换为单位向量（unit vector）， 也就是说，将该向量的方向设置为和原向量相同，但是其长度（length）为1。
dirx.normalize()
diry.normalize()
dirz.normalize()
const origin = new THREE.Vector3(0, 0, 0)
const length = 3
const hex = 0xffffff
/**
 * 构建箭头
 * dir -- 基于箭头原点的方向. 必须为单位向量.
 * origin -- 箭头的原点.
 * length -- 箭头的长度. 默认为 1.
 * hex -- 定义的16进制颜色值. 默认为 0xffff00.
 * headLength -- 箭头头部(锥体)的长度. 默认为箭头长度的0.2倍(0.2 * length).
 * headWidth -- The width of the head of the arrow. Default is 0.2 * headLength.
 */
const arrowHelperX = new THREE.ArrowHelper(dirx, origin, length, hex)
const arrowHelperY = new THREE.ArrowHelper(diry, origin, length, hex)
const arrowHelperZ = new THREE.ArrowHelper(dirz, origin, length, hex)

//我们可以给三个轴线添加箭头
//添加到场景中
scene.add(arrowHelperX)
scene.add(arrowHelperY)
scene.add(arrowHelperZ)
//给物体添加动画
const an = () => {
  //requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命
  requestAnimationFrame(an)
  control.update()
  //开始渲染
  renderer.render(scene, camera)
}
an()

在这里插入图片描述

3.相机视锥体辅助器CameraHelper

用于模拟相机视锥体的辅助对象，它使用 LineSegments 来模拟相机视锥体

核心代码

//创建摄像机视锥辅助器
const helper = new THREE.CameraHelper(camera)
scene.add(helper)

完整代码

import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

//创建场景
const scene = new THREE.Scene()

/**
 * 创建相机并设置相机参数
 * 参数：
 * 1. fov视野角度
 * 2.长宽比
 * 3.近端距离参数（近截面）最近能看到哪里
 * 4.远端距离参数（远截面）最远能看到哪里
 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//设置相机位置
camera.position.set(0, 0, 5)
//将相机放置到场景中
scene.add(camera)
//创建渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器渲染大小
renderer.setSize(window.innerWidth, window.innerHeight)
//添加渲染器到页面中
document.body.appendChild(renderer.domElement)
//创建几何体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
//设置基础材质（颜色:0x00ff00）
const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
//创建物体对象（几何体+材质）
const cube = new THREE.Mesh(geometry, material)
//添加物体到材质中
scene.add(cube)
//创建轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//更新控制器
control.update()
//创建辅助器
const axesHelper = new THREE.AxesHelper(5)
//场景中添加辅助器，用于简单模拟3个坐标轴的对象
scene.add(axesHelper)
/**
 * 构建一个三维向量
 * x - 向量的x值，默认为0。
 * y - 向量的y值，默认为0。
 * z - 向量的z值，默认为0。
 */
const dirx = new THREE.Vector3(1, 0, 0)
const diry = new THREE.Vector3(0, 1, 0)
const dirz = new THREE.Vector3(0, 0, 1)
//将该向量转换为单位向量（unit vector）， 也就是说，将该向量的方向设置为和原向量相同，但是其长度（length）为1。
dirx.normalize()
diry.normalize()
dirz.normalize()
const origin = new THREE.Vector3(0, 0, 0)
const length = 3
const hex = 0xffffff
/**
 * 构建箭头
 * dir -- 基于箭头原点的方向. 必须为单位向量.
 * origin -- 箭头的原点.
 * length -- 箭头的长度. 默认为 1.
 * hex -- 定义的16进制颜色值. 默认为 0xffff00.
 * headLength -- 箭头头部(锥体)的长度. 默认为箭头长度的0.2倍(0.2 * length).
 * headWidth -- The width of the head of the arrow. Default is 0.2 * headLength.
 */
const arrowHelperX = new THREE.ArrowHelper(dirx, origin, length, hex)
const arrowHelperY = new THREE.ArrowHelper(diry, origin, length, hex)
const arrowHelperZ = new THREE.ArrowHelper(dirz, origin, length, hex)

//我们可以给三个轴线添加箭头
//添加到场景中
scene.add(arrowHelperX)
scene.add(arrowHelperY)
scene.add(arrowHelperZ)
const helper = new THREE.CameraHelper(camera)
scene.add(helper)
//给物体添加动画
const an = () => {
  //requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命
  requestAnimationFrame(an)
  control.update()
  //开始渲染
  renderer.render(scene, camera)
}
an()

在这里插入图片描述

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

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

相关文章

近期投简历、找日常实习的一些碎碎念（大二---测试岗）

近期投简历、找日常实习的一些碎碎念（大二---测试岗）

嘿嘿嘿&#xff0c;我又回来了&#xff0c;相信不少兄弟已经发现我似乎已经断更了好久&#xff0c;哈哈&#xff0c;我是尝试去找实习&#xff0c;投简历面试去了。 先说一下背景。 目录 背景 求职进行中 简历 投递和沟通 收获和感受 背景 博主&#xff0c;大二软件工程…
阅读更多...
Arthas工具的基本使用

Arthas工具的基本使用

介绍 Arthas 是Alibaba开源的Java诊断工具&#xff0c;深受开发者喜爱。在线排查问题&#xff0c;无需重启&#xff1b;动态跟踪Java代码&#xff1b;实时监控JVM状态。Arthas支持JDK 6&#xff0c;支持Linux/Mac/Windows&#xff0c;采用命令行交互模式&#xff0c;同时提供丰…
阅读更多...
Python截图自动化工具

Python截图自动化工具

1、展示部分源码(写的比较乱&#xff0c;哈哈) 2、功能展示 1&#xff09;首页 2&#xff09;按钮截图(用于自动翻页) 3&#xff09;保存位置按钮(选择图片保存的位置) 4&#xff09;重复次数&#xff0c;就是要截取多少次 5&#xff09;定位截屏(截取的内容&#x…
阅读更多...
[数据分析与可视化] Python绘制数据地图1-GeoPandas入门指北

[数据分析与可视化] Python绘制数据地图1-GeoPandas入门指北

本文主要介绍GeoPandas的基本使用方法&#xff0c;以绘制简单的地图。GeoPandas是一个Python开源项目&#xff0c;旨在提供丰富而简单的地理空间数据处理接口。GeoPandas扩展了Pandas的数据类型&#xff0c;并使用matplotlib进行绘图。GeoPandas官方仓库地址为&#xff1a;GeoP…
阅读更多...
尚融宝06-ECMAScript基本介绍和使用

尚融宝06-ECMAScript基本介绍和使用

目录 一、ECMAScript 1、ECMA 2、ECMAScript 3、什么是 ECMA-262 4、ECMA-262 历史 5、ECMAScript 和 JavaScript 的关系 二、基本语法 1、let声明变量 2、const声明常量 3、解构赋值 4、模板字符串 5、声明对象简写 6、定义方法简写 7、参数的默认值 8、对象拓…
阅读更多...
QT常用位置函数区别

QT常用位置函数区别

目录1、引言2、实验代码3、位置函数3.1 x()3.2 y()3.3 frame()3.4 pos()3.5 geometry()3.6 width()3.7 height()3.8 rect()3.9 size()1、引言 QT有众多图形绘制函数&#xff0c;包括x()、y()、frame()、pos()、geometry()、width()、height()、rect()、size()&#xff0c;它们…
阅读更多...
【Java学习笔记】多线程与线程池

【Java学习笔记】多线程与线程池

多线程与线程池一、多线程安全与应用1、程序、进程与线程的关系2、创建多线程的三种方式&#xff08;1&#xff09;继承Thread类创建线程【不推荐】&#xff08;2&#xff09;实现Runnable接口创建线程&#xff08;3&#xff09;Callable接口创建线程3、线程的生命周期4、初识线…
阅读更多...
基础入门 HTTP数据包Postman构造请求方法请求头修改状态码判断

基础入门 HTTP数据包Postman构造请求方法请求头修改状态码判断

文章目录数据-方法&头部&状态码请求requestResponse状态码案例-文件探针&登录爆破工具-Postman自构造使用数据-方法&头部&状态码 请求request 1、常规请求-Get 2、用户登录-Post •get&#xff1a;向特定资源发出请求&#xff08;请求指定页面信息&#x…
阅读更多...
为什么这么NB？huatuo革命Unity热更新

为什么这么NB？huatuo革命Unity热更新

最近huatuo(华佗)热更新解决方案火爆了unity开发圈,起初我觉得热更新嘛&#xff0c;不就是内置一个脚本解释器脚本语言开发&#xff0c;如xLua, ILRuntime, puerts。Huatuo又能玩出什么花样&#xff0c;凭什么会这么NB&#xff0c;引起了那么多程序员的关注与称赞呢&#xff1f…
阅读更多...
单片机——IIC协议与24C02

单片机——IIC协议与24C02

1、基础知识 1.1、IIC串行总线的组成及工作原理 I2C总线只有两根双向信号线。一根是数据线SDA&#xff0c;另一根是时钟线SCL。 1.2、I2C总线的数据传输 I2C总线进行数据传送时&#xff0c;时钟信号为高电平期间&#xff0c;数据线上的数据必须保持稳定&#xff0c;只有在时钟…
阅读更多...
Linux实操之进程管理

Linux实操之进程管理

文章目录一、基本介绍二、显示系统执行的进程基本介绍三、ps详解四、终止进程kill和killall介绍:●基本语法常用选项五、查看进程树pstree基本语法常用选项一、基本介绍 1&#xff0e;在LINUX中&#xff0c;每个执行的程序都称为一个进程。每一个进程都分配一个ID号(pid,进程号…
阅读更多...
【SCL】实现简单算法--冒泡排序

【SCL】实现简单算法--冒泡排序

使用SCL语言实现一个冒泡排序的简单算法 文章目录 目录 文章目录 前言 二、实现排序 1.读取存储器地址&#xff08;PEEK&#xff09;指令 2.编写程序 总结 前言 本文我们来一起使用SCL来实现一个简单的算法——冒泡排序&#xff1b;它可以对少量数据进行从小到大或从大到小排序…
阅读更多...
【Linux】GDB的安装与使用

【Linux】GDB的安装与使用

安装安装gdb的具体步骤如下&#xff1a;1、查看当前gdb安装情况rpm -qa | grep gdb如果有&#xff0c;则可以先删除&#xff1a;rpm -e --nodeps 文件名如果没有&#xff0c;则进行下一步。2、下载gdb源码包或者直接apt安装。apt命令安装&#xff1a;sudo apt install gdb源码包…
阅读更多...
Qt之QPainter绘制多个矩形/圆形（含源码+注释）

Qt之QPainter绘制多个矩形/圆形（含源码+注释）

一、绘制示例图 下图绘制的是矩形对象&#xff0c;但是将绘制矩形函数&#xff08;drawRect&#xff09;更改为绘制圆形&#xff08;drawEllipse&#xff09;即可绘制圆形。 二、思路解释 绘制矩形需要自然要获取矩形数据&#xff0c;因此通过鼠标事件获取每个矩形的rect数…
阅读更多...
一个完整的渗透学习路线是怎样的？如何成为安全渗透工程师？

一个完整的渗透学习路线是怎样的？如何成为安全渗透工程师？

前言 1/我是如何学习黑客和渗透&#xff1f; 我是如何学习黑客和渗透测试的&#xff0c;在这里&#xff0c;我就把我的学习路线写一下&#xff0c;让新手和小白们不再迷茫&#xff0c;少走弯路&#xff0c;拒绝时间上的浪费&#xff01; 2/学习常见渗透工具的使用 注意&…
阅读更多...
SpringBoot集成 SpringSecurity安全框架

SpringBoot集成 SpringSecurity安全框架

文章目录一、CSRF跨站请求伪造攻击二、项目准备三、认识 SpringSecurity3.1 认证&#x1f380;①直接认证&#x1f380;②使用数据库认证3.2 授权&#x1f361;①基于角色授权&#x1f361;②基于权限的授权&#x1f361;③使用注解判断权限3.3 "记住我"3.4 登录和注…
阅读更多...
【JavaEE】如何将JavaWeb项目部署到Linux云服务器？

【JavaEE】如何将JavaWeb项目部署到Linux云服务器？

写在前面 大家好&#xff0c;我是黄小黄。不久前&#xff0c;我们基于 servlet 和 jdbc 完善了博客系统。本文将以该系统为例&#xff0c;演示如何将博客系统部署到 Linux 云服务器。 博客系统传送门&#xff1a; 【JavaEE】前后端分离实现博客系统&#xff08;页面构建&#…
阅读更多...
arcpy基础篇（3）-处理空间数据

arcpy基础篇（3）-处理空间数据

ArcPy的数据访问模块arcpy.da&#xff0c;可以控制会话、编辑操作、游标、表或要素类与NumPy数组之间相互转换的函数以及对版本化和复本工作流的支持。 1.使用游标访问数据 游标是一个数据库术语&#xff0c;它主要用于访问表格中的每一行记录或者向表中插入新的记录。在ArcG…
阅读更多...
【数据结构】Java实现单链表

【数据结构】Java实现单链表

目录 1. ArrayList的缺陷 2. 链表 2.1 链表的概念及结构 2.2 接口的实现 3. 动手实现单链表 3.1 重写SeqList接口方法 3.2 在当前链表头部添加节点&#xff08;头插&#xff09; 3.3 在 第index位置添加节点&#xff08;任意位置&#xff09; 3.4 在当前链表尾部添加…
阅读更多...
Python|蓝桥杯进阶第四卷——图论

Python|蓝桥杯进阶第四卷——图论

欢迎交流学习~~ 专栏&#xff1a; 蓝桥杯Python组刷题日寄 蓝桥杯进阶系列&#xff1a; &#x1f3c6; Python | 蓝桥杯进阶第一卷——字符串 &#x1f50e; Python | 蓝桥杯进阶第二卷——贪心 &#x1f49d; Python | 蓝桥杯进阶第三卷——动态规划 ✈️ Python | 蓝桥杯进阶…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站