WEB 3D技术 three.js 法向量演示性讲解

本文 我们来说法向
法向 又叫 法向量

就是 我们一个三维物体 顶点垂直于面 的方向 向量
在这里插入图片描述
他的作用 用来做光反射
根据光照的方向 根据面进行反射

我们上文写的这个代码

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";//创建相机
const camera = new THREE.PerspectiveCamera(45, //视角 视角越大  能看到的范围就越大window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好0.1,  //近平面  相机能看到最近的距离1000  //远平面  相机能看到最远的距离
);
const scene = new THREE.Scene();
let uvTexture = new THREE.TextureLoader().load("/textUv.jpg");const planeGeometry = new THREE .PlaneGeometry(1, 1);
console.log(planeGeometry);
const planeMaterial = new THREE.MeshBasicMaterial({map: uvTexture
})
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(planeMesh);const geometry  = new THREE.BufferGeometry();
console.log(geometry);
// 创建顶点数据
const vertices = new Float32Array([-1.0 ,-1.0 ,0.0,1.0 ,-1.0, 0.0,1.0 ,1.0 ,0.0,-1.0 ,1.0, 0.0
])
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0 ,1 ,2, 0, 3, 2]);
const material = new THREE.MeshBasicMaterial({map: uvTexture,side: THREE.DoubleSide
})
const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1
])
geometry.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
const cube = new THREE.Mesh(geometry, material);
cube.position.x = - 3
scene.add(cube)//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const controls = new OrbitControls(camera, renderer.domElement);function animate() {controls.update();requestAnimationFrame(animate);/*cube.rotation.x += 0.01;cube.rotation.y += 0.01;*/renderer.render(scene, camera);
}
animate();

运行起来 然后打开控制台
会发现 我们通过 PlaneGeometry 创建的几何体 它是自带法向量的
在这里插入图片描述
但我们自己创建的这个平面 它是没有的
在这里插入图片描述
我们将代码更改如下

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";//创建相机
const camera = new THREE.PerspectiveCamera(45, //视角 视角越大  能看到的范围就越大window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好0.1,  //近平面  相机能看到最近的距离1000  //远平面  相机能看到最远的距离
);
const scene = new THREE.Scene();
let uvTexture = new THREE.TextureLoader().load("/textUv.jpg");const planeGeometry = new THREE .PlaneGeometry(1, 1);
console.log(planeGeometry);
const planeMaterial = new THREE.MeshBasicMaterial({map: uvTexture,side: THREE.DoubleSide
})
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(planeMesh);const geometry  = new THREE.BufferGeometry();
console.log(geometry);
// 创建顶点数据
const vertices = new Float32Array([-1.0 ,-1.0 ,0.0,1.0 ,-1.0, 0.0,1.0 ,1.0 ,0.0,-1.0 ,1.0, 0.0
])
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0 ,1 ,2, 0, 3, 2]);
const material = new THREE.MeshBasicMaterial({map: uvTexture,side: THREE.DoubleSide
})
const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1
])
geometry.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
const cube = new THREE.Mesh(geometry, material);
cube.position.x = - 3
scene.add(cube)//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const controls = new OrbitControls(camera, renderer.domElement);let rgbeloader = new RGBELoader();
rgbeloader.load("/xhdr/Alex_Hart-Snow_Pano_2k.hdr",(texture) =>{scene.background = texture;texture.mapping = THREE.EquirectangularReflectionMapping;planeMaterial.envMap = texture;material.envMap = texture;
})function animate() {controls.update();requestAnimationFrame(animate);/*cube.rotation.x += 0.01;cube.rotation.y += 0.01;*/renderer.render(scene, camera);
}
animate();

这里 我们 RGBELoader引入环境贴图
然后 将我们两个材质都设置 envMap 为当前场景贴图

但明显 我们用PlaneGeometry创建的 有法向的几何体就可以反光
但我们自己写的这个几何体 并没有反射的一个效果
在这里插入图片描述
这边 问题就出在 我们自己创建的没有法向向量

这里 我们将代码改成这样

const geometry = new THREE.BufferGeometry();
// 创建顶点数据
const vertices = new Float32Array([-1.0 ,-1.0 ,0.0,1.0 ,-1.0, 0.0,1.0 ,1.0 ,0.0,-1.0 ,1.0, 0.0
])
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0 ,1 ,2, 0, 3, 2]);
const material = new THREE.MeshBasicMaterial({map: uvTexture,side: THREE.DoubleSide
})
const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1
])
geometry.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
geometry.computeVertexNormals();
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
console.log(geometry);
const cube = new THREE.Mesh(geometry, material);
cube.position.x = - 3
scene.add(cube)

因为执行顺序的问题 换了一些代码的位置 主要还是 用几何体对象执行了 computeVertexNormals
这样 我们在运行代码
我们自己创建的这个几何体 它就有法向向量了
在这里插入图片描述
我们两个板就都有效果了
在这里插入图片描述
但好像只出来了一半 没事 除了computeVertexNormals 我们还可以自己去定义 normal的值
参考代码如下

