Three.js学习3:第一个Three.js页面

一、一图看懂Three.js 坐标

这个没什么好说的,只是需要注意颜色。在 Three.js 提供的编辑器中,各种物体的坐标也这样的色彩:

  • 红色:x 轴

  • 绿色:y 轴

  • 蓝色:z 轴

Three.js 提供的编辑器可以在本地 Three.js 文档中的 editor 目录里访问到:

http://localhost:9000/editor/

如果不知道怎么做,可以参考我的这篇博文:

Three.js学习1:threejs简介及文档本地部署-CSDN博客

Three.js 的坐标单位不是像素。因为考虑到项目的内容,有些项目长度单位是米,甚至是公里都有可能。所以,坐标的单位,我们一般就称为"单位"。根据项目需要,它可以是毫米,厘米,分米,公里等。  

二、Three.js 的基本组件

借用一张网图:

1. 场景 Sence

场景是所有 3D 物体的容器,可以理解为要展示的 3D 世界。

所有要展示的内容都要放入场景中,包括 Three.js 提供的立方体、圆球、圆柱之类的,也包括外部加载的 3D 模型,以及灯光相机等等。

// 创建3D场景对象Scene
const scene = new THREE.Scene();
// 通过 add 方法可以添加内容到场景中。
scene.add( 物品 )

2. 相机 Camera

相机决定了场景中哪个角度的 3D 物体会显示出来。

相机就像人的眼睛,人站在不同位置,抬头或者低头都能够看到不同的物体。场景只有一种,但是相机却有很多种。只要设置相机不同的参数,就能够让相机产生不一样的效果。

如,透视相机 PerspectiveCamera。本质上就是在模拟人眼观察这个世界的规律,远小近大,也是用的比较多的相机。

// 创建一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 100);
scene.add( camera );            // 添加相机到场景中

其参数分别为:

  1. fov :摄像机视锥体垂直视野角度,以角度来表示。默认值是50

  2. aspect :摄像机视锥体宽高比:默认值为 1,一般用渲染器到宽高比

  3. near:摄像机视锥体近截面,默认值是0.1

  4. far:摄像机视锥体远截面,默认值是2000

只有在视锥体范围内,近截面和远截面之间的物体才会被渲染出来。

 Three.js 编辑器里视锥体的样子:

因为,相机默认在原点上,物体也默认在原点上。所以,要看到物品,要把相机往后挪动位置,也既只修改 z 轴位置。

// 调整相机位置 x,y,z
camera.position.z = 0;
camera.position.x = 0;
camera.position.y = 10;

// 或者 
camera.position.set(0,0,10);

3. 物体

物体分为两部分:物体形状,材质。它们合在一起,形成一个(网格)物体

(网格)物体添加到场景里就可以看到它了。

(1)物体形状:几何体 geometry

Three.js提供了各种各样的几何体API,用来表示三维物体的几何形状。

文档搜索关键词 geometry 可以看到 three.js 提供各种几何体相关API,具体使用方法,可以参考文档。

如,创建一个立方体。

//创建一个立方体几何对象Geometry
const geometry = new THREE.BoxGeometry(1, 1, 1);  // 长宽高都一样,正方体

(2)物体外观:材质 Material

材质可以简单理解为物体的皮肤。

如果想定义物体的外观效果,比如颜色,就需要通过材质Material相关的 API 实现。

文档搜索关键词 material 可以看到 three.js 提供各种材质相关API,具体使用方法,也可以参考文档。

//创建一个基础材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
});

(3)物体:网格对象 Mesh

几何体材质组合起来,创建一个物体,也既网格对象

// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格对象 Mesh
// 可以设置网格对象在三维空间中的位置坐标,默认是坐标原点
mesh.position.set(0,10,0);
//通过场景的add方法把网格对象 mesh 添加到场景中
scene.add(mesh);

4. 渲染器 Renderer

渲染器将场景和相机中的 3D 对象渲染到屏幕上。Three.js 提供了多个渲染器,包括 WebGLRenderer 、CSS3DRenderer、SVGRenderer 等。其中,WebGLRenderer 用的最多,它的本质就是一个 Canvas 标签。

Three.js 同时提供了其他几种渲染器,当用户所使用的浏览器过于老旧,或者由于其他原因不支持 WebGL 时,可以使用这几种渲染器进行降级。

渲染器到作用就是根据相机镜头内容,画出 3D 场景,并把结果呈现在 canvas 标签里。所以,还要把渲染器(canvas标签)添加到页面中。

const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸,也就是 canvas 标签尺寸。这里设置为窗口大小。
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.render(scene, camera); //执行渲染操作
// 挂载到页面。会给页面增加一个 canvas 标签,该标签就会展现 3D 物体
document.body.appendChild(renderer.domElement);

三、第一个 3D 页面

