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

news2025/1/19 22:07:24

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🍉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】

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

leetcode代码记录（打家劫舍 III

leetcode代码记录（打家劫舍 III

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 小偷又发现了一个新的可行窃的地区。这个地区只有一个入口&#xff0c;我们称之为 root 。 除了 root 之外&#xff0c;每栋房子有且只有一个“父“房子与之相连。一番侦察之后&#xf…
阅读更多...
红黑树介绍与模拟实现（insert+颜色调整精美图示超详解哦）

红黑树介绍与模拟实现（insert+颜色调整精美图示超详解哦）

红黑树 引言红黑树的介绍实现结点类insert搜索插入位置插入调整当parent为gparent的左子结点当parent为gparent的右子结点 参考源码测试红黑树是否合格总结 引言 在上一篇文章中我们认识了高度平衡的平衡二叉树AVL树&#xff1a;戳我看AVL树详解哦 &#xff08;关于旋转调整的…
阅读更多...
Sealos 一键部署FastGPT的解决方案

Sealos 一键部署FastGPT的解决方案

&#x1f9d9;‍♂️ 诸位好&#xff0c;吾乃斜杠君&#xff0c;编程界之翘楚&#xff0c;代码之大师。算法如流水&#xff0c;逻辑如棋局。 &#x1f4dc; 吾之笔记&#xff0c;内含诸般技术之秘诀。吾欲以此笔记&#xff0c;传授编程之道&#xff0c;助汝解技术难题。 &#…
阅读更多...
1.数据结构和算法

1.数据结构和算法

文章目录 数据结构逻辑结构集合结构线性结构树形结构图形结构 物理结构顺序存储结构链式存储结构 算法基本特性目标 总结数据结构总结算法总结 数据结构 「数据结构」指的是&#xff1a;数据的组织结构&#xff0c;用来组织、存储数据。 逻辑结构 逻辑结构&#xff08;Logic…
阅读更多...
解决oracle数据库乱码

解决oracle数据库乱码

解决oracle数据库乱码 [oraclep19cstd dbca]$ vim ~/.bash_profile #再文件末尾加上 export NLS_LANGAMERICAN_AMERICA.AL32UTF8[oraclep19cstd dbca]$ source ~/.bash_profile [oraclep19cstd dbca]$ sqlplus / as sysdba
阅读更多...
Spring声明式事务以及事务传播行为

Spring声明式事务以及事务传播行为

Spring声明式事务以及事务传播行为 Spring声明式事务1.编程式事务2.使用AOP改造编程式事务3.Spring声明式事务 事务传播行为 如果对数据库事务不太熟悉&#xff0c;可以阅读上一篇博客简单回顾一下&#xff1a;MySQL事务以及并发访问隔离级别 Spring声明式事务 事务一般添加到…
阅读更多...
安装Docker（CentOS）

安装Docker（CentOS）

Docker 分为 CE 和 EE 两大版本。CE 即社区版&#xff08;免费&#xff0c;支持周期 7 个月&#xff09;&#xff0c;EE 即企业版&#xff0c;强调安全&#xff0c;付费使用&#xff0c;支持周期 24 个月。 Docker CE 分为 stable test 和 nightly 三个更新频道。 官方网站上…
阅读更多...
212 基于matlab的双稳态随机共振的算法

212 基于matlab的双稳态随机共振的算法

基于matlab的双稳态随机共振的算法&#xff0c;分析信噪比随系统参数a,b及乘性噪声和加性噪声的增益变化曲线&#xff0c;60个数据样本可供选择。程序已调通&#xff0c;可直接运行。 212 双稳态随机共振 信噪比增益变化曲线 - 小红书 (xiaohongshu.com)
阅读更多...
【SQL Server的详细使用教程】

【SQL Server的详细使用教程】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
【.NET全栈】.NET全栈学习路线

【.NET全栈】.NET全栈学习路线

一、微软官方C#学习 https://learn.microsoft.com/zh-cn/dotnet/csharp/tour-of-csharp/ C#中的数据类型 二、2021 ASP.NET Core 开发者路线图 GitHub地址&#xff1a;https://github.com/MoienTajik/AspNetCore-Developer-Roadmap/blob/master/ReadMe.zh-Hans.md 三、路线…
阅读更多...
书生浦语训练营2期-第二节课笔记作业

书生浦语训练营2期-第二节课笔记作业

