Three.js《踩坑日记1》

Three.js可以说是未来物联网无人工厂的网上实体店，很多线下的实体店都通通的搬到了线上。可是对于很多商家看着数据实不如看着门店来的自然。有了需求自然就会有供给这两个兄弟，所以现在太多太多可视化数据了，加之5G的到来，可视化数据都来不及应付更高的体验，随之而然的自然是关于3D及其VR方面的技术红利，作为web端早已开放过WebGL学习成本又高，又难以理解，Three.js作为将器WebGl封装过的一个第三方库，自然成了我们的不二之选，先记录一下踩坑，

1. Faceless geometries are not supported.(不支持无面几何体)

            var geometry = new THREE.Geometry(); //声明一个几何体对象Geometryvar p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标var p3 = new THREE.Vector3(80, 70, 0); //顶点3坐标//顶点坐标添加到geometry对象geometry.vertices.push(p1, p2, p3);// Color对象表示顶点颜色数据var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色//顶点颜色数据添加到geometry对象geometry.colors.push(color1, color2, color3);//材质对象var material = new THREE.MeshLambertMaterial({// color: 0xffff00,vertexColors: THREE.VertexColors, //以顶点颜色为准side: THREE.DoubleSide, //两面可见});var mesh = new THREE.Mesh(geometry, material)scene.add(mesh) // 将网格模型添加至场景中,

对于以上代码，我怎么都找不出问题所在，创建一个几何，设置集合的顶点坐标，将其绑定在该几何体对象Geometry上，

Color并且设置几何对象的颜色，然后创建一个网格模型，将其添加至场景当中，但是浏览器始终提示一个错误就是

Faceless geometries are not supported，说是“不支持无面几何体”，我第一个想法就是我顶点坐标没添加进去，所以渲染错误，

但是后面发现问题不是如此，终于找找找，才找到问题所在。将其设置为点渲染模式就不会出现此错误，为什么会这样，俺也不

知道，后续找到的话再来更新吧，正确代码如下。

        var geometry = new THREE.Geometry(); //声明一个几何体对象Geometryvar p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标var p3 = new THREE.Vector3(80, 70, 0); //顶点3坐标//顶点坐标添加到geometry对象geometry.vertices.push(p1, p2, p3);// Color对象表示顶点颜色数据var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色//顶点颜色数据添加到geometry对象geometry.colors.push(color1, color2, color3);//材质对象var material = new THREE.MeshLambertMaterial({// color: 0xffff00,vertexColors: THREE.VertexColors, //以顶点颜色为准side: THREE.DoubleSide, //两面可见});var mesh = new THREE.Mesh(geometry, material)var AxesHelper = new THREE.AxesHelper(250)// 点渲染模式var material = new THREE.PointsMaterial({color: 0xff0000,size: 10.0 //点对象像素尺寸}); //材质对象var points = new THREE.Points(geometry, material); //点模型对象scene.add(points); //点对象添加到场景中scene.add(mesh)

Three.js《踩坑日记1》相关推荐

Vue中video.js踩坑日记单页切换后视频无法播放
使用video.js踩坑.单页切换后视频无法播放切换页面以后正常显示效果但是我切换路由返回上一层或者点击跳转下个页面的返回的时候就不显示了?? 解决思路在生命周期beforeDestroy函数中 ...
ReactNative 在丁香医生项目中引入的踩坑日记
ReactNative 在丁香医生项目中引入的踩坑日记 this没绑定到函数导致空指针参考 React-Native 踩坑第二弹-undefined is not a function(evalua ...
Antd Pro V4 protable详解（ps:踩坑日记）
Antd Pro V4 protable详解(ps:踩坑日记) 写在前面: 在这篇文章中,你会了解到: protable 中的cloumns属性详解 protable数据加载和处理(两种方法,直接使用 ...
Next.js踩坑入门系列（七） —— 其他相关知识
Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) ...
vue.js踩坑之单向数据流
vue.js父子组件之间的数据通信,细节总结隐性规则:单行数据流学前疑问: 1.父组件如何向子组件通信数据? 2.父组件可以直接修改子组件的数据!但是反过来绝对不可以!那怎么解决这个问题呢? 3. ...
vue.js踩坑之ref引用细节点
vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标 ...
全志哪吒D1-H Tina Linux Ubuntu 22.04入门踩坑日记
哪吒D1-H Tina Linux入门踩坑日记系统环境源码编译 mklibs-readelf的C++标准问题 m4的SIGSTKSZ问题 libfakeroot的_STAT_VER问题 read_ ...
Win11 + Ubuntu18.04 双系统踩坑日记
Win11 + Ubuntu18.04 双系统踩坑日记前言准备工作硬件配置镜像下载 Win11镜像下载 Ubuntu镜像下载启动盘准备 Win11启动盘 Ubuntu启动盘 Win11安装 ...
【Flutter混合开发踩坑日记之‘applicationVariants‘ for extension ‘android‘】
Flutter混合开发踩坑日记之'applicationVariants' for extension 'android' 正文坑一:Could not get unknown property ' ...
Swarm-BZZ踩坑日记之如何让METMASK小狐狸显示gbzz
刚入门bzz的新手还不知道小狐狸是什么的请移步上一章节:Swarm-BZZ踩坑日记之如何在METMASK小狐狸导入节点地址在浏览器安装好小狐狸,并添加自己的钱包地址后会发现只显示ETH,并不显示 ...

Three.js《踩坑日记1》

Three.js《踩坑日记1》相关推荐

最新文章

热门文章