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

最新推荐文章于 2024-02-23 16:47:28 发布
最新推荐文章于 2024-02-23 16:47:28 发布
阅读量864 收藏 10
点赞数 16
文章标签： 前端 3d javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/135389442
版权

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

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

我们上文写的这个代码

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轴一条真线

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

瑞晟技术服务中心-耿瑞
关注
[原]three.js 地形法向量生成
weixin_30951231的博客
09-17 351
上一节采用 分形算法生成地形的高度值， 接着我们需要生成每个顶点的法向量。 three.js 的PlaneGeometry 自带有法向量， 法向量分为两种 即 平面法向量 和 平面每个定点法向量。 因此一个n*n 块组成的平面， 有n*n 个平面法向量， 有4*n*n 个顶点法向量。 这两种法向量区别是， 如果材质的shading属性是THREE.Sm...
three-quaternion-from-normal:从法线向量构建ThreeJS四元数
05-08
正常的四元数 从法线向量构建ThreeJS四元数。 这对于使网格在矢量方向上“指向”很有用。 const quaternionFromNormal = require ( 'three-quaternion-from-normal' ) ; // Say we want mesh to point from A to B point const A = new THREE . Vector3 ( 1 , 0 , 0 ) ; const B = new THREE . Vector3 ( 2 , 5 , - 1 ) ; // Get normal A->B const normal = B . clone ( ) . sub ( A ) . normalize ( ) ; // Get orientation const quaternion = quaternionFromNormal
ThreeJS 几何体顶点position、法向量normal及uv坐标
好好学习天天向上
02-23 2610
本来矩形由2个三角形组成，也就是6个顶点。但有些顶点重复，为了复用我们也设置了顶点索引。所以这里的法向量也按照顶点索引来设置。// 顶点索引 [0, 2, 1, 2, 3, 1]0, 0, 1,0, 0, 1,0, 0, 1,0, 0, 1])
three.js 光照法向量的计算
jiuweiyaoy的博客
12-27 2272
在设置光照颜色时，要带入网格模型的每个面的向量，进行光照计算，这样显示出来的物体形状更清晰 同设置顶点相似 // 设置几何体attributes属性的位置normal属性 geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据 这个参数是一个数组，里面的值为顶点的法向量...
WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
nsytsqdtn的博客
04-21 838
WebGL学习----Three.js学习笔记（5） 点击查看demo演示 Demo地址：https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNormalMaterial MeshNormalMaterial是一种不受渲染时使用的颜色影响的材质，它只与自己每一个面从内到外的法向量有关。法向量在webgl中用处十分广泛，光的反射，以及三维图形的纹理...
Three.js顶点法向量数据光照计算
u014291990的博客
11-29 2297
顶点法向量数据光照计算 本文是Three.js电子书的2.3节 前面两节课讲解到了顶点位置坐标数据、顶点颜色数据，这节课讲解第三种顶点数据：顶点法向量。 如果你有初高中物理的光学基础，应该会有漫反射、镜面反射的概念。比如太阳光照在一个物体表面，物体表面与光线夹角位置不同的区域明暗程度不同，WebGL中为了计算光线与物体表面入射角，你首先要计算物体表面每个位置的法线方向，在Threejs中表示物体的...
web前端3D：three.js加载汽车模型
08-04
本篇文章将详细讲解如何利用three.js加载汽车模型，以及相关的JavaScript插件和素材文件。 首先，了解Three.js的基本概念。Three.js是基于WebGL的3D库，它在浏览器环境中构建3D模型，利用HTML5 canvas元素和WebGL ...
WEB 3D技术 three.js 3D贺卡 天空 hdr资源
01-16
标题中的“WEB 3D技术 three.js 3D贺卡 天空 hdr资源”涉及到的是在Web平台上利用Three.js库创建3D效果，特别是制作3D贺卡，并使用HDR（高动态范围图像）资源来提升视觉表现力的技术。Three.js是JavaScript的一个库...
WEB 3D技术 three.js 3D贺卡 场景素材
01-15
其中，JavaScript库three.js是Web 3D领域的佼佼者，它简化了WebGL编程，使得3D应用开发变得更加容易和高效。 **three.js：JavaScript的3D神器** three.js是一个开源的JavaScript库，它为开发者提供了一套完整的...
three.js 可视化大屏 3D场馆模型Demo
最新发布
02-26
在本项目中，"three.js 可视化大屏 3D场馆模型Demo"是一个基于最新前端技术栈的实现，旨在帮助新手学习如何利用three.js创建3D场馆模型，并将其应用于大屏幕展示。这个项目结合了Vue3、Vite和TypeScript等现代Web...
web3D构建三维房间空间（three.js）
12-04
本项目以"web3D构建三维房间空间（three.js）"为主题，利用JavaScript库three.js实现了从二维平面图到三维空间的转换，让用户能够互动地查看、操作虚拟房间。 首先，我们需要理解Web3D的基本概念。Web3D是一种在...
Three.js——向量操作函数
離殇
03-11 2558
克隆.clone()和复制.copy() 对象执行克隆方法**.clone()**，返回一个新的对象，和原来对象属性的值一样。 var p1 = new THREE.Vector3(10,20,15); var v1 = p1.clone(); console.log(`查看克隆的结果`,v1); 执行**.copy()**方法，向量p1三个分量xyz的值覆盖向量p2三个分量。 var p1 = new THREE.Vector3(10,42,28); var p2 = new THREE.Vector3
three.js材质-法向量材质-MeshNormalMaterial介绍和使用(vue中使用three.js14)
点燃火柴的博客
11-04 1024
法向量材质介绍和使用1.法向量材质介绍2.demo说明3.demo代码 1.法向量材质介绍 MeshNormalMaterial渲染出来的每一面颜色都稍有不同，即使在物体旋转时，这些颜色基本保持原来的位置，之所以这样，是因为每一个面的颜色是从该面向外指的法向量计算得到，法向量即与面垂直的向量，在 three.js 库中法向量有着广泛的应用。它可以用来决定光的反射方向，在三维物体上映射材质时起到辅助作用。还可以在计算光照、阴影时提供有用信息，从而为物体表面像素上色。 MeshNormalMaterial材质的
threejs 法向量外扩描边笔记
Zz10566的博客
06-27 449
threejs 法向量外扩描边笔记
ThreeJs顶点法向量光照计算
LAZYPET BLOG
07-07 1512
1、实现步骤 1、创建空几何体的法向量数据（类型数组） 2、创建属性缓冲区对象（生成法向量） 3、设置几何体的attributes属性的位置normal属性（将顶点赋给空几何体） 2、意义功能 法向量可以与光源进行光照计算，来实现几何体的棱角感 3、思维导图 4、关键代码 var normals = new Float32Array([ 0, 0, 1, //顶点1法向量 0, 0, 1, //顶点2法向量 0, 0, 1, //顶点3法向量 0, 1,
Polygon 3D（三维平面多边形）的法向量的计算（MeshLab默认的计算）
weixin_43851636的博客
12-24 3052
目的：网格法向量的计算 最近发现一个非常有意思的东西，网上的资料较少，所以记下来供大家查阅， 就是在网格化三维polygon 3d的时候，对于polygon 3d的法向量和网格化为三角形的时候。生成obj文件的时候三角面片的方向只和三角形的顶点顺序有关。如果三角面片上进行顶点的normal设置，可能毫无效果。在meshlab中只和顶点的顺序有关。polygon 3d的法向量和三角面片的法向量一致。 三角面片的法向量： ...
法线变换详解 和 3D 变换中法向量变换矩阵的推导
domzhaosh
12-26 7869
3D 变换中法向量变换矩阵的推导潘李亮 2003-11-23 xheartblue@etang.com 在一个 3D 几何管道中,输入的顶点要经过一系列的变换,最终变换到一个投影空间里来,去掉最后的一个 Z-坐标后就是一个规格化的 2D 的屏幕坐标。变换通常分成两个步骤,一是视图/模型变换(D3D 里把这个分开成了两个变换世界变换和视图变换),二是投影变换Project.
3D点云处理：法向量估计（附源码）
lddx_123456的博客
10-06 656
点云法向量估计
three.js 顶点法向量数据光照计算
yinge0508的博客
02-09 357
法向量数据光照计算主要是设置了 缓存几何体对象BufferGeometry的 attributes.normal 属性 // 使用类型数组创建法向量数据 var normals = new Float32Array([ 0, 0, 1, //顶点1法向量 0, 0, 1, //顶点2法向量 0, 0, 1, //顶点3法向量 0, -1, 0, //顶点4法向量 0, 1, 0, //顶点5法向量 0, 1, 0, //顶点
使用Web技术构建3D游戏：Three.js实战指南
"如何使用Web技术设计3D游戏，这本书主要介绍了使用three.js进行游戏开发的实例，作者Jordi Josa，书中涵盖多种3D游戏开发技术和工具，包括物理引擎和图像编辑软件的使用。" 在当今数字娱乐领域，3D游戏的开发已经...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值