Threes.js入门篇之2 - Hello World

最新推荐文章于 2024-09-18 10:00:00 发布

原创

最新推荐文章于 2024-09-18 10:00:00 发布 · 885 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#WebGL #3D #Three.js #Three.js入门 #HTML5

这篇博客介绍了Three.js的基本概念和绘制流程，包括使用THREE.WebGLRenderer创建渲染器，建立THREE.Scene场景管理器，生成THREE.PerspectiveCamera相机，并将它们结合进行渲染。通过示例代码展示了如何在HTML5 Canvas上创建3D图形。

与OpenGL一样，Three.js 符合右手坐标系，X轴向右，Y轴向上，Z轴朝外：

Three.js 的绘制流程可以描述为：

1. 生成 渲染器 - THREE.WebGLRenderer，并绑定Canvas绘图画布

2. 建立 场景管理器 - THREE.Scene，管理场景对象（场景树）

生成场景对象THREE.mesh，添加到场景管理器

3. 创建 相机 - THREE.PerspectiveCamera，该相机支持透视投影

将相机添加到场景管理器

4. 渲染器 调用 场景器管理器 和相机，执行渲染操作

参考代码如下（run 一下看看效果吧，可以调整下相机位置 - 比如z值，看看目标大小如何变化）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Hello World! - linol</title>
    <script type="text/javascript

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

linolzhang

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

读取保存npy文件

ddana_a的博客

09-14

585

参考

Three.js - 透视相机（PerspectiveCamera）（三）

小小的前端

04-25

1万+

简介在three.js中，摄像机的作用就是不断的拍摄我们创建好的场景，然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景，就需要修改摄像机的位置来拍摄场景。本文详细介绍的是透视相机（PerspectiveCamera）它是用来模拟人眼所看到的景象，它也是3D场景的渲染中使用得最普遍的投影模式。透视相机(PerspectiveCamera) 根据视锥的范围给渲染器提供需要渲染的场景范围。实例化new THREE.PerspectiveCamera() 接受4个参数来确认视锥的范围。只要在视锥范围内

参与评论您还未登录，请先登录后发表或查看评论

【ThreeJS基础教程-初识Threejs】1.5 Threejs透视相机和正交相机介绍

qq_42760477的博客

10-17

2709

ThreeJS基础教程：Threejs透视相机和正交相机介绍，本文主要介绍两个在Threejs常用的相机

Three.js相机参数及Z-Fighting问题的解决方案

新缸中之脑

08-30

1179

更糟糕的是，默认情况下靠近相机的精度是详细的，而远离相机的精度是粗略的。例如，将 fov 调整到 10 或 20 左右，你将很容易看到物体的正面，或者实际上所有内容都放大到屏幕上，而如果将 fov 设置为 100 中的 90 左右，则场景中的所有内容都会移得很远。现在，请注意，如果想绘制一个距离很远的巨大场景而不破坏场景中的任何对象，你可以尝试一下还有一个替代选项。当然，你也可以设置近平面和远平面的任意值，但如果近远范围很大，那么近距离时会出现更多的 z-fighting，而如果范围太小，则会破坏场景。

Three.js机器人与星系动态场景：实现3D渲染与交互式控制

07-01

1995

使用Three.js库构建了一个交互式的3D场景。组件中创建了一个机器人模型，包括头部、眼睛、触角、身体和四肢，以及两个相同的机器人实例以实现动态效果。场景中还加入了粒子效果，模拟星系环境，增强了视觉效果。通过OrbitControls，用户可以对机器人进行旋转控制。组件在渲染时会根据用户界面的变化动态调整渲染，并在指定的div容器中显示。整体上，这个组件提供了一个基础的3D动画展示和用户交互的框架。

Threes.js入门篇之3 - 场景与相机

跟随技术的脚步-linolzhang的专栏

03-10

2189

• Three.js 的场景 THREE.Scene 执行场景树管理，场景的创建只需要一句话： var scene = new THREE.Scene(); 场景常用操作包含： 1.scene.add(obj); // 在场景中添加物体 2.scene.remove(obj); //

Threes.js入门篇之4 - World View Projection

跟随技术的脚步-linolzhang的专栏

03-10

1351