const geometry = new THREE.BufferGeometry();
// 创建顶点数据
const vertices = new Float32Array([-1.0 ,-1.0 ,0.0,1.0 ,-1.0, 0.0,1.0 ,1.0 ,0.0,-1.0 ,1.0, 0.0
])
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0 ,1 ,2, 0, 3, 2]);
const material = new THREE.MeshBasicMaterial({map: uvTexture,side: THREE.DoubleSide
})
const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1
])
geometry.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
const normals = new Float32Array([0, 0, 1,0, 0, 1,0, 0, 1,0, 0, 1
])
geometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
console.log(geometry);
const cube = new THREE.Mesh(geometry, material);
cube.position.x = - 3
scene.add(cube)

这里 我们定义了一个数组
normals 对应四个角 我们都是 x和y都不管 面对x y的两个方向 反射不需要
就设置 z 就可以了 因为z是面对我们的方向 只要我们相机看得到这个反射效果就好了
然后将数组写入 normal 属性
运行结果如下
在这里插入图片描述
然后 为了我们能够更方便的调试 法向量 我们可以这样做

首先 我们需要在代码中导入

//导入顶点法向量辅助器
import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";

在这里插入图片描述
然后 我们可以随便找个地方这样写

const helper = new VertexNormalsHelper(cube, 8.2, 0xff0000);
scene.add(helper);

在这里插入图片描述
接受三个参数 第一个 你要看哪个几何体的法向量就给他传进去 第二个 辅助线的长度 第三个 辅助线的颜色
在这里插入图片描述
运行之后 我们的效果就出来了 x y 都没有 只有y轴一条真线

它能够帮助我们更直观的看到法向量效果

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

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

相关文章

springcloud之Feign超时提示Read timed out executing POST

springcloud之Feign超时提示Read timed out executing POST

问题描述： Feign接口调用分两层，Ribbon的调用和Hystrix调用，理论上设置Ribbon的时间即可，但是Ribbon的超时时间和Hystrix的超时时间需要结合起来，按照木桶原则最低的就是Feign的超时时间，建议最好配置超时…
阅读更多...
R语言频率分布直方图绘制教程

R语言频率分布直方图绘制教程

本篇笔记分享R语言绘制直方图的方法，通过多种展示风格对数据进行可视化，主要用到ggplot、ggpubr等包。 什么是直方图？ 直方图(Histogram)，又称质量分布图，是一种统计报告图，由一系列高度不等的柱子表示数据…
阅读更多...
openCV入门

openCV入门

简介 本文主要通过对啥都会一点研究生系列进行总结，对关键代码进行注释，方便使用以及复习。 1 基础功能 1.1.显示图片 import cv2 # 读取图片 img cv2.imread("Resources/lena.png") # 显示图片 cv2.imshow("Lena Soderberg",img…
阅读更多...
【Java集合类篇】HashMap的数据结构是怎样的?

【Java集合类篇】HashMap的数据结构是怎样的?

HashMap的数据结构是怎样的? ✔️HashMap的数据结构✔️ 数组✔️ 链表 ✔️HashMap的数据结构 在Java中，保存数据有两种比较简单的数据结构: 数组和链表（或红黑树）。 HashMap是 Java 中常用的数据结构，它实现了 Map 接口。Has…
阅读更多...
STM32 CubeMX产生的程序架构

STM32 CubeMX产生的程序架构

使用STM32CubeMX产生启动相关代码，配置各种外设。在后续程序开发过程中，有可能使用STM32CubeMX逐步产生使用的代码，为了将其产生的代码和我们程序隔离，一种可行的程序架构如下： 在此架构中，STM32CubeMX产生…
阅读更多...
GraphQL和REST API的区别

GraphQL和REST API的区别

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版，欢迎购买。点击进入详情 GraphQL（Graph Query Language）和REST（Representational State Transfer）是两种用于构建和设计API的不同方法。以下…
阅读更多...
【设计模式之美】理论一：怎么才算是单一原则、如何取舍单一原则

【设计模式之美】理论一：怎么才算是单一原则、如何取舍单一原则

文章目录 一. 如何判断类的职责是否足够单一？二. 类的职责是否设计得越单一越好？ 开始学习一些经典的设计原则，其中包括，SOLID、KISS、YAGNI、DRY、LOD 等。 本文主要学习单一职责原则的相关内容。 单一职责原则的定义&#xff1a…
阅读更多...
电脑屏幕一直闪烁怎么解决？三大妙招还你清晰视野

电脑屏幕一直闪烁怎么解决？三大妙招还你清晰视野

电脑屏幕闪烁一直是困扰用户的一个问题，它会影响到用户的使用体验，甚至可能导致眼睛疲劳和头痛。可是电脑屏幕一直闪烁怎么解决呢？在本文中，我们将介绍三个解决电脑屏幕闪烁的方法，从简单的软件调整到硬件检测&#xf…
阅读更多...
亚马逊图片上传后变模糊怎么办？亚马逊图片优化指南—站斧浏览器

亚马逊图片上传后变模糊怎么办？亚马逊图片优化指南—站斧浏览器