这个案例来自官方文档,虽然简单,但是把前面说的 Three.js 基本组件简单引用了一下。

大家可以反复练习。

本案例是做了一个旋转的 3D 立方体。其中,动画运用了 requestAnimationFrame ,去反复执行渲染操作。每次渲染之前都让立方体旋转了一点点。

1.html:

 <script src="js/myjs.js" type="module"></script>

my.js:

import * as THREE from "./three.module.min.js";

// 场景
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xEEEEEE);  // 设置场景背景色

// 物体:包含几何形 geometry 和 材质(皮肤) meterial 两部分
const geometry = new THREE.BoxGeometry(1,1,1);  // 立方体
const meterial = new THREE.MeshBasicMaterial({  
    color: "#ff0000"
});
const mesh = new THREE.Mesh( geometry, meterial);
scene.add( mesh );              // 添加物体到场景中

// 相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 100);
camera.position.set(0,0,10);    // 修改相机位置
camera.lookAt( mesh.position ); // 相机镜头盯着物体
scene.add( camera );            // 添加相机到场景中

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );   // 设置渲染器(canvas标签)大小
document.body.appendChild( renderer.domElement );            // 添加渲染器(canvas标签)到页面中

function animateFun(){
    mesh.rotation.x += 0.01;   // 旋转物体
    mesh.rotation.y += 0.01;
    // 渲染
    renderer.render( scene, camera);
    requestAnimationFrame(animateFun);
}
animateFun();

运行 1.html,可以看到一个旋转的立方体。

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

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

相关文章

python算法与数据结构(搜索算法和拓扑排序算法)---广度优先搜索和拓扑排序

广度优先搜索BFS 定义&基本内容 广度优先是按照层次由近及远的进行搜索&#xff0c;在当前层次所有可及节点都搜索完毕后才会继续往下搜索&#xff0c;其本质就是寻找从起点到终点的最短路程。 树的广度优先搜索 树的广度优先遍历&#xff0c;可以看成是层序遍历。 访问…

java数据结构与算法刷题-----LeetCode15. 三数之和

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 解题思路 和LeetCode1.两数之和一样&#xff0c;但是这道题边界条件更多。…

基于协同过滤的个性化电影推荐系统分析设计python+flask

本系统为用户而设计制作个性化电影推荐管理&#xff0c;旨在实现个性化电影推荐智能化、现代化管理。本个性化电影推荐自动化系统的开发和研制的最终目的是将个性化电影推荐的运作模式从手工记录数据转变为网络信息查询管理&#xff0c;从而为现代管理人员的使用提供更多的便利…

2401Idea用GradleKotlin编译Java控制台中文出乱码解决

解决方法 解决方法1 在项目 build.gradle.kts 文件中加入 tasks.withType<JavaCompile> {options.encoding "UTF-8" } tasks.withType<JavaExec> {systemProperty("file.encoding", "utf-8") }经测试, 只加 tasks.withType<…

谷粒商城【成神路】-【4】——分类维护

目录 1.删除功能的实现 2.新增功能的实现 3.修改功能的实现 4.拖拽功能 1.删除功能的实现 1.1逻辑删除 逻辑删除&#xff1a;不删除数据库中真实的数据&#xff0c;用指定字段&#xff0c;显示的表示是否删除 1.在application.yml中加入配置 mybatis-plus:global-config:…

俩种方法解决 VScode中 NPM 脚本消失,NPM 脚本未显示在资源管理器侧栏中

npm脚本是npm包管理器的一个功能&#xff0c;允许开发者在package.json文件中定义一系列命令脚本&#xff0c;用于执行各种开发任务。 今天打开准备运行的时候发现找不到NPM脚本了&#xff0c;左侧的一栏完全没有显示&#xff0c;在网上查阅了很多资料后总结出俩个方法可以用来…

寒假作业2月3号

第二章 引用内联重载 一&#xff0e;选择题 1、适宜采用inline定义函数情况是&#xff08;C&#xff09; A. 函数体含有循环语句 B. 函数体含有递归语句 C. 函数代码少、频繁调用 D. 函数代码多、不常调用 2、假定一个函数为A(int i4, int j0) {;}, 则执行“A (1);”语句…

解密二进制世界:Hex-Rays IDA Pro forMac/win交互式反汇编工具

在当今数字化时代&#xff0c;软件和硬件的安全性成为了重中之重。为了保护软件和硬件免受黑客和恶意攻击的威胁&#xff0c;人们需要了解和分析代码的内部结构和工作原理。而Hex-Rays IDA Pro作为一款强大的交互式反汇编工具&#xff0c;为安全专业人士提供了解密二进制世界的…

Juc07_乐观锁和悲观锁、公平锁和非公平锁、递归锁(可重入锁)、死锁及排查、自旋锁

