THREE.Material: ‘vertexColors‘ parameter is undefined.

Aha～

已于 2022-08-09 17:08:58 修改

阅读量1k

点赞数 5

文章标签： js

于 2022-08-05 11:14:47 首次发布

本文链接：https://blog.csdn.net/weixin_44433839/article/details/126173685

版权

学习three.js 时跟着案例一顿敲
在给点添加颜色数据时发现报了错:vertexColors parameter is undefined
其实大多数时候这种问题都是因为three.js版本不对应导致的。可以根据需求升级或降级

先说解决办法

let material1 = new THREE.PointsMaterial({
  // color: 0xff0000,
  vertexColors: true,
  size: 7.0
})

原代码：
在这里插入图片描述
运行发现颜色数据并没有添加，并且浏览器报了一个警告：

去父类方法中查看发现vertexColor应当是boolean类型

更改为true之后就可以正常展示了：

优惠劵

Aha～

关注关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
THREE.Material: ‘vertexColors‘ parameter is undefined.

three.js 顶点颜色 THREE.Material: 'vertexColors' parameter is undefined.
复制链接

扫一扫

THREE.MeshLine:替换THREE.Line的网格

05-03

网格线替换THREE.Line网格而不是使用GL_LINE，它使用了一条三角形的广告牌。一些例子：：使用不同的材质设置：使用MeshLine绘制图形的示例：具有纹理的动态MeshLine示例： MeshLine渲染SVG路径的示例：从网格创建的MeshLine示例：@caramelcode（Jared Sprague）和@mwcz（Michael Clayton）的MeshLine.advance()示例如何使用包含脚本创建3D坐标数组创建网格线并分配点创建一个MeshLineMaterial 使用MeshLine和MeshLineMaterial创建一个THREE.Mesh 包括脚本包含三个之后的包含脚本 < script src = "THREE.MeshLine.js" > < / script > 或使用npm进行安装 npm i three

THREE.WebGPURenderer：实验Three.js WebGPU渲染器

02-01

然后我可能会停止更新此项目，而改为为Three.js官方做出贡献。三.WebGPU渲染器实验Three.js WebGPU渲染器 / 通过Chrome Canary上的chrome：// flags打开＃enable-unsafe-webgpu进行演示。链接

2 条评论您还未登录，请先登录后发表或查看评论

three.js顶点颜色插值THREE.VertexColors无效

qq_39966730的博客

09-02

1268

three.js顶点颜色插值THREE.VertexColors无效

three.js 源码注释（四十五）Material /Material .js

omni360的专栏

12-22

2739

Material是材质对象的抽象基类,当创建材质时都从这个类继承.Material对象的功能函数采用定义构造的函数原型对象来实现. 简单的说就是物体看起来是什么质地。材质可以看成是材料和质感的结合。在渲染程式中，它是表面各可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。

three.js使用四：加载有材质和纹理的模型

热门推荐

xuhaiyan8825的专栏

07-16

1万+

和前一章相比，主要在模型的生成方面。细节如下：用3dmax绘制模型，注意材质球的坐标原点设为一致，然后导出为obj，注意带上mtl文件，纹理文件使用jpg格式，不用用tga格式，three.js不支持。效果如下：在three.js的使用上： //wsad can control forward back left right,R can rise up came

Threejs-关于变更的设置

前端

08-30

5884

为了提高性能，threejs默认物体的形状和材质一经创建，就永不改变。所以，修改物体的形状和材质，就需要手动告诉threejs，方法就是使用各种computeXXX方法和needsUpdate属性。相机变更相机位置更新: 需要重新设置相机的位置，还需要重新渲染 camera.position.set(x, y, z); //渲染 renderer.render(scene,...

threejs报错记录_1

m0_60707623的博客

03-18

699

threejs找不到textGeometry bug记录

warnings (imported as 'THREE') was not found in 'three'

出埃及记

12-29

1万+

这个问题还没解决！用Vue.js 重构项目的时候，引入three.js和其他相关的东西的时候会出现上面的警告。今天就说一下这个解决办法，但是我觉得这个方法不一定适用所有的项目。一、引入THREE 首先用 npm 安装了 three, 然后再项目里面引入了。如下代码所示。 import * as THREE from 'three' 这个时候还需要引入其他three.js 的方法。比...

three.js加载gltf模型

09-17

three.js加载gltf模型的完整demo，使用vue开发的，比较简单，便于理解

THREE.IK:Three.js的逆运动学

05-08

正在进行中的THREE.IK通过迭代求解器和一个球节约束来支持带有多个效应器的多个链。目前来看这是如何工作的最好方法是查看，和。 :warning: 工作进行中/要求反馈 :warning: 关于轴对齐，新约束，替代求解器和API...

maptalks.three:要使用three.js进行渲染的maptalks图层

04-30

maptalks.three 要使用THREE.js渲染的maptalks图层例子。安装使用npm npm install maptalks.three ： npm install maptalks.three 。从下载。使用unpkg CDN： ...

three.js学习笔记（一）：THREE.Materail五种基础材质的使用

qq_43641110的博客

02-10

3562

THREE.Materail五种基础材质的基本使用：属性介绍，代码示例

【Three.js】五、three.js中的材质——Material

MAXLZ的博客

09-10

2514

【Three.js】五、three.js中的材质——Material一、 three.js中的材质就是几何体表面的材料。一、

three.js学习笔记(三)——material材质

hongsir的博客

11-29

5530

什么是材质Material 材质用于在几何体的每个可见像素上添加颜色创建材质初始化基础网格材质MeshBasicMaterial const material = new THREE.MeshBasicMaterial() 接下来我们往场景中添加三个网格物体 //球形缓冲几何体 const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(0.5,16,16),material) //平面缓冲几何体 const plane = new THR

【Three.js】第十二章 Materials 材质

m0_68324632的博客

06-11

1452

材质用于为几何体的每个可见像素着色。决定每个像素颜色的算法属于着色器中编写的。编写着色器是 WebGL 和 Three.js 最具挑战性的部分之一，但不要担心；Three.js 有许多带有预制着色器的内置材质。我们将在以后的课程中探索如何创建我们自己的着色器。现在，让我们使用 Three.js 自带材料。

threejs基本知识3

sqbcsdn的博客

11-19

206

threejs 基本材质

基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip

最新发布

05-22

three.js:37959 Uncaught TypeError: Cannot read properties of undefined (reading 'offsetX')

12-22

根据提供的引用内容，报错"Uncaught TypeError: Cannot read properties of undefined (reading 'offsetX')"是在three.js的第37959行发生的。这个错误通常表示在访问一个未定义的属性时发生了错误。要解决这个问题，可以按照以下步骤进行排查： 1. 确保你已经正确引入了three.js库，并且版本是最新的。可以通过检查引入的脚本路径和版本号来确认。 2. 检查代码中是否存在拼写错误或语法错误。特别是在访问属性时，确保属性名的拼写是正确的，并且确保在访问属性之前已经定义了相应的对象。 3. 检查代码中是否存在异步加载的问题。如果在加载three.js库或其他依赖库时存在异步加载的情况，可能会导致在访问属性时出现未定义的错误。确保在访问属性之前，相关的依赖已经加载完成。 4. 如果以上步骤都没有解决问题，可以尝试在three.js的官方文档或社区中搜索类似的问题，看看是否有其他开发者遇到过类似的错误，并找到解决方法。下面是一个示例代码，用于演示如何使用three.js创建一个简单的场景： ```javascript // 引入three.js库 import * as THREE from 'three'; // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建一个立方体 const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 渲染场景 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ```

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交