当前位置：首页 > 前端开发 > 正文内容

ThreeJs-02Threejs开发入门与调试

邻居的猫1个月前 (12-09)前端开发525

这两天没有上传笔记，在处理图床的问题，主打一个白嫖，所以要费点心思，先是用了gitee的图床十分困难配好后发现竟然加了防盗链，后边又转了github的咱现在来说github也是最安稳且免费的，但是有个问题，这玩意得用梯子才干看到，作为国内的博客谁随时挂个梯子上来，所以最终仍是用了收点费不是许多，但能很省心的阿里云oss存储计划

1.轨迹操控器

1 操控物体移动

前面咱们创立了物体，为了让物体移动起来。咱们可以设置它的position特点进行方位的设置。

相机和立方体都是物体。每个物体都是1个方针。

在官方文档里，咱们可以看到相机camera和物体mesh都承继Object3D类。所以camera、mesh都归于3d方针。从3d方针的官方文档里，咱们可以找到position特点，而且该特点一个vector3方针。因而经过官方vector3类的文档，咱们可以简略运用下面2种办法来修正position方位，当然后边还会解说更多的办法。

//设置该向量的x、y 和 z 重量。
mesh.position.set(x,y,z);
//直接设置position的x,y,z特点
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;

官方文档：https://threejs.org/docs/index.html?q=vect#api/zh/math/Vector3

1.1 每一帧修正一点方位构成动画

例如，每一帧让立方体向右移动0.01，而且当方位大于5时，从0开端。那么可以这么设置。

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

render();

2 归纳上述代码

1、在前面创立的项目中的main.js文件写入代码

import * as THREE from "three";
// 导入轨迹操控器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// console.log(THREE);

// 方针：操控3d物体移动

// 1、创立场景
const scene = new THREE.Scene();

// 2、创立相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机方位
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);

// 修正物体的方位
// cube.position.set(5, 0, 0);
cube.position.x = 3;

// 将几何体增加到场景中
scene.add(cube);

console.log(cube);

// 初始化烘托器
const renderer = new THREE.WebGLRenderer();
// 设置烘托的尺度巨细
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(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 render() {
  cube.position.x += 0.01;
  if (cube.position.x > 5) {
    cube.position.x = 0;
  }
  renderer.render(scene, camera);
  //   烘托下一帧的时分就会调用render函数
  requestAnimationFrame(render);
}

render();

作用演示：

3.总结

就能扩大缩小画面了

image-20241115205706667

主动在中心原点处

image-20241115205843624

设置方位，还可以父子级网格，子级是相关于父级来设置方位

image-20241115210215338

子级相较于父级的正3方位所以仍是原点

image-20241115210246725

2.物体缩放与旋转

物体的缩放与旋转是咱们常常要操作的办法。

1 scale设置缩放

由于物体的scale特点是vector3方针，因而依照vector的特点和办法，设置x/y/z轴方向的缩放巨细。

//例如设置x轴扩大3倍、y轴方向扩大2倍、z轴方向不变
cube.scale.set(3, 2, 1);
//独自设置某个轴的缩放
cube.scale.x = 3

2 rotation设置旋转

由于的旋转经过设置rotation特点，该特点是Euler类的实例，因而可以经过Euler类的办法进行设置旋转视点。

因而可以经过以下办法设置旋转物体

//直接设置旋转特点，例如环绕x轴旋转90度
cube.rotation.x = -Math.PI/2

//环绕x轴旋转45度
cube.rotation.set(-Math.PI / 4, 0, 0, "XZY");

set办法，每个参数详细界说

.set ( x : Float, y : Float, z : Float, order : String ) : this

x - 用弧度表明x轴旋转量。
y - 用弧度表明y轴旋转量。
z - 用弧度表明z轴旋转量。
order - (optional) 表明旋转次序的字符串。

2.1 旋转动画

每一帧旋转弧度制的0.01视点，完成动画代码

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);
}

3 归纳上述代码

1、在前面创立的项目中的main.js文件写入代码

import * as THREE from "three";
// 导入轨迹操控器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// console.log(THREE);

// 方针：操控3d物体移动

// 1、创立场景
const scene = new THREE.Scene();

// 2、创立相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机方位
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);

// 修正物体的方位
// cube.position.set(5, 0, 0);
cube.position.x = 3;

// 将几何体增加到场景中
scene.add(cube);

console.log(cube);