1、 乐观锁和悲观锁 ①. 悲观锁(synchronized关键字和Lock的实现类都是悲观锁) 什么是悲观锁&#xff1f;认为自己在使用数据的时候一定有别的线程来修改数据&#xff0c;因此在获取数据的时候会先加锁&#xff0c;确保数据不会被别的线程修改适合写操作多的场景&#xff0c;…

lua 语法介绍与 NGINX lua 高级用法实战操作

文章目录 一、概述二、lua 安装三、lua 语法1&#xff09;lua 数据类型2&#xff09;lua 变量3&#xff09;lua 拼接字符串4&#xff09;lua 循环5&#xff09;lua 函数6&#xff09;lua 条件控制7&#xff09;lua 库模块 四、NGINX lua 高级用法 一、概述 lua是一种轻量小巧的…

【AI绘画UI+Windows部署】Fooocus:Controlnet原作者结合了sd的开源和Midjourney重新设计的UI

代码&#xff1a;https://github.com/lllyasviel/Fooocus windows一键启动包下载&#xff1a;https://github.com/lllyasviel/Fooocus/releases/download/release/Fooocus_win64_2-1-831.7z B站视频教程&#xff1a;AI绘画入门神器&#xff1a;Fooocus | 简化SD流程&#xff0c…

Boosting semantic human matting with coarse annotations

前向推理在modelscope中开源了&#xff0c;但是训练没开源&#xff0c;且是基于TensorFlow的&#xff0c;复现起来是比较麻烦的。 1.Introduction 分割技术主要集中在像素级二元分类&#xff0c;抠图被建模为前景图像F和背景图像B的加权融合&#xff0c;大多数matte方法采用指…

不做中位剧的腾讯,能靠精品撑起长视频会员吗?

回顾腾讯视频的2023年,马化腾用“厚积薄发”来形容。 在腾讯年会上,马化腾回顾了过去一年长视频业务板块的发展情况,同时也清晰地提出了未来的规划,总结来说就是以下三点: 1、《繁花》《三体》《漫长的季节》是腾讯过去一年特别出彩的剧集,几部大剧撑起了长视频会员业务…

设计模式——2_1 命令(Command)

文章目录 定义图纸一个例子&#xff1a;空调和他的遥控器只有控制面板的空调遥控器可以撤销的操作 碎碎念命令和Runnable命令和事务 定义 把请求封装成一个对象&#xff0c;从而使你可以用不同的请求对客户进行参数化&#xff0c;对请求排队或记录请求日志&#xff0c;以及支持…

Spring Bean 生命周期常见错误

虽然说 Spring 容器上手简单&#xff0c;可以仅仅通过学习一些有限的注解&#xff0c;即可达到快速使用的目的。但在工程实践中&#xff0c;我们依然会从中发现一些常见的错误。尤其当你对 Spring 的生命周期还没有深入了解时&#xff0c;类初始化及销毁过程中潜在的约定就不会…

超越现实,体验无限可能——VMware Workstation 的魅力之旅

随着科技的飞速发展&#xff0c;虚拟化技术已经深入人心&#xff0c;成为现代人工作与学习的必备工具。在这其中&#xff0c;VMware Workstation以其卓越的性能和稳定的运行环境&#xff0c;成为众多电脑爱好者和专业人士的首选。今天&#xff0c;让我们一起探索VMware Worksta…

初探unity中的ECS

ECS是一种软件架构模式&#xff0c;就像MVC一样。ECS最早在游戏《守望先锋》中提及到的相关链接。ECS具体是指实体&#xff08;entity&#xff09;、 组件&#xff08;component&#xff09;和系统&#xff08;system&#xff09;&#xff1a; 实体&#xff1a;实体是一个ID&a…

docker踩坑记录

踩坑记录 1.1 后台启动容器&#xff0c;实际没有启动 现象&#xff1a; 后台启动centos&#xff0c;结果执行docker ps命令&#xff0c;容器没启动。 原因&#xff1a; docker是以容器启动的&#xff0c;必须要有个前台进程&#xff0c;若是全部都是后台deamon守护进程&…

C语言第十七弹---指针(一)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 指针 1、内存和地址 1.1、内存 2、指针变量和地址 2.1、取地址操作符&#xff08;&&#xff09; 2.2、指针变量和解引用操作符&#xff08;*&#xff09;…

数字巨轮航行大数据海洋:数据可视化引领时代潮流

在大数据时代的潮流中&#xff0c;数据可视化如同一艘畅行无阻的科技巨轮&#xff0c;引领我们穿越数字浩瀚的大海&#xff0c;使我们在信息的航程中游刃有余。下面我就从可视化从业者的角度&#xff0c;来简单说说数据可视化是如何帮助我们在大数据时代畅行无阻的。 数据可视化…