草庐IT

【Three.js基础】创建场景、渲染场景、创建轨道控制器（一）

不叫猫先生 2023-04-15 原文

🐱 个人主页：不叫猫先生
🙋‍♂️ 作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫系列专栏：vue3从入门到精通、TypeScript从入门到实践
📢 资料领取：前端进阶资料以及文中源码可以找我免费领取
🔥 前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)

目录

一、 WebGL与Three.js的关系

WebGL（Web Graphics Library）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，不需要插件，即专门处理计算或处理3D图像的JS API。
Three.js 是一款 WebGL 框架，其WebGL 的 API 接口基础上又进行的一层封装。由西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发，人称Mr.doob。

二、打包工具 parcel

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。其他详细用法详见官网。

1.安装

yarn add parcel -D

2.配置package.json

{
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }
}

三、搭建three.js环境

博主建议搭建一个本地的three.js环境，方便快速查看文档。

1.项目目录

├─ .parcel-cache
│  ├─ data.mdb
│  └─ lock.mdb
├─ dist
│  ├─ index.07fedde6.css
│  ├─ index.07fedde6.css.map
│  ├─ index.246235aa.js
│  ├─ index.246235aa.js.map
│  ├─ index.html
│  ├─ main.0632549a.js
│  ├─ main.0632549a.js.map
│  ├─ style.a11e3109.css
│  ├─ style.a11e3109.css.map
│  ├─ style.a11e3109.js
│  └─ style.a11e3109.js.map
├─ package.json
├─ src
│  ├─ assets
│  │  ├─ css
│  │  │  └─ style.css
│  │  └─ img
│  ├─ index.html
│  └─ main
│     └─ main.js
└─ yarn.lock

2.安装three

yarn add three -S

3.新建main.js并在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">
	<title>Document</title>
	<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
	<script src="./main/main.js" type="module"></script>
</body>
</html>

4.创建一个场景（Creating a scene）

创建场景借助three.js来进行显示，需要场景、相机和渲染器3个对象，透过然后通过摄像机渲染出场景。

（1）创建场景

new THREE.Scence();

（2）创建相机

three.js里有几种不同的相机，这使用的是PerspectiveCamera（透视摄像机），接收四个参数：

  • 视野角度（FOV）：摄像机视锥体垂直视野角度，从视图的底部到顶部，显示器上能看到的场景范围，单位是角度，默认是50
  • 长宽比（aspect ratio）：物体的宽/物体的高，比如（window.innerWidth / window.innerHeight），通常是使用画布的宽/画布的高，默认值是1（正方形画布）
  • 近截面（near plane）：摄像机的近端面，默认值是0.1，其有效值范围是0到当前摄像机far plane（远端面）的值之间。
  • 远截面（far）：摄像机的远端面，默认值是2000。

当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。该值必须大于near plane（摄像机视锥体近端面）的值。

new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

（3）设置相机的位置

camera.position.set(0, 0, 10)

（4）相机添加到场景

scene.add(camera)

（5）创建几何体

BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

  • width — X轴上面的宽度，默认值为1。
  • height — Y轴上面的高度，默认值为1。
  • depth — Z轴上面的深度，默认值为1。
  • widthSegments — （可选）宽度的分段数，默认值是1。
  • heightSegments — （可选）高度的分段数，默认值是1。
  • depthSegments — （可选）深度的分段数，默认值是1。
const cubeGeometry = new THREE.BoxGeometry();

（6）设置材质

这里使用的是基础网格材质(MeshBasicMaterial)，以简单着色（平面或线框）方式来绘制几何体，不受光照的影响。使用color属性为几何体着色，默认值为白色 (0xffffff)

const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00})

（7）创建物体

根据几何体、材质创建物体。Mesh表示基于以三角形为polygon mesh（多边形网格）的物体的类。把几何体与材料融合就得到了网格，网格才是我们真正渲染的东西。
用法：Mesh( geometry : BufferGeometry, material : Material )

  • geometry（可选）：BufferGeometry的实例，默认值是一个新的BufferGeometry。
  • material （可选）：一个Material，或是一个包含有Material的数组，默认是一个新的MeshBasicMaterial。
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)

（8）将几何体添加到场景

scene.add(cube)

5.渲染场景

场景写完之后，需要进行渲染。

（1）初始化渲染器

这里使用的是WebGL1Renderer，该版本的渲染器会强制使用 WebGL 1 渲染上下文。注意：自r118起，WebGLRenderer会自动使用 WebGL 2 渲染上下文。

const renderer = new THREE.WebGL1Renderer()
console.log(renderer)//renderer中有一个canvas对象，就是我们看到的画布内容

（2）设置渲染的尺寸大小

renderer.setSize(window.innerWidth ,window.innerHeight)

（3）将webgl渲染的canvas内容添加到body

document.body.appendChild(renderer.domElement)

（4）使用渲染器通过相机将场景渲染进来

创建一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环。使用requestAnimationFrame时，当用户切换到其它的标签页时会暂停，不会浪费用户处理器资源，也不会损耗电池的使用寿命。

function render(){
	renderer.render(scene,camera)
	//渲染下一帧的就会调用
	requestAnimationFrame(render)
}
render()

6.展示1（几何体静止）

7.创建轨道控制器

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。
用法：OrbitControls( object : Camera, domElement : HTMLDOMElement )

  • object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。

  • domElement: 用于事件监听的HTML元素。

//导入控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
//创建轨道控制器
const controls =  new OrbitControls(camera,renderer.domElement);

8.展示2（几何体可旋转）

四、源码

main.js中的源码如下

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

console.log(THREE)
//创建场景
const scene = new THREE.Scene();
//创建相机(角度，宽高比，，)
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();
//设置材质
const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00})

//根据几何体,材质创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
// 将几何体添加到场景
scene.add(cube)

//初始化渲染器
const renderer = new THREE.WebGL1Renderer()

//设置渲染的尺寸大小
renderer.setSize(window.innerWidth ,window.innerHeight)
console.log(renderer)//renderer中有一个canvas对象

// 将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)
	//渲染下一帧的就会调用
	requestAnimationFrame(render)
}
render()
Three创建spanclasstokenjavascript前端开发语言three.js

有关【Three.js基础】创建场景、渲染场景、创建轨道控制器（一）的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  3. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  4. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  5. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  6. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务？ - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. Ruby Readline 在向上箭头上使控制台崩溃 - 2

    当我在Rails控制台中按向上或向左箭头时，出现此错误:irb(main):001:0>/Users/me/.rvm/gems/ruby-2.0.0-p247/gems/rb-readline-0.4.2/lib/rbreadline.rb:4269:in`blockin_rl_dispatch_subseq':invalidbytesequenceinUTF-8(ArgumentError)我使用rvm来管理我的ruby​​安装。我正在使用=>ruby-2.0.0-p247[x86_64]我使用bundle来管理我的gem，并且我有rb-readline(0.4.2)(人们推荐的最少

  9. Ruby 元类 : why three when defined singleton methods? - 2

    让我们计算MRI范围内的类别:defcount_classesObjectSpace.count_objects[:T_CLASS]endk=count_classes用类方法定义类:classAdefself.foonilendend然后运行:putscount_classes-k#=>3请解释一下，为什么是三个？ 最佳答案 查看MRI代码，每次你创建一个Class时，在Ruby中它是Class类型的对象，ruby会自动为这个新类创建“元类”类，这是另一个单例类型的Class对象。C函数调用(class.c)是:rb_define

  10. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

随机推荐