Three.js 初阶基础篇（二）

news2024/11/18 22:56:11

系列文章目录

我今天又来了更新了！！！今天主要还是回顾一下昨天的一内容，在昨天的基础上又重新梳理了一下，创建动态3D正方体的流程！！！！！！

文章目录

  • 系列文章目录
  • 一、最终的成果图如下所示：
    • 1.图1如下所示（添加了光源的效果）：
    • 2.图2如下所示（绘制了3个旋转的立方体）：
      • 如下图所示（模糊问题）
      • 解如下所示（解决模糊问题）
  • 二、创建一个透光立方体的步骤如下
      • 第一步：创建DOM，获取DOM，创建renderer渲染器
        • 代码如下所示
      • 第二步：创建摄像机，设置摄像机
        • 代码如下所示
      • 第三步：创建场景、几何图形和材质，设置网格
        • 代码如下所示
      • 第四步：设置渲染render
        • 代码如下所示
      • 第五步：创建的立方体，结果图如下所示
      • 第六步：给立方体添加灯光效果
        • 1.实现灯光效果，添加如下代码
          • 切换材质，设置平行光效果，添加到场景上
          • 代码解释如下图
      • 第七步：添加光源后的结果，如下图所示
  • 三、创建三个透光立方体的步骤如下
    • 1.设置一个创建立方体的工厂函数
    • 2.通过循环的形式给每个立方体添加旋转
    • 3.最终效果图如下
  • 四、一个立方体的完整代码（CODE、code）
  • 五、三个立方体的完整代码（CODE、code）
  • 总结

一、最终的成果图如下所示：

1.图1如下所示（添加了光源的效果）：

在这里插入图片描述

2.图2如下所示（绘制了3个旋转的立方体）：

如下图所示（模糊问题）

在这里插入图片描述

解如下所示（解决模糊问题）

在这里插入图片描述

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、创建一个透光立方体的步骤如下

第一步：创建DOM，获取DOM，创建renderer渲染器

代码如下所示


	<body>
	    <canvas id="canvas3D"></canvas>
	</body>

    //1,获取元素
    const canvas3D = document.querySelector('#canvas3D')
    //2,创建一个webGL的渲染器（将提供的所有数据，渲染到canvas上）
    const renderer = new THREE.WebGLRenderer({ canvas: canvas3D })

第二步：创建摄像机，设置摄像机

代码如下所示

  //3,需要一个透视摄像机
    const obj = {
        fov: 75, //视野范围(垂直方向为75度)
        aspect: 2, //画布的宽高比 (画布是300x150像素，所以宽高比为300/150或者说2,这里写死会造成拉伸的问题)
        near: 0.1,//近平面
        far: 5 //远平面
    }
    //(远平面、近平面)：任何距离小于或超过这个范围的物体都将被裁剪掉(不绘制)
    const camera = new THREE.PerspectiveCamera(obj.fov, obj.aspect, obj.near, obj.far)

    //4,移动摄像机 
    camera.position.z = 2

第三步：创建场景、几何图形和材质，设置网格

代码如下所示

    //5.创建一个场景
    const scene = new THREE.Scene()
    //6.创建一个立体盒子
    const boxObj = {
        width: 1, // 宽
        height: 1, //高
        length: 1 //长
    }
    const geometry = new THREE.BoxGeometry(boxObj.width, boxObj.length, boxObj.height)
    //7.创建面的材质（color可以用十六进制）
    const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }) //MeshBasicMaterial不受灯光影响的材质
    //8.创建   【几何图形和材质】  的承载体  【网格】 将几何图形和材质添加到网格上生成几何体
    const cube = new THREE.Mesh(geometry, material)
    //9.将几何体添加到场景中去
    scene.add(cube)

第四步：设置渲染render

代码如下所示

    //10.渲染立方体
  renderer.render(scene, camera)
  
    //render函数主要是为了设置旋转动画
    function render(time) {
        time *= 0.001
        cube.rotation.x = time
        cube.rotation.y = time
        renderer.render(scene, camera)
        requestAnimationFrame(render)

    }
    //每一次执行结束的时间传给 render中的time
    requestAnimationFrame(render)

第五步：创建的立方体，结果图如下所示

