首页 > 其他分享 >Three.js教程:网格模型

Three.js教程:网格模型

时间:2023-07-04 10:35:56浏览次数:46  
标签:模型 网格 THREE Three 三角形 js

推荐:将NSDT场景编辑器加到你的3D工具链
工具集:NSDT简石数字孪生

网格模型(三角形概念)

本节课给大家演示网格模型Mesh渲染自定义几何体BufferGeometry的顶点坐标,通过这样一个例子帮助大家建立**三角形(面)**的概念

三角形(面)

网格模型Mesh其实就一个一个三角形(面)拼接构成。使用使用网格模型Mesh渲染几何体geometry,就是几何体所有顶点坐标三个为一组,构成一个三角形,多组顶点构成多个三角形,就可以用来模拟表示物体的表面。

网格模型三角形:正反面

  • 正面:逆时针
  • 反面:顺时针

空间中一个三角形有正反两面,那么Three.js的规则是如何区分正反面的?非常简单,你的眼睛(相机)对着三角形的一个面,如果三个顶点的顺序是逆时针方向,该面视为正面,如果三个顶点的顺序是顺时针方向,该面视为反面。

双面可见

Three.js的材质默认正面可见,反面不可见。

const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, //材质颜色
    side: THREE.FrontSide, //默认只有正面可见
});
const material = new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide, //两面可见
});
const material = new THREE.MeshBasicMaterial({
    side: THREE.BackSide, //设置只有背面可见
});
3D建模学习工作室    

上一篇:Three.js教程:线模型对象 (mvrlink.com)

下一篇:Three.js教程:构建矩形平面几何体 (mvrlink.com)

标签:模型,网格,THREE,Three,三角形,js
From: https://www.cnblogs.com/mvrlink/p/17525011.html

相关文章

  • vue项目中的package.json的private选项的作用
    {"name":"项目名称","description":"描述","version":"版本","private":true,"author":"testTeam","license":"MIT",}如果你在你的package.j......
  • 【JS基础】手写Promise.all
    我还以为是先手写promise,再实现all方法呢,没想到这么简单。。。/***手写promise.all*/functionpromiseAll(args){returnnewPromise((resolve,reject)=>{constpromiseResult=[]letiteratorIndex=0letfullCount=0f......
  • Jsp
          为什么使用jspJsp定义:动态的网页技术 Javaserverpages()java服务器端页面技术Jsp的缘由:可以实现交互功能(客户端和服务器端产生请求和响应);可以实现HTML静态页面无法实现的动态更新数据功能面试题:bs和cs的区别B/Sbrowser server浏览器  服务器......
  • 【JS错误总结】promise.then 如果没有被 resolve,不会立即执行,而是先执行宏任务,等待 pr
    setTimeout(()=>{console.log('setTimeout')},0)letpromise=newPromise((resolve,reject)=>{console.log('1')setTimeout(()=>{console.log('timeStart')resolve('success�......
  • js格式化货币方法
    ......
  • 关于Gin如何在multipart/form-data请求下解析JSON数组
    前言众所周知,在Gin下,如果只是在multipart/form-data请求下解析JSON对象到结构体的话就比较简单。但是如果是要解析JSON数组到对应请求结构体呢?正文举个例子:typeAddItemstruct{IDint`form:"-"` Images[]*multipart.FileHea......
  • js 实现斐波那契数列
    O2^N算法,常规写法,递归实现functionfib(n){if(n==0||n===1)return1;returnfib(n-1)+fib(n-2);};console.log(fib(3));//5console.log(fib(5));//8O(N)算法,动态规划,重叠子问题functionfibonacci(n){if(n<=1)returnn;......
  • ERROR in static/js/*** from UglifyJs Unexpected token: punc (,) [./~/@vant/poppe
     今天打包的时候发现这样的问题,解决方式:找到webpack.base.conf.js文件,加入下边的代码: {test:/\.mjs$/,loader:"babel-loader",include:[resolve("node_modules/@vant/popperjs/dist/index.esm.mjs")]},......
  • Delphi 通过WebBrowser调用JS方法
    Delphi通过WebBrowser调用JS时,为防止版本问题导致调用失败,需要在html中增加 <metahttp-equiv="X-UA-Compatible"content="IE=edge"/>示例html代码<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <metahttp-eq......
  • JS常见的事件
    onblur元素失去焦点时触发onblur事件会在对象失去焦点时发生。Onblur经常用于Javascript验证代码,一般用于表单输入框。提示:onblur相反事件为onfocus事件。onchange该事件在表单元素的内容改变时触发(<input>,<keygen>,<select>,和<textarea>)onchang......