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

前端杂货铺2024-04-08 2:38

个人简介

👀个人主页： 前端杂货铺

🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展

📃个人状态： 研发工程师，现效力于中国工业软件事业

🚀人生格言： 积跬步至千里，积小流成江海

🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js🍖数据结构与算法体系教程

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

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

文章目录

前言

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

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

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

一、scene 场景

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

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

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

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

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

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

javascript 复制代码 
<!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 控制物体的缩放。

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

javascript 复制代码 
<!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：远面
javascript 复制代码 
<!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：远面
javascript 复制代码 
<!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】
相关推荐
blammmp24 分钟前
Java：数据结构-枚举
java·开发语言·数据结构
bysking33 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
何曾参静谧37 分钟前
「C/C++」C/C++ 指针篇 之 指针运算
c语言·开发语言·c++
暗黑起源喵42 分钟前
设计模式-工厂设计模式
java·开发语言·设计模式
WaaTong1 小时前
Java反射
java·开发语言·反射
Troc_wangpeng1 小时前
R language 关于二维平面直角坐标系的制作
开发语言·机器学习
王哲晓1 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
努力的家伙是不讨厌的1 小时前
解析json导出csv或者直接入库
开发语言·python·json
fg_4111 小时前
无网络安装ionic和运行
前端·npm
理想不理想v1 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解