在这里插入图片描述

第六步：给立方体添加灯光效果

1.实现灯光效果，添加如下代码

切换材质，设置平行光效果，添加到场景上

第一步：在创建材质的位置，切换材质，第二步：第8步下面，设置平行光效果；第三步，将平行光添加到场景上

 //7.创建面的材质（color可以用十六进制）
 // const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }) //MeshBasicMaterial不受灯光影响的材质
    const material = new THREE.MeshPhongMaterial({ color: 0x44aa88 }) //MeshPhongMaterial受灯光影响的材质

//11.灯光效果（更立体，此处要修改第7步骤的材质）
    const lightObj = {
        color: 0xFFFFFF,
        intennsity: 1
    }
    const light = new THREE.DirectionalLight(lightObj.color, lightObj.intennsity)
    light.position.set(-1, 2, 5)

  //9.将几何体添加到场景中去
    scene.add(light) 
    scene.add(cube)
代码解释如下图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第七步：添加光源后的结果，如下图所示

在这里插入图片描述

三、创建三个透光立方体的步骤如下

1.设置一个创建立方体的工厂函数

  function makeInstance(geometry, color, x) {
        const material = new THREE.MeshPhongMaterial({ color })
        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube) //添加到场景中
        cube.position.x = x
        return cube
    }

2.通过循环的形式给每个立方体添加旋转

  //设置立方体数组（方便后续遍历）
  const cubes = [makeInstance(geometry, 0x44aa88, 0), makeInstance(geometry, 0x8844aa, -1.5), makeInstance(geometry, 0xaa8844, 1.5)]
  //添加旋转功能
  cubes.forEach((item, index) => {
      index++
      item.rotation.x = index * .1 * time
      item.rotation.y = index * .1 * time

   })

3.最终效果图如下

在这里插入图片描述

四、一个立方体的完整代码（CODE、code）

<!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>
</head>

<body>
    <canvas id="canvas3D"></canvas>
</body>
<script src="../three/index.js"></script>

<script>
    //1,获取元素
    const canvas3D = document.querySelector('#canvas3D')
    //2,创建一个webGL的渲染器（将提供的所有数据，渲染到canvas上）
    const renderer = new THREE.WebGLRenderer({ canvas: canvas3D })
    renderer.setSize(window.innerWidth, window.innerHeight)
    //3,需要一个透视摄像机
    const obj = {
        fov: 75, //视野范围(垂直方向为75度)
        aspect: 2, //画布的宽高比 (画布是300x150像素，所以宽高比为300/150或者说2,这里写死会造成拉伸的问题)
        near: 0.1,//近平面
        far: 5 //远平面
    }
    //(远平面、近平面)：任何距离小于或超过这个范围的物体都将被裁剪掉(不绘制)
    const camera = new THREE.PerspectiveCamera(obj.fov, obj.aspect, obj.near, obj.far)

    //4,移动摄像机 
    camera.position.z = 2

    //5.创建一个场景
    const scene = new THREE.Scene()
    //6.创建一个立体盒子
    const boxObj = {
        width: 1, // 宽
        height: 1, //高
        length: 1 //长
    }
    const geometry = new THREE.BoxGeometry(boxObj.width, boxObj.length, boxObj.height)


    //7.创建面的材质（color可以用十六进制）
    const material = new THREE.MeshPhongMaterial({ color: 0x44aa88 }) //MeshPhongMaterial受灯光影响的材质


    //8.创建   【几何图形和材质】  的承载体  【网格】 将几何图形和材质添加到网格上生成几何体
    const cube = new THREE.Mesh(geometry, material)

    //11.灯光效果（更立体，此处要修改第7步骤的材质）
    const lightObj = {
        color: 0xFFFFFF,
        intennsity: 1
    }
    const light = new THREE.DirectionalLight(lightObj.color, lightObj.intennsity)
    light.position.set(-1, 2, 5)


    //9.将几何体添加到场景中去
    scene.add(light) // 11步骤添加的灯光
    scene.add(cube)


    //10.渲染立方体
    renderer.render(scene, camera)
    function render(time) {
        time *= 0.001
        cube.rotation.x = time
        cube.rotation.y = time
        renderer.render(scene, camera)
        requestAnimationFrame(render)

    }
    requestAnimationFrame(render)


