Three.js——scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js🍖数据结构与算法体系教程

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

内容参考链接
WebGL专栏WebGL 入门
Three.js（一）创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化

文章目录

    • 前言
    • 一、scene 场景
    • 二、几何体位置、旋转、缩放
    • 三、正射投影相机
    • 四、透视投影相机
    • 总结

前言

大家好，这里是前端杂货铺。

上篇文章我们学习了 创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化，接下来继续我们 three.js 的学习！

在学习的过程中，如若需要深入了解或扩展某些知识，可以自行查阅 => three.js官方文档

一、scene 场景

在上篇文章中，我们已经使用过它，scene 场景能够让我们在什么地方、摆放什么东西来交给 three.js 来渲染，这是我们放置物体、灯光和摄像机的地方。

接下来，我们熟悉几个 scene 的常用 方法和属性。

方法名用途
add()向场景中添加对象
getObjectByName()通过命名获取对象
remove()从场景中移除对象
属性名用途
children返回场景中所有对象的列表
fog设置场景中的雾化效果
overrideMaterial强制场景中所有对象使用相同材质

下面代码的场景中，我们添加了两个物体：立方体和球体。

我们使用 getObjectByName() 方法实现获取球体并放大球体为原来的两倍。使用 remove 方法移除了球体。

我们使用 chidren 属性查看场景中的对象列表（由于我们删除了球体，所有只有立方体和聚光灯）。使用 fog 属性在场景中添加雾化效果。使用 overrideMaterial 强制场景中所有对象使用同一材质。

<!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>
    <script src="../lib/three/three.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机 视野角度FOV、长宽比、近截面、远截面
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        // 设置相机位置
        camera.position.set(0, 0, 20);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加立方体
        const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
        // 创建立方体材质
        const cubeMaterial = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            wireframe: false
        });

        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // 添加到场景
        scene.add(cube);

        // 添加球体
        const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
        // 创建球体材质
        const sphereMatrial = new THREE.MeshBasicMaterial({
            color: 0x00ff00,
            wireframe: true
        })
        const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);

        // 给球体命名
        sphere.name = 'sphere';

        // 添加到场景
        scene.add(sphere);

        // 通过命名放大球体为原来的两倍
        scene.getObjectByName("sphere").scale.set(2, 2, 2);

        // 添加灯光
        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-10, 10, 10);
        scene.add(spotLight);

        // 查看场景中所有对象列表
        console.log(scene.children);

        // 设置场景中的雾化效果
        scene.fog = new THREE.Fog(0xffffff, 1, 50);

        // 移除立方体
        scene.remove(sphere);

        // 强制场景中所有对象使用相同材质
        scene.overrideMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000});

        const animation = () => {
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            sphere.rotation.x += 0.01;
            sphere.rotation.y += 0.01;
            // 渲染
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }

        animation();
    </script>
</body>

</html>

在这里插入图片描述

二、几何体位置、旋转、缩放

position 控制物体的位置、rotation 控制物体的旋转、scale 控制物体的缩放。

下面的代码，我们使用 单个赋值 和 方法赋值 的方式来操作几何体。

<!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>
    <script src="../lib/three/three.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机 视野角度FOV、长宽比、近截面、远截面
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        // 设置相机位置
        camera.position.set(0, 0, 20);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加立方体
        const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
        // 创建立方体材质
        const cubeMaterial = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            wireframe: false
        });

        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // 单个赋值 效果同下
        // // 位置 x => 3
        // cube.position.x = 3;
        // // 旋转 45 度
        // cube.rotation.x = 0.125 * Math.PI;
        // cube.rotation.y = 0.125 * Math.PI;
        // cube.rotation.z = 0.125 * Math.PI;
        // // x 放大 2 倍
        // cube.scale.x = 2;

        // 通过方法赋值
        cube.position.set(3, 0, 0);
        cube.rotation.set(0.125 * Math.PI, 0.125 * Math.PI, 0.125 * Math.PI);
        cube.scale.set(2, 1, 1);

        // 添加到场景
        scene.add(cube);

        // 渲染
        renderer.render(scene, camera);
    </script>
</body>

</html>

在这里插入图片描述

三、正射投影相机

正射投影相机 new THREE.OrthographicCamera（渲染的图片中物体的大小都保持不变），它接收六个参数：

  1. left：左边界
  2. right：右边界
  3. top：上边界
  4. bottom：下边界
  5. near：近面
  6. far：远面
<!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>
    <script src="../lib/three/three.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
	 	// 正射投影相机
        const camera = new THREE.OrthographicCamera(-10, 10, 10, -10, 1, 1000)
        // 设置相机位置
        camera.position.set(0, 0, 20);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加立方体
        const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
        // 创建立方体材质
        const cubeMaterial = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            wireframe: false
        });

        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        cube.rotation.set(0.125 * Math.PI, 0.125 * Math.PI, 0.125 * Math.PI);

        // 添加到场景
        scene.add(cube);

        // 渲染
        renderer.render(scene, camera);
    </script>
</body>

</html>

在这里插入图片描述