目录 一、前置准备 1.1 电脑操作系统&#xff1a;windows 11 1.2 前置服务安装&#xff08;避免访问127.0.0.1被拒绝&#xff09; 1.2.1 iis安装并重启 1.2.2 openssh安装 1.2.3 openssh服务更改为自动模式 1.2.4 书生浦语平台 ssh配置 1.3 补充&#xff08;前置服务ok…
阅读更多...
电池二次利用走向可持续大循环周期的潜力和挑战（第一篇）

电池二次利用走向可持续大循环周期的潜力和挑战（第一篇）

一、背景 当前&#xff0c;气候变化是全球可持续发展面临的重大挑战。缓解气候变化最具挑战性的目标是在本世纪中期实现碳中和&#xff08;排放量低到足以被自然系统安全吸收&#xff09;&#xff0c;其中电动汽车&#xff08;EV&#xff09;的引入是一项关键举措。电动汽车在…
阅读更多...
小林coding图解计算机网络|基础篇01|TCP/IP网络模型有哪几层？

小林coding图解计算机网络|基础篇01|TCP/IP网络模型有哪几层？

小林coding网站通道&#xff1a;入口 本篇文章摘抄应付面试的重点内容&#xff0c;详细内容还请移步&#xff1a; 文章目录 应用层(Application Layer)传输层(Transport Layer)TCP段(TCP Segment) 网络层(Internet Layer)IP协议的寻址能力IP协议的路由能力 数据链路层(Link Lay…
阅读更多...
每日一题：用c语言中指针实现除2操作

每日一题：用c语言中指针实现除2操作

目录 一、要求 二、实现代码 三、实现结果 四、关于指针的相关知识 一、要求 二、实现代码 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> void change(int *i) {*i*i/2; }int main() {int i;printf("请您输入一个整数&#xff1a;");scanf(&quo…
阅读更多...
LC 111.二叉树的最小深度

LC 111.二叉树的最小深度

111. 二叉树的最小深度 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明&#xff1a; 叶子节点是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a; root [3,9,20,null,null,15,7] 输出&#xff1a;…
阅读更多...
LeetCode-124. 二叉树中的最大路径和【树 深度优先搜索 动态规划 二叉树】

LeetCode-124. 二叉树中的最大路径和【树 深度优先搜索 动态规划 二叉树】

LeetCode-124. 二叉树中的最大路径和【树 深度优先搜索 动态规划 二叉树】 题目描述&#xff1a;解题思路一&#xff1a;递归。return max(max(l_val, r_val) node.val, 0)解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 二叉树中的 路径 被定义为一条…
阅读更多...
景联文科技提供高质量医疗健康AI大模型数据

景联文科技提供高质量医疗健康AI大模型数据

医疗行业是典型的知识和技术密集型行业&#xff0c;其发展水平直接关系到国民健康和生命质量。 医疗健康AI大模型&#xff0c;作为人工智能的一个分支&#xff0c;能够通过学习大量的数据来生成新的数据实例&#xff0c;在医药研发、医学影像、医疗文本分析等都有广泛的应用前景…
阅读更多...
基于单片机的无线红外报警系统

基于单片机的无线红外报警系统

**单片机设计介绍&#xff0c;基于单片机的无线红外报警系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的无线红外报警系统是一种结合了单片机控制技术和无线红外传感技术的安防系统。该系统通过无线红外传感器实…
阅读更多...
满足小体积/低功耗/低成本需求，世强硬创推出CGM解决方案

满足小体积/低功耗/低成本需求，世强硬创推出CGM解决方案

随着CGM的普及与更多具备性价比的国产产品上市&#xff0c;越来越多的企业开始布局CGM市场。 为此全球领先的硬件创新研发和供应服务平台世强硬创面向硬科技企业推出CGM&#xff08;连续血糖监测&#xff09;解决方案。 该方案可一站式解决企业开发需求&#xff0c;包括系统整…
阅读更多...
vivado 系统监控器

vivado 系统监控器

系统监控器 (SYSMON) 模数转换器 (ADC) 用于测量硬件器件上的裸片温度和电压。 SYSMON 可通过片上温度和供电传 感器来监控物理环境。 ADC 可为各种应用提供高精度模拟接口。 请参阅下文 &#xff0c; 以获取有关特定器件架构的更多信息 &#xff1a; • 《 UltraScale …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023