</script>

</html>

五、三个立方体的完整代码（CODE、code）

<!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>
</head>

<body>
    <canvas id="canvas3D"></canvas>
</body>
<script src="../three/index.js"></script>

<script>
    //1,获取元素
    const canvas3D = document.querySelector('#canvas3D')
    //2,创建一个webGL的渲染器（将提供的所有数据，渲染到canvas上）
    const renderer = new THREE.WebGLRenderer({ canvas: canvas3D })
    renderer.setSize(window.innerWidth, window.innerHeight)
    //3,需要一个透视摄像机
    const obj = {
        fov: 75, //视野范围(垂直方向为75度)
        aspect: 2, //画布的宽高比 (画布是300x150像素，所以宽高比为300/150或者说2,这里写死会造成拉伸的问题)
        near: 0.1,//近平面
        far: 5 //远平面
    }
    //(远平面、近平面)：任何距离小于或超过这个范围的物体都将被裁剪掉(不绘制)
    const camera = new THREE.PerspectiveCamera(obj.fov, obj.aspect, obj.near, obj.far)

    //4,移动摄像机 
    camera.position.z = 2

    //5.创建一个场景
    const scene = new THREE.Scene()
    //6.创建一个立体盒子
    const boxObj = {
        width: 1, // 宽
        height: 1, //高
        length: 1 //长
    }
    const geometry = new THREE.BoxGeometry(boxObj.width, boxObj.length, boxObj.height)


    //7.创建面的材质（color可以用十六进制）
    const material = new THREE.MeshPhongMaterial({ color: 0x44aa88 }) //MeshPhongMaterial受灯光影响的材质


    //8.创建   【几何图形和材质】  的承载体  【网格】 将几何图形和材质添加到网格上生成几何体
    const cube = new THREE.Mesh(geometry, material)

    //11.灯光效果（更立体，此处要修改第7步骤的材质）
    const lightObj = {
        color: 0xFFFFFF,
        intennsity: 1
    }
    const light = new THREE.DirectionalLight(lightObj.color, lightObj.intennsity)
    light.position.set(-1, 2, 5)

    //12.创建一个 立方体工厂
    function makeInstance(geometry, color, x) {
        const material = new THREE.MeshPhongMaterial({ color })
        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube)
        cube.position.x = x
        return cube
    }


    //9.将几何体添加到场景中去
    const cubes = [makeInstance(geometry, 0x44aa88, 0), makeInstance(geometry, 0x8844aa, -1.5), makeInstance(geometry, 0xaa8844, 1.5)]
    scene.add(light)


    //10.渲染立方体
    renderer.render(scene, camera)
    function render(time) {
        time *= 0.001
        //13.通过编辑旋转
        cubes.forEach((item, index) => {
            index++
            item.rotation.x = index * .1 * time
            item.rotation.y = index * .1 * time

        })
        renderer.render(scene, camera)
        requestAnimationFrame(render)

    }
    requestAnimationFrame(render)


</script>

</html>

总结

创作不易，谢谢耐心观看！！！！！！：
此处的案例需要，引入js文件 threejs的文件！！！！！！！！！！！！！！！！！！

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

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

相关文章

VMware虚拟机安装Linux教程

VMware虚拟机安装Linux教程

一、centos7下载 1、centos7的下载 官网下载地址: https://www.centos.org/download/ 2、点击x86_64 二、虚拟机下载与安装 1、VMware虚拟机下载 官网地址: https://www.vmware.com/cn/products/workstation-player.html 打开下载好的.exe文件 安装位置默认在 C 盘下…
阅读更多...
【JavaSE】运算符

【JavaSE】运算符

运算符BIT-3 运算符1. 什么是运算符2. 算数运算符2.1 基本四则运算符2.2 增量运算符2.3 自增/自减运算符3. 关系运算符4. 逻辑运算符&#xff08;重点&#xff09;4.1 逻辑与&&4.2 逻辑或||4.3 逻辑非&#xff01;4.4 短路求值5. 位运算符5.1 按位与&5.2 按位或|5.…
阅读更多...
【借助pf4j实现基于spring-boot的插件化开发