四、透视投影相机

正射投影相机 new THREE.PerspectiveCamera （用来模拟人眼所看到的景象，近大远小），它接收四个参数：

  1. fov：视角
  2. aspect：宽高比
  3. near：近面
  4. far：远面
<!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>
    <script src="../lib/three/three.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 透视投影相机 视野角度FOV、长宽比、近截面、远截面
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        // 设置相机位置
        camera.position.set(0, 0, 20);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加立方体
        const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
        // 创建立方体材质
        const cubeMaterial = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            wireframe: false
        });

        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        cube.rotation.set(0.125 * Math.PI, 0.125 * Math.PI, 0.125 * Math.PI);

        // 添加到场景
        scene.add(cube);

        // 渲染
        renderer.render(scene, camera);
    </script>
</body>

</html>

在这里插入图片描述

总结

本篇文章我们熟悉了scene场景的一些方法和属性的使用，认识了如何对几何体进行位置、选择和缩放的操作，并简单了解了正射投影相机和透视投影相机。

更多内容扩展请大家自行查阅 => three.js官方文档，真心推荐读一读！！

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

  1. Three.js 官方文档
  2. WebGL+Three.js 入门与实战【作者：慕课网_yancy】

在这里插入图片描述

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

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

相关文章

医院云HIS系统源码，二级医院、专科医院his系统源码，经扩展后能够应用于医联体/医共体

医院云HIS系统源码，二级医院、专科医院his系统源码，经扩展后能够应用于医联体/医共体

基于云计算技术的B/S架构的HIS系统&#xff0c;为医疗机构提供标准化的、信息化的、可共享的医疗信息管理系统&#xff0c;实现医患事务管理和临床诊疗管理等标准医疗管理信息系统的功能。 系统利用云计算平台的技术优势&#xff0c;建立统一的云HIS、云病历、云LIS&#xff0…
阅读更多...
Linux集群部署项目

Linux集群部署项目

目录 一&#xff0c;环境准备 1.1.安装MySQL 1.2.安装JDK 1.3.安装TomCat 1.4.安装Nginx 二&#xff0c;部署 2.1.后台服务部署 2.2.Nginx配置负载均衡及静态资源部署 一&#xff0c;环境准备 1.1.安装MySQL 将MySQL的安装包上传至服务器 查看系统中是否存在mariadb&…
阅读更多...
167.乐理基础-四个偏音、六声、七声、清雅燕乐

167.乐理基础-四个偏音、六声、七声、清雅燕乐

如果到这五线谱还没记住还不认识的话去看102.五线谱-高音谱号与103.五线谱-低音谱号这两个里&#xff0c;这里面有五线谱对应的音名&#xff0c;对比着看 如果不认识调号去看112.五线谱的调号&#xff08;一&#xff09;、113.五线谱的调号&#xff08;二&#xff09;、114.快…
阅读更多...
图片改大小尺寸怎么改？几个修改图片尺寸的方法

图片改大小尺寸怎么改？几个修改图片尺寸的方法

日常生活和工作中&#xff0c;图片的大小和尺寸对于我们的工作和生活都至关重要&#xff0c;因此我们经常需要调整图片的大小。我们都知道压缩图是一款功能强大的图片在线处理工具&#xff0c;那么用它怎么调整图片大小呢&#xff1f;下面就让我们一起来看一下具体的操作步骤。…
阅读更多...
Sora的阅读技术报告

Sora的阅读技术报告

sora的技术报告 走进sorasora的特性sora的介绍sora的实际操作sora的发展安全措施研究技术 走进sora 大家好&#xff0c;我是清风之上。随着人工智能的发展&#xff0c;慢慢的他已经出现在我们生活中的各个角落&#xff0c;其中有API推出的sora&#xff0c;让我们震惊不已&…
阅读更多...
应急响应实战笔记05Linux实战篇（2）

应急响应实战笔记05Linux实战篇（2）

第2篇&#xff1a;捕捉短连接 0x00 前言 ​ 短连接&#xff08;short connnection&#xff09;是相对于长连接而言的概念&#xff0c;指的是在数据传送过程中&#xff0c;只在需要发送数据时&#xff0c;才去建立一个连接&#xff0c;数据发送完成后&#xff0c;则断开此连接…
阅读更多...
多叉树题目：N 叉树的层序遍历

多叉树题目：N 叉树的层序遍历

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;N 叉树的层序遍历 出处&#xff1a;429. N 叉树的层序遍历 难度 4 级 题目描述 要求 给定一个 N 叉树的根结点 root \texttt{root} root&#xf…
阅读更多...
架构之道：架构、结构、中间件、安全性

架构之道：架构、结构、中间件、安全性

对本篇文章中有些此不是很理解的&#xff0c;可以看之前讲解的后端通用技术大全&#xff1a;后端技术大全-CSDN博客 一起食用&#xff0c;效果更加。 一、架构到底是什么 关于架构这个概念很难给出一个明确的定义&#xff0c;也没有一个标准的定义。 硬是要给一个概述&#…
阅读更多...
社交媒体市场：揭示Facebook的商业模式