在三维世界，一个模型要想最终呈现到一个照片上，需要经过三次矩阵变换，这三个矩阵分别是：模型矩阵（World） - 视图矩阵（View）- 投影矩阵（Projection）一. 模型矩阵将局部坐标系下的模型坐标（相对于自身原点的坐标）转化到世界坐标系下，通常称为 World Matrix。可以理解为把多个不同坐标系下的

Threes.js入门篇之9 - 全景图

跟随技术的脚步-linolzhang的专栏

03-10

2015

全景图是一个当下非常流行的展示方式，在 VR | AR领域有广泛应用。在三维内的全景图通常是根据鼠标事件调整摄像机位置（在包围球内旋转），其基本思路一致，包围球可以通过球面、立方体来实现，在几何上面贴上全景图纹理，一个典型的全景纹理图可能是下面这几种：或者也有可能是多副图的形式，组成一个Cube（根据实际的方式会有所不同）。概念

Threes.js入门篇之6 - 场景漫游

跟随技术的脚步-linolzhang的专栏

03-10

3361

THREE.js 支持两种形式的漫游，第一人称漫游（First Person）和飞行（Fly），可以分别参考 example 下的 “misc_fps.html” 和 “misc_controls_fly.html”。一. 第一人称漫游例子中的效果是这样的，通过【ASDW】控制平移，通过【←↑↓→】控制朝向（try 一下）。漫游主要是通过 ca

Threejs 学习之旅(三)

Florenza的博客

03-19

1433

PerspectiveCamera 透视相机例: const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height,1,1000); 构造函数 PerspectiveCamera( fov :Number, aspect :Number, near :Number, far :Number) fov — 摄像机视锥体垂直视野角度 aspect — 摄像机视锥体长宽比 near — 摄像机视锥体近端面 ...

ThreeJS入门（007）：PerspectiveCamera 知识详解，示例代码

最新发布

大剑师兰特的GIS世界

09-18

1889

THREE.PerspectiveCamera` 类是 Three.js 中用于创建透视摄像机的一个类。透视摄像机模拟了人眼和普通照相机的视角效果，即远的物体看起来比近的小。这对于模拟真实的3D环境非常有用。

libGDX 3D 的基本使用

码农

11-10

1351

上面代码中，我们创建了一个 PerspectiveCamera 摄像机，其视野为67度（这是常用的），并将纵横比设置为当前的宽度和高度。在render方法中，我们清屏，调用 modelBatch.begin(cam)，渲染我们的ModelInstance，然后调用modelBatch.end() 完成渲染。默认情况下，这是在（0,0,0），所以我们只需创建一个ModelInstance，它应该在（0,0,0）处呈现。首先，我们需要添加一个摄像机，摄像机可以从某个角度查看我们创建的3D场景。

透视相机（PerspectiveCamera）

liuhao9999的博客

12-08

6479

透视相机（PerspectiveCamera）这一摄像机使用perspective projection（透视投影）来进行投影。这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。示例 var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); scene.add( camera ); 构造器 PerspectiveCamera( fov :Number, aspect :.

three.js创建相机，正投影相机-OrthographicCamera和透视相机-PerspectiveCamera参数详解(vue中使用three.js06)

点燃火柴的博客

09-02

4903

相机介绍与相机示例一、相机介绍1.正投影相机-OrthographicCamera2.透视相机-PerspectiveCamera二、相机参数演示示例1.示例效果2.示例代码一、相机介绍 Three.js 库中提供了两种不同的相机，正投影相机和透视相机 1.正投影相机-OrthographicCamera 通过正投影相机渲染出来的物体的尺寸都一样，不会因为观察距离的远近而出现近大远小的情况创建正投影相机的方式 var camera = new THREE.OrthographicCamera( left

String s="Hello"; s=s+“world！”;这两行代码执行后，原始的String对象中的内容到底变了没有？

laowang2915的博客

06-22

5154

String s="Hello"; s=s+“world！”;这两行代码执行后，原始的String对象中的内容到底变了没有？没有，因为String类是不可变类

Struts 2 Hello World(注释版本)

有天你会让我妒忌的

03-21

229

Struts2 注解概念Struts2注解是由Struts 2的约定插件的支持，所以，必须要了解其背后的“扫描方法”和“命名转换”机制的魔力。1. 扫描方法SetupIn order to use the Convention plugin, you first need to add the JAR file to the WEB-INF/lib directory of your applic...

python练习题2：Hello World II （垂直输出）