【借助pf4j实现基于spring-boot的插件化开发

借助pf4j实现基于spring-boot的插件化开发背景场景项目地址&结构Demo运行背景 Jenkins、SonarQube等Java实现的Web应用都有插件体系&#xff0c;一般来说都是先从插件市场下载一个插件&#xff0c;然后系统要求重启(某些功能可以不用重启)&#xff0c;插件功能就能在页面上…
阅读更多...
SRM-供应商管理系统搭建指南

SRM-供应商管理系统搭建指南

1、简介1.1、案例简介本文将介绍&#xff0c;如何搭建SRM-供应商管理。1.2、应用场景供应商可注册、提交、修改自己的基本信息及工商信息&#xff0c;上传资质档案、管理产品及样品信息&#xff1b;企业对供应商是否成为合格供应商或淘汰供应商进行准入流程的审批。2、设置方法…
阅读更多...
软件设计（四）--MTBF、MTTF、MTTR

软件设计（四）--MTBF、MTTF、MTTR

软件设计&#xff08;三&#xff09;https://blog.csdn.net/ke1ying/article/details/128808681 31、结构化开发中&#xff0c;过程设计 主要包含对数据结构和算法的设计。 体系结构设计&#xff1a;定义软件的主要结构元素及其关系。 数据设计&#xff1a;基于实体联系图&a…
阅读更多...
高压放大器在多波长干涉相位同步解调方法研究中的应用

高压放大器在多波长干涉相位同步解调方法研究中的应用

实验名称&#xff1a;基于激光相位分立调制的多波长干涉相位同步解调方法研究 研究方向&#xff1a;激光测量 测试目的&#xff1a; 在长度测量中&#xff0c;绝对距离测量&#xff08;ADM&#xff09;可实现高精度、大范围和瞬时距离测量&#xff0c;与相对位移测量&#xff0…
阅读更多...
Dynamsoft Barcode Reader 9.6.1 for NET Crack

Dynamsoft Barcode Reader 9.6.1 for NET Crack

Dynamsoft Barcode Reader以每分钟 500 的速度扫描条码 Dynamsoft Barcode Reader具有灵活 API 的强大条码扫描器 SDK Dynamsoft Barcode Reader无论它是模糊的、扭曲的、黑暗的、遥远的还是移动的&#xff0c;我们都可以扫描它。快速地。 业界最快扫描解码&#xff0c;适用于…
阅读更多...
一次线上超时问题，看Ribbon 超时机制

一次线上超时问题，看Ribbon 超时机制

一、线上问题 项目上线后&#xff0c;一段时间内运行都没有问题&#xff0c;突然运营人员说&#xff0c;某个接口一直失败。遂查看线上日志&#xff1a; spring-cloud-openfeign 通过服务名调用的&#xff0c;服务发现没有找到可用服务实例&#xff1f;这是第一反应&#xff0…
阅读更多...
如何添加PDF书签？学会这三种方法

如何添加PDF书签？学会这三种方法

随着PDF文档和书籍已经成为我们工作和生活中不可或缺的一部分&#xff0c;许多PDF书签制作器和编辑器应运而生。了解使用 Windows、Mac 兼容或在线软件免费将书签添加到 PDF的多种方法。 什么是 PDF 书签&#xff1f; PDF 文件中的书签与印刷书籍中的纸质或织物书签的工作方式…
阅读更多...
1609_PC汇编语言_汇编简介以及first例程后续

1609_PC汇编语言_汇编简介以及first例程后续

全部学习汇总&#xff1a; GreyZhang/g_unix: some basic learning about unix operating system. (github.com) 看了一下&#xff0c;当前看的这个章节还剩下几页没有看完。看完之后&#xff0c;做一个简单的整理。 在上一篇笔记中我提到了关于DJGPP的疑惑&#xff0c;也自己找…
阅读更多...
RocketMQ源码-NameServer架构设计及启动流程

RocketMQ源码-NameServer架构设计及启动流程

本文我们来分析NameServer相关代码&#xff0c;在正式分析源码前&#xff0c;我们先来回忆下NameServer的功能&#xff1a; NameServer是一个非常简单的Topic路由注册中心&#xff0c;其角色类似Dubbo中的zookeeper&#xff0c;支持Broker的动态注册与发现。主要包括两个功能&…
阅读更多...
【每日阅读】前端进阶知识点1

