Three.js《踩坑日记1》
程序员文章站
2022-03-27 07:52:01
...
Three.js可以说是未来物联网无人工厂的网上实体店,很多线下的实体店都通通的搬到了线上。可是对于很多商家看着数据实不如看着 门店来的自然。有了需求自然就会有供给这两个兄弟,所以现在太多太多可视化数据了,加之5G的到来,可视化数据都来不及应付更高的体验,随之而然的自然是关于3D及其VR方面的技术红利,作为web端早已开放过WebGL学习成本又高,又难以理解,Three.js作为将器WebGl封装过的一个第三方库,自然成了我们的不二之选,先记录一下踩坑,
1. Faceless geometries are not supported.(不支持无面几何体)
var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
var 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(); //声明一个几何体对象Geometry
var 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)
上一篇: ps喷枪工具在哪
推荐阅读
-
SpringBoot1.x升级SpringBoot2.x踩坑之文件上传大小限制
-
webpack 1.x升级过程中的踩坑总结大全
-
使用ABP框架踩过的坑系列1
-
RocketMq搭建教程---踩坑实录(1)
-
hive系列-1.hive里踩的坑
-
ios浏览器调试踩坑(1)----mescroll.js和vue-scroller
-
vue2.x+springboot1.x+nginx服务器部署踩坑日记
-
Python学习日记--回来填个坑,又踩了另一个坑.解决csv文件写入乱码
-
AeroSpike踩坑手记1:Architecture of a Real Time Operational DBMS论文导读
-
快应用项目开发踩坑日记