社交媒体市场：揭示Facebook的商业模式

在数字化时代&#xff0c;社交媒体已经成为人们生活中不可或缺的一部分。Facebook作为全球最大的社交媒体平台之一&#xff0c;其商业模式的运作方式对于了解社交媒体市场的发展趋势和影响力至关重要。本文将深入探讨Facebook的商业模式&#xff0c;剖析其运作机制&#xff0c;…
阅读更多...
ChatGPT 之百万富翁

ChatGPT 之百万富翁

原文&#xff1a;The ChatGPT Millionaire 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 介绍 当我写下这些文字时&#xff0c;ChatGPT 已经成为有史以来增长最快的技术平台 - 仅用 5 天就达到了一百万用户。相比之下&#xff0c;Netflix 用了 3 年&#xff0c;Twit…
阅读更多...
查询SQL server数据库在后台执行过的语句

查询SQL server数据库在后台执行过的语句

查询SQL server数据库在后台执行过的语句 SELECT TOP 30000total_worker_time/1000 AS [总消耗CPU 时间(ms)],execution_count [运行次数],qs.total_worker_time/qs.execution_count/1000 AS [平均消耗CPU 时间(ms)],last_execution_time AS [最后一次执行时间],min_worker_ti…
阅读更多...
机器狗首次阵亡！美国警方披露详情

机器狗首次阵亡！美国警方披露详情

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 那天&#xff0c;唯一的伤亡者是我们的机器狗。 美国警察最新公布一则案件&#xff1a;波士顿…
阅读更多...
Spring API 接口和自定义类来实现AOP（Spring学习笔记十）

Spring API 接口和自定义类来实现AOP（Spring学习笔记十）

1、什么是AOP 全称是 Aspect Oriented Programming 即&#xff1a;面向切面编程。是OOP&#xff08;面向对象编程&#xff09;的延续&#xff0c;也是Spring框架中的一个重要内容&#xff0c;是函数式编程的一种衍生泛型。简单的说他就是把我们程序重复的代码抽取出来&#xf…
阅读更多...
【C++】引用与指针

【C++】引用与指针

​​ &#x1f331;博客主页&#xff1a;青竹雾色间. &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 ✨人生如寄&#xff0c;多忧何为 ✨ 目录标题 前言一.引用&#xff08;Reference&#xff09;二.指针&#xff08;Pointer&#xff09;三. 比较与总结 前…
阅读更多...
随机生成Long全范围数

随机生成Long全范围数

随机生成Long全范围数 前言实现思路主要代码分区随机生成过程案例&#xff1a;随机生成100个数 朴素的比较总结 前言 使用自带的Random.nextLong()函数生成Long型的长整数&#xff0c;范围比较小&#xff0c;如下图。100个随机数没看见10以内的数字。所以考虑实现随机化生成大…
阅读更多...
新质生产力丨zData X 数据库一体机助力财政一体化平台全面升级

新质生产力丨zData X 数据库一体机助力财政一体化平台全面升级

在数字化转型的大潮中&#xff0c;某财政局积极响应国家财政管理现代化的战略部署&#xff0c;启动了财政一体化平台升级改造工程。该项目旨在将财政局内部各部门及其各自独立的业务系统进行全面整合&#xff0c;构建起一个集约化的财政管理平台&#xff0c;力求通过技术创新推…
阅读更多...
【剑指offr--C/C++】JZ31 栈的压入、弹出序列

【剑指offr--C/C++】JZ31 栈的压入、弹出序列

一、题目 二、思路及代码 借助一个辅助栈来模拟入栈过程&#xff0c; ①在入栈之前先判断当前要入栈的元素是否与出栈数组当前元素相同&#xff0c; ② 如果不相同就入栈&#xff1b; ③如果相同就不用入栈了&#xff08;不入栈出栈&#xff09;&#xff0c;然后再依次取出栈的…
阅读更多...
Redis中的复制功能(五)

Redis中的复制功能(五)

心跳检测 概述 在命令传播阶段&#xff0c;从服务器默认会以每秒一次的频率&#xff0c;向主服务器发送命令: REPLCONF ACK < replication_offset >其中replication_offset是从服务器当前的复制偏移量。 发送REPLCONF ACK命令对于主从服务器有三个作用: 1.检测主从服…
阅读更多...
python学习23：python中的列表(list)中的常用方法

python学习23：python中的列表(list)中的常用方法

列表(list)中的常用方法 1.列表中常用的方法主要有如下的方法&#xff1a; 2.代码演示主要常用的方法 查找某元素在列表内的下标索引&#xff1a;list.index(元素&#xff09; start_list [coco, xuanxuan, taotao] # 1.1 查找某元素在列表内的下标索引 index start_list…
阅读更多...
Arcgis研究区图经纬度（南北）切换为英文字体（SN）

Arcgis研究区图经纬度（南北）切换为英文字体（SN）

只在做英文论文研究区图的时候用&#xff0c;平常为了方便还是切换为中文
阅读更多...
最新文章

Copyright @ 2022~2023