【每日阅读】前端进阶知识点1

如何更改网页中语言属性值 声明当前语言类 html标签更改属性值 lang属性中不区分大小写 en-us en-US 一致 具体可使用 window,document.querySelector(“html”)?.setAttribute(“lang”,newValue); qs库 qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列…
阅读更多...
09_FreeRTOS任务调度器

09_FreeRTOS任务调度器

目录 开启任务调度器vTaskStartScheduler函数 xPortStartScheduler开启任务调度器函数 启动第一个任务 prvStartFirstTask开启第一个任务函数 vPortSVCHandler SVC中断服务函数 出栈/压栈汇编指令详解 开启任务调度器vTaskStartScheduler函数 作用:用于启动任务调度器,…
阅读更多...
LaoCat带你认识容器与镜像（实践篇一上）

LaoCat带你认识容器与镜像（实践篇一上）

实践篇主要以各容器的挂载和附加命令为主。 本章内容 Dockerfile基础命令详解。 本文实操全部基于Ubuntu 20.04 宿主机 > linux服务器本身 Docker > 20.10.22 从该章开始&#xff0c;我们就进入了Docker实践篇系列了&#xff0c;主要介绍Docker相关附加命令&#xff0c;…
阅读更多...
Python中的字符串多样的操作方法

Python中的字符串多样的操作方法

文章目录1.字符串中大小写字母的转变2.字符串的左右中对齐3.字符串查找的方法4.字符串的替换5. 字符串的判断6.字符串的截取7.字符串的拆分8.字符串的拼接9.格式化字符串10.格式化字符串的语法10.12.1 对齐选项&#xff08;[align]&#xff09;10.2 填充选项&#xff08;[fill]…
阅读更多...
切入点（pointcut）的申明规则

切入点（pointcut）的申明规则

Spring AOP 用户可能会经常使用 execution切入点指示符。执行表达式的格式如下&#xff1a;execution&#xff08;modifiers-pattern? ret-type-pattern declaring-type-pattern? name-pattern&#xff08;param-pattern&#xff09; throws-pattern?&#xff09;ret-type-p…
阅读更多...
HandlerInterceptorAdapter拦截器多个拦截器时执行的顺序

HandlerInterceptorAdapter拦截器多个拦截器时执行的顺序

前提&#xff1a;拦截器加载顺序是 1 2 3.Configuration public class InterceptorConfig implements WebMvcConfigurer {Autowiredprivate Test1neInterceptor test1neInterceptor;Autowiredprivate Test2neInterceptor test2neInterceptor;Overridepublic void addIntercepto…
阅读更多...
【Android -- 开源库】权限适配 RxPermissions 的基本使用

【Android -- 开源库】权限适配 RxPermissions 的基本使用

运行时权限 从 Android 6.0&#xff08;API 级别 23&#xff09;开始&#xff0c;用户开始在应用运行时向其授予权限&#xff0c;而不是在应用安装时授予。 系统权限分为两类&#xff1a; 正常权限&#xff1a;只需在你应用的 Androidmanifest.xml 中列出&#xff0c;安装时…
阅读更多...
大数据---Hadoop安装教程（一）

大数据---Hadoop安装教程（一）

Hadoop安装教程前期工作 以下步骤基于网络配置完成&#xff0c;并且能连接xshell和xftp工具 Linux安装: Linux—CentOS 7 64位安装教程 Xshell连接: Linux—Xshell连接 文章目录Hadoop安装教程前期工作安装vim编辑器免密登录ssh登录过程免密登录的原理操作1.免密登录2.开启远程…
阅读更多...
比较排序——三路快速排序

比较排序——三路快速排序

快速排序&#xff08;Quicksort&#xff09;&#xff0c;计算机科学词汇&#xff0c;适用领域Pascal&#xff0c;c等语言&#xff0c;是对冒泡排序算法的一种改进。一、单路排序流程快速排序算法通过多次比较和交换来实现排序&#xff0c;其排序流程如下&#xff1a; (1)首先设…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023