// 初始化烘托器
const renderer = new THREE.WebGLRenderer();
// 设置烘托的尺度巨细
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(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 render() {
  cube.position.x += 0.01;
  if (cube.position.x > 5) {
    cube.position.x = 0;
  }
  renderer.render(scene, camera);
  //   烘托下一帧的时分就会调用render函数
  requestAnimationFrame(render);
}

render();

作用演示：

4.总结

缩放也是较于父级，父级变大，子级跟着大

image-20241115210609890

3.自适应屏幕巨细

1.1 自适应屏幕巨细

你会发现，咱们前面写好的代码，在页面尺度产生改动的时分，并不能自适应的改动尺度，而呈现空白或许滚动条杰出的状况。所以监听屏幕巨细的改动，来从头设置相机的宽高份额和烘托器的尺度巨细，代码如下：

// 监听画面改动，更新烘托画面
window.addEventListener("resize", () => {
  //   console.log("画面改动了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新烘托器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置烘托器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

aspect特点是设置摄像机视锥体的长宽比，通常是运用画布的宽/画布的高。camera.updateProjectionMatrix()用于更新摄像机投影矩阵，相机任何参数被改动今后有必要被调用

1.2 操控场景全屏

常常咱们需求全屏的展现三维场景。例如，咱们想要双击，完成全屏作用，代码如下：

window.addEventListener("dblclick", () => {
  const fullScreenElement = document.fullscreenElement;
  if (!fullScreenElement) {
    //   双击操控屏幕进入全屏，退出全屏
    // 让画布方针全屏
    renderer.domElement.requestFullscreen();
  } else {
    //   退出全屏，运用document方针
    document.exitFullscreen();
  }
});

fullscreenElement只读特点回来当时在此文档中以全屏形式显现的元素。

假如文档当时未运用全屏形式，则回来值为null。

运用element.requestFullscreen()办法以全屏形式检查元素，exitFullscreen办法退出全屏。

2 归纳上述代码

1、在前面创立的项目中的main.js文件写入代码

import * as THREE from "three";
// 导入轨迹操控器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";

// console.log(THREE);

// 方针：js操控画面全屏

// 1、创立场景
const scene = new THREE.Scene();

// 2、创立相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机方位
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);

// 修正物体的方位
// cube.position.set(5, 0, 0);
// cube.position.x = 3;
// 缩放
// cube.scale.set(3, 2, 1);
// cube.scale.x = 5;
// 旋转
cube.rotation.set(Math.PI / 4, 0, 0, "XZY");

// 将几何体增加到场景中
scene.add(cube);

console.log(cube);

// 初始化烘托器
const renderer = new THREE.WebGLRenderer();
// 设置烘托的尺度巨细
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl烘托的canvas内容增加到body
document.body.appendChild(renderer.domElement);

// // 运用烘托器，经过相机将场景烘托进来
// renderer.render(scene, camera);

// 创立轨迹操控器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置操控器阻尼，让操控器更有实在作用,有必要在动画循环里调用.update()。
controls.enableDamping = true;

// 增加坐标轴辅佐器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

window.addEventListener("dblclick", () => {
  const fullScreenElement = document.fullscreenElement;
  if (!fullScreenElement) {
    //   双击操控屏幕进入全屏，退出全屏
    // 让画布方针全屏
    renderer.domElement.requestFullscreen();
  } else {
    //   退出全屏，运用document方针
    document.exitFullscreen();
  }
  //   console.log(fullScreenElement);
});

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   烘托下一帧的时分就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面改动，更新烘托画面
window.addEventListener("resize", () => {
  //   console.log("画面改动了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新烘托器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置烘托器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

作用演示：

应对HD-DPI显现器

HD-DPI代表每英寸高密度点显现器(视网膜显现器)。它指的是当今大多数的Mac和windows机器以及简直一切的智能手机。

浏览器中的工作办法是不论屏幕的分辨率有多高运用CSS像素设置尺度会被认为是相同的。 相同的物理尺度浏览器会烘托出字体的更多细节。

运用three.js有多种办法来应对HD-DPI。

第一种便是不做任何特别的工作。这可以说是最常见的。 烘托三维图形需求很多的GPU处理才能。移动端的GPU才能比桌面端的要弱。至少截止到2018年, 手机都有十分高的分辨率显现器。 现在最好的手机的HD-DPI份额为3x，意思对错高密度点显现器上的一个像素在高密度显现器上是9个像素。 意味着需求9倍的烘托。

核算9倍的像素是个大工程所以假如坚持代码不变咱们将核算一个像素然后浏览器将以三倍巨细制造(3x3=9像素)。

关于大型的three.js运用来说上面便是你想要的否侧你的帧速率会很低。

尽管如此假如你的确想用设备的分辨率来烘托，three.js中有两种办法来完成。

一种是运用renderer.setPixelRatio来告知three.js分辨率的倍数。 拜访浏览器从CSS像素到设备像素的倍数然后传给three.js。

renderer.setPixelRatio(window.devicePixelRatio);

之后任何对renderer.setSize的调用都会奇特地运用您恳求的巨细乘以您传入的像素份额. 激烈不主张这样。 看下面。

另一种办法是在调整canvas的巨细时自己处理。

function resizeRendererToDisplaySize(renderer) {
      const canvas = renderer.domElement;
      const pixelRatio = window.devicePixelRatio;
      const width = canvas.clientWidth * pixelRatio | 0;
      const height = canvas.clientHeight * pixelRatio | 0;
      const needResize = canvas.width !== width || canvas.height !== height;
      if (needResize) {
        renderer.setSize(width, height, false);
      }
      return needResize;
    }

第二章办法从客观上来说更好。为什么？由于我拿到了我想要的。 在运用three.js时有许多种状况下咱们需求知道canvas的绘图缓冲区的切当尺度。 比方制造后期处理滤镜或许咱们在操作着色器需求拜访gl_FragCoord变量，假如咱们截屏或许给GPU 读取像素，制造到二维的canvas等等。 经过咱们自己处理咱们会一向知道运用的尺度是不是咱们需求的。 暗地并没有什么特别的魔法产生。

3.其他弥补

3.1 gui调试东西

image-20241115220219132

image-20241115221840993

image-20241115221832251

image-20241115222155709

3.2 创立极点，构成三角形

three里边一切原料平面都是由三角形组成image-20241118205745969

一个面极点的数量，由于设置了共用极点

image-20241118205809786

3.3 极点组

可以一个网格的多个原料拆分隔，别离设置，需求设置极点组，原料所以在的极点为一个组

image-20241118210130874

创立几何体，在别离创立不同的原料，留意原料用数组

image-20241118210342341

image-20241118210401796

image-20241118210446710

3.4 快速创立几何体

方才看到的是用原料创立

官网可以快速创立

image-20241118211811954

4.根底原料

image-20241118213320472

根底原料不受光照影响

贴图

image-20241118213405522

加上通明度

image-20241118213422445

通明度贴图，黑色部分彻底通明，只剩下白色部分

image-20241118213502815

image-20241118213509915

加上布景，环境以及环境贴图都为同一张鱼眼图后，可让原料好像在这个场景中

image-20241118213629041

高光贴图，越亮的区域反射光线越显着

image-20241118213716547

光照贴图，让原料可以有此贴图的光照作用

image-20241118213748077

代码完成

创立几何体，创立原料，几何体和原料构成物体

image-20241118213912347

加载纹路贴图

image-20241118214011902

答应通明度

image-20241118214058364

image-20241118214043065

加载ao贴图

image-20241118214343414

通明贴图

image-20241118214505728

image-20241118214802119

image-20241118214807540

光照贴图

image-20241118214844829

环境贴图，需求hdr加载器

image-20241118214927473

扫描二维码推送至手机访问。

版权声明：本文由51Blog发布，如需转载请注明出处。

本文链接：https://www.51blog.vip/?id=417

标签: ThreeJS
分享给朋友：
返回列表

上一篇：ThreeJs-03原料进阶

下一篇：命令行使用开发初学者攻略：脚手架篇、UI 库和交互东西

“ThreeJs-02Threejs开发入门与调试” 的相关文章

pnpm 是怎么推翻 npm 和 yarn 的？

pnpm 是怎么推翻 npm 和 yarn 的？

今日研讨了一下 pnpm 的机制，发现它的确很强壮，乃至能够说对 yarn 和 npm 形成了降维冲击 。 咱们从包办理工具的开展前史，一同看下究竟好在哪里？ npm2 在 npm 3.0 版别之前，项目的 node_modules 会呈现出嵌套结构，也便是说，我装置的依靠、依靠的依靠、依靠的依靠的...

html上传文件,```html 文件上传示例

html上传文件,```html 文件上传示例

要在HTML中上传文件，您可以使用``元素。这个元素允许用户选择文件并上传到服务器。以下是一个基本的示例：```html 文件上传示例 选择文件: 在这个例子中，``元素定义了一个表单，用户可以在其中上传文件。`action`属性指定了表单提交到服务器的URL（在这个例子中...

html多行文本框

html多行文本框

HTML多行文本框：提升网页交互体验的关键元素在网页设计中，多行文本框是一个不可或缺的元素，它允许用户输入大量的文本信息，如文章、评论、反馈等。HTML多行文本框不仅能够提升网页的交互性，还能为用户提供更加便捷的输入体验。本文将详细介绍HTML多行文本框的使用方法、属性设置以及在实际应用中的技巧。...

html上传文件,```html 文件上传示例

html上传文件,```html 文件上传示例

要在HTML中上传文件，您可以使用``元素。这个元素允许用户选择文件并上传到服务器。以下是一个基本的示例：```html 文件上传示例 选择文件: 在这个例子中，``元素定义了一个表单，用户可以在其中上传文件。`action`属性指定了表单提交到服务器的URL（在这个例子中...

css中字体加粗, 什么是字体加粗？

css中字体加粗, 什么是字体加粗？

`normal`：默认值，正常字体 `bold`：加粗字体 `bolder`：比`bold`更粗 `lighter`：比`normal`更细 `100` `900`：数值表示，100最细，900最粗例如，如果你想将一个元素的字体加粗，你可以这样写：```cssp { fontweight: b...

html调整字体大小,html网页代码生成器

1. 使用CSS样式：你可以通过CSS来设置字体大小。例如，你可以使用`fontsize`属性来设置字体大小。例如，`这是16像素的字体。3. 使用百分比：你可以使用百分比来设置字体大小。例如，`这是120%的字体。4. 使用em单位：em单位是相对于当前字体大小的单位。例如，`这是1.2em的字体...

Copyright © 2024-2028 51blog All Rights Reserved

XML地图