亚马逊图片上传后变模糊怎么办？ 使用高分辨率图片：亚马逊建议卖家使用至少1000 x 1000像素的高分辨率图片。如果您上传的图片分辨率较低，亚马逊系统可能会将其自动调整为较小的尺寸，导致图片模糊。因此，确保您使用高质…
阅读更多...
对JAVA行业的深度思考职业规划

对JAVA行业的深度思考职业规划

JAVA行业的发展趋势 首先，随着移动互联网的快速发展，移动应用程序的需求也越来越大。在这个领域，Java一直是主要的开发语言之一，特别是在Android平台上。然而，随着谷歌推出了Kotlin语言作为Android开发的首选语言&…
阅读更多...
Vue3.0+Echarts （可视化界面）

Vue3.0+Echarts （可视化界面）

Vue3.0Echarts （可视化界面） 1. 简介2. 安装2.1 下载安装Node.js2.2 全局下载项目脚手架2.3 创建项目 1. 简介 2. 安装 2.1 下载安装Node.js 2.2 全局下载项目脚手架 以管理员身份执行 npm install -g vue/cli vue --version2.3 创建项目 vue crea…
阅读更多...
读书之unix环境高级编程_简单笔记1（初步）

读书之unix环境高级编程_简单笔记1（初步）

手头有比较多的技术书籍，弃之可惜，放之惭愧，借助空闲时间，先草读，再demo整理。 unix环境高级编程 草读简单整理，为下一步整理细节技术点做准备（仅个人笔记）。 基本的文件操作&…
阅读更多...
java与Android开发入门指南

java与Android开发入门指南

Java与Android开发是当前非常热门的技术领域，它们是构建移动应用程序的核心。在本文中，我们将为您提供一个入门指南，介绍Java和Android开发的基本概念和步骤，帮助您开始学习和掌握这两个技术。 Java 基础知识 在学习 Android 开…
阅读更多...
基于Java SSM框架实现宠物管理系统项目【项目源码+论文说明】计算机毕业设计

基于Java SSM框架实现宠物管理系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现宠物管理系统演示 摘要 随着我国经济的快速发展，人民生活水平的不断提高，宠物逐渐成为许多宠物爱好者的一种生活方式。 宠物的品种也越来越多样化，宠物不仅能给生活带来乐趣还可以成为空巢老人，独生子女很…
阅读更多...
Mysql 查看表注释或字段注释

Mysql 查看表注释或字段注释

查看所有表的注释 SELECT table_name 表名, table_comment 表说明 FROM information_schema.TABLES WHERE table_schema ‘数据库名’ ORDER BY table_name 查询所有表及字段的注释 SELECT a.table_name 表名, a.table_comment 表说明, b.COLUMN_NAME 字段名, b.column_commen…
阅读更多...
MongoDB批量写入操作

MongoDB批量写入操作

一、概述 MongoDB为客户端提供了批量执行写入操作的能力。批量写入操作影响单个集合。MongoDB允许应用程序确定批量写入操作所需的可接受确认级别。 db.collection.bulkWrite（）方法提供了执行批量插入、更新和删除操作的能力。 MongoDB还支持通过db.col…
阅读更多...
java常见面试题：什么是反射？反射在Java中有哪些应用场景？

java常见面试题：什么是反射？反射在Java中有哪些应用场景？

反射在计算机科学中是一种机制，通过这种机制程序可以在运行时获取关于类、接口、字段和方法的信息，并可以在运行时对对象进行操作。 在Java中，反射的应用场景主要包括以下几个方面： 框架开发：Java反射机制被广泛应用…
阅读更多...
补码的乘法-布斯乘法

补码的乘法-布斯乘法

前言 本篇文章讲解如何通过逻辑门的形式来实现补码的乘法操作 布斯乘法 A.D.Booth提出了一种补码相乘算法,可以将符号位与数值位合在一起参与运算，直接得出用补码表示的乘积，且正数和负数同等对待。这种算法被称之为Booth (布斯)乘法 下面有两个变量值…
阅读更多...
【量化金融】《证券投资学》吴晓求（第四版）（更新中）

【量化金融】《证券投资学》吴晓求（第四版）（更新中）

这里写目录标题 第一篇 基本知识第1章 证券投资工具名词解释简答题 第2章 证券市场名词解释简答题 第二篇 基本分析第三篇 技术分析第四篇 组合管理第五篇 量化分析与交易策略 第一篇 基本知识 第1章 证券投资工具 名词解释 风险（risk） 未来结果的不…
阅读更多...
【hcie-cloud】【16】业务上云迁移、Rainbow详述

【hcie-cloud】【16】业务上云迁移、Rainbow详述

文章目录 前言华为业务迁移解决方案概述业务上云背景概述业务迁移场景需求及挑战业务迁移的价值华为业务迁移解决方案 - 全景图华为业务迁移解决方案的优势 Rainbow迁移工具介绍Rainbow迁移原理介绍Rainbow迁移工具简介Rainbow迁移工具定位Rainbow迁移视图Rainbow迁移原理 - Wi…
阅读更多...
最新文章

Copyright @ 2022~2023