开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

threeJS，OBJ的颜色没有显示出来

threeJS是一个基于JavaScript的开源3D图形库，用于创建和展示3D图形和动画。它提供了丰富的功能和工具，可以轻松地在Web浏览器中实现高质量的3D渲染效果。

OBJ是一种常见的3D模型文件格式，它包含了模型的几何信息、纹理坐标和材质等数据。在使用threeJS加载OBJ模型时，如果模型的颜色没有显示出来，可能是由于以下几个原因：

材质设置不正确：OBJ文件中通常包含了材质信息，而threeJS加载OBJ模型时会自动解析材质。如果模型的颜色没有显示出来，可能是因为材质设置不正确。可以尝试检查OBJ文件中的材质信息，或者手动设置模型的材质属性，例如使用MeshBasicMaterial来设置模型的颜色。
着色器问题：threeJS使用着色器来渲染3D模型，如果着色器设置不正确，可能会导致模型的颜色无法正确显示。可以尝试检查着色器的设置，或者使用其他的着色器类型来渲染模型。
光照设置问题：threeJS中的光照可以影响模型的颜色显示效果。如果模型的颜色没有显示出来，可能是由于光照设置不正确。可以尝试调整光照的参数，或者禁用光照效果。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）是一种灵活可扩展的云计算服务，提供了高性能的虚拟机实例，适用于各种计算场景。您可以使用腾讯云云服务器来搭建和运行您的Web应用程序，并在其中加载和展示threeJS的3D模型。

腾讯云对象存储（COS）是一种安全可靠的云存储服务，提供了大规模、低成本的存储空间，适用于存储和管理各种类型的数据。您可以将OBJ模型文件上传到腾讯云对象存储中，并通过腾讯云云服务器加载和展示这些模型。

腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm

腾讯云对象存储产品介绍链接地址：https://cloud.tencent.com/product/cos

相关搜索:linux的vim没有颜色 ListView中的Django分页没有page_obj吗？Obj没有推入javascript中的数组 three.js -如何设置自定义颜色的*.obj模型时，它交付没有*.mtl文件？THREEJS:使用不同的颜色清除RT和默认FBO Threejs:如何使用dat.gui.min.js控件更改框的颜色 Threejs:如何使用Draco压缩器导出导入的obj Threejs:没有绑定到单元1的纹理为什么我的字体图标没有显示出来？为什么用户的相机图像没有显示出来？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

ubuntu的ssh连不上_ubuntu网络连接没有显示出来

之前发在其他的博客上的，现在移动以下位置之前的链接： http://blog.chinaunix.net/uid-69944074-id-5831708.html（原创文章）使用Ubuntu，...我们是需要安装服务端所以应该看是否有sshd，如果没有则说明没有安装。...SSH协议对通信双方的数据传输进行了加密处理，其中包括用户登录时输入的用户口令。...SSH的配置文件： sshd服务的配置文件默认在/etc/ssh/sshd_config，正确调整相关配置项，可以进一步提高sshd远程登录的安全性。...AuthorsizedKeysFile .ssh/authorized_keys //指定公钥数据库文件以前出现问题，不知道怎么解决，后来发现需要修改/etc/ssh/sshd_config，把里面的字段修改合适，基本就没有问题了

2K6 0

一个简单的案例，理解threejs中几个基本概念

，然后才能显示出来。...3.渲染器渲染器就是将相机拍摄的画面在页面的某个dom节点中显示出来。 4.组件组件就是要显示的物体，这种物体有平面几何物体，有三维物体。...第3-5行代码表示创建一个渲染器，设置渲染器颜色为白色，同时设置渲染器的大小。第6行代码表示将渲染器渲染的结果在页面的body元素中显示出来。...第7-9行代码表示创建一个三维的立方体，设置材料的颜色为粉色，然后利用THREE.Mesh构造一个立方体出来。...本项目案例完整下载地址： https://github.com/lenve/threejsDemo 好了，至此，一个简单的案例就完成了。不知道大伙对threejs有没有一点入门呢？

1.9K2 0

Threejs进阶之三：通过GUI修改gltf模型(摩托车)颜色

gltf模型进行修改之前，我们需要先了解下这个模型的组成，我们可以通过在控制台打印该模型的方式查看其文件结构，也可以在threejs官网通过editor功能查看。...创建车身材质定义一个bodyMaterial变量，用于接收Threejs的材质对象，这里我们使用Threejs提供的物理网关材质MeshPhysicalMaterial，这个材质是基于物理渲染，也就是PBR...非金属材料，如木材或石材，使用0.0，金属使用1.0，中间没有（通常）. 默认 0.5. 0.0到1.0之间的值可用于生锈的金属外观。...gui = new GUI() 来实例化一个GUI 添加车身颜色控制面板利用gui的.addColor()方法将obj对象绑定到GUI中，并对其命名，然后其onChange()事件中监听用户点击的颜色值...，修改模型各Mesh的颜色通过上面的代码，我们已经将GUI添加到了屏幕上，但是我们在弹出的颜色窗口中点击修改颜色时，三维场景中的摩托车对应的部位并没有修改颜色，这是因为我们还没有将上面定义的Mesh材质与模型中的

4.4K3 0

Web 3D机房，智能数字机房HTML5 WebGL(ThreeJS)匠心打造「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。在H5使用3D技术门槛比较低了，它的基础是WebGL(ThreeJS)，一个OpenGL的浏览器子集，支持大部分主要3D功能接口。...先用一个线框把机柜位置显示出来，再把一个高度符合使用比例的立方块显示出来就行了，类似一个柱状图。设置一下颜色、光照等属性，让它看上去更真实：空调风向机房中的空调冷风流向也是一个需要监控的业务。...每一个机柜的供电线布局走线，可以通过不同的颜色和走向进行显示。这样会比传统的表格或2d图形显示更加直观。资产管理功能查看机房硬件、软件资源信息和实时数据。...设备报警巡更路径 ---- Web 3D机房，智能数字机房HTML5+Threejs(WebGL) 项目实战【课程介绍】针对webgl的库threejs框架的Web 3D智能数字机房项目实战详细的讲解...---- 更多案例 Web 3D智慧可视化工厂–HTML5+WebGL(ThreeJS)综合案例 Web 3D智慧可视化工厂–HTML5+WebGL(ThreeJS)综合案例 Web 3D焦化厂

2.3K2 0

三维引擎导入obj模型全黑总结

obj 模型没有法线向量如果obj模型导出的时候没有导出法线向量，会导致模型不能接受光照，从而导出的模型是全黑的。此种情况下，高光反射也没有。...以threejs为例，调用computeVertexNormals计算法线向量代码如下： if(child.geometry && !...文件，查看是否有“vn” 标记 mtl文件中设置模型颜色为黑色一些建模人员在导出mtl文件时候，参数Kd 是0 0 0， Kd参数会被解析成模型材质的color属性，既颜色。...mtl 也是文本文件，直接用文本编辑器可以打开查看： PS mtl中 Kd 代表漫反射的颜色， Ks代表高光反射的颜色。...导入的场景没有设置灯光还有一种情况，模型都没有问题，但是由于场景没有设置任何灯光，导致模型看不见，此种情况需要程序上添加灯光即可。结语上一张修改后的效果图

1.2K2 0

Threejs入门之十四：Threejs中的组(Group)对象

在Threejs的官方文档中介绍Group时说它几乎与Object3D相同，因此，Group的属性和Object3D的相同 .children属性使用group.children属性可以查看所有group...，其对各个物体的位置影响是综合作用的结果。...使用group.rotate设置组的旋转 group.rotateY(Math.PI/4) .traverse()方法递归遍历可以通过递归遍历的算法去遍历Threejs一个模型对象包含的所有后代group.traverse...(function(obj){ console.log(obj); // 判断子对象是否是物体，如果是，更改其颜色 if(obj.isMesh){ obj.material.color.set...= new THREE.AxesHelper(50)cubeA.add(cubeAaxesHelper)好了，关于Threejs中的Group对象，就介绍到这里，更多的功能可以查看官方文档，喜欢的关注点赞哦

1.9K1 0

基于vue3+threejs实现可视化大屏

本文需要对 threejs 的一些基本概念和 api 有一定了解。如果对 threejs 这部分还不了解的可以看下官方文档和一些中文文档进行学习。...官方文档地址：threejs.org/ 中文文档地址：www.webgl3d.cn/pages/aac9a… 本文主要主要讲述对 threejs 的一些 api 进行基本的封装，在 vue3 项目中来实现一个可视化的...new GLTFLoader(); this.dracoLoader = new DRACOLoader(); // 提供一个DracLoader实例来解码压缩网格数据 // 没有这个会报错...，如模型克隆、播放动画、设置模型特性、颜色、材质等方法。...这里有一篇关于 threejs 中轮廓线、边框线、选中效果实现的N种方法以及性能评估的文章：zhuanlan.zhihu.com/p/462329055 js 复制代码 import { BoxHelper

6512 1

ThreeJS 不可忽略的事情 - Gamma色彩空间

2. sRGB颜色空间： sRGB是当今一般电子设备及互联网图像上的标准颜色空间。较适应人眼的感光。...WX20191125-143815@2x.png ThreeJS 色彩空间转换故在ThreeJS中，当我们为材质单独设置贴图和颜色时，需要进行色彩空间转换。...对于贴图： threejs 需要在线性颜色空间（linear colorspace）里渲染模型的材质，而从一般软件中导出的模型中包含颜色信息的贴图一般都是sRGB颜色空间（sRGB colorspace...然而 threejs 在导入材质时，会默认将贴图编码格式定义为Three.LinearEncoding，故需将带颜色信息的贴图(baseColorTexture, emissiveTexture, 和...在 GLTFLoader 之前，threejs 也没有很好地处理色彩空间这回事，所以大家需要排查一下其他 loader 有没有这个 bug。 2.

9.7K20 4

Threejs 快速入门

其实Threejs在定义一个3D物体时，需要提供两个信息，第一是形状信息，也就是这个物体上每一个点，每一个面的坐标信息，第二是材质信息，用于告诉Threejs物体的颜色，纹理，反光等信息。...什么叫直接显示颜色呢？这里要涉及到Threejs里的灯光设置。物体的材质由于确定物体的颜色，纹理，以及反光等属性。...如果我把光源的强度减弱，那么平面上的反光也会跟着减弱：但不知大家有木有发现，绿色平面上的反光是减弱了，但红色的那个长方体，还是一样的红，完全没有变化。...两种材质需要根据场景光线的数值来计算显示在屏幕上的颜色，而MeshBasicMaterial则忽略光线的作用，是什么颜色，就直接显示什么颜色，但也由于这种材质忽略了光照的作用，那么它也不会有任何阴影的效果...Threejs的材质，除了可以设置颜色，还支持纹理贴图，我们可以把一个图片，覆盖在3D物体上作为他的纹理，这样就可以利用这些贴图来模拟更真实的场景 <div class="km_insert_code"

10K5 3

2D+1D | vivo官网Web 3D应用开发与实战

4.1.2 模型选型了解了渲染库，我们再来聊一聊常用的3D模型格式：OBJ、FBX、GLTF。...各种模型之间的区别无非是组织的方式不同，有些用纯文本（OBJ），有些用json（GLTF），有些用二进制（FBX）。...几种不同模型文件对比：通过对比我们发现几种模型格式分别适用于不同的场景： 1）OBJ模型对于动画的支持不是特别友好，而手机在做3D展示时需要进行一些模型的拆解动画展示。...环境光就是指物体所在的三维空间中天然的光，它充满整个空间，在每一处的光照强度都一样。环境光没有方向，所以，物体表面反射环境光的效果，只和环境光本身以及材质的反射率有关。...每一次切换模型需要重新对文件进行解析，但是由于不同颜色模型间贴图等材质可以共用，所以即使切换颜色时重新加载模型并解析也会比初始加载时的速度提升很多。

2.1K4 0

Threejs入门之五:Threejs中的辅助对象

在继续Threejs入门之旅之前，我们先来了解几个Threejs提供的辅助对象，这些辅助对象有助于我们更好的了解Threejs。...Threejs提供了很多辅助对象，这里我们先了解几个我们经常用到的坐标轴辅助对象、点光辅助对象、平行光辅助对象和聚光灯的锥形辅助对象。...默认为 1. color – (可选的) 如果没有赋值辅助对象将使用光源的颜色.// 创建点光参数1 光的颜色，参数2 光的强度const pointLight = new THREE.PointLight...默认为 1. color – (可选的) 辅助线的颜色，如果没有设置颜色将使用光源的颜色....SpotLightHelper( light : SpotLight, color : Hex ) light – 被模拟的聚光灯 SpotLight . color – (可选的) 辅助线的颜色，如果没有赋值辅助对象将使用光源的颜色

1.1K1 0

Threejs入门之四:Threejs中的光

前面我们用Threejs创建了一个3D立方体到浏览器，并使其跟随鼠标旋转和缩放，但是，上帝说要有光，于是就有了光~~~额，好吧，这一节我们来认识下Threejs中的灯光，Threejs提供了很多灯光的API...1.AmbientLight：环境光会均匀的照亮场景中的所有物体，环境光没有方向，所以环境光不能用来投射阴影。AmbientLight对象接收两个参数，第一个参数为光的颜色(颜色的rgb数值。...(0x404040,,0.6)scene.add(light)添加完成后运行浏览器，发现浏览器并没有任何变化这是因为我们在之前选择材质的时间选择的是基础网格材质(MeshBasicMaterial)...，这种材质是不受光照影响的，所以，我们要把之前的材质进行修改，修改为Lambert网格材质(MeshLambertMaterial)，这是一种非光泽表面的材质，没有镜面高光。...({ color:0xff0000,//设置颜色 }) 此时发现场景中的物体明显变暗了 2.PointLight：点光源，从一个点向各个方向发射的光源。

2.9K3 0

【ThreeJs】（1）四大组件：场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图

源码地址 https://github.com/lvtraveler/threejsStart ThreeJS必不可少的四要素 <!...场景是所有物体的容器，如果要显示一个苹果，就需要将苹果对象加入场景中。 var scene = new THREE.Scene(); //2、相机决定了场景中那个角度的景色会显示出来。...// 离线渲染:它是事先渲染好一帧一帧的图片 //实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。...// 一般说，场景来没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可。...，并将其设置为红色 //长度1：其单位与屏幕分辨率等无关，简单地说，它就是一个虚拟空间的坐标系，1代表多少并没有实际的意义，而重要的是相对长度 var cube = new

2301 0

用Threejs在你的网页里放一个冰墩墩！

而这最重要的一环，大帅花了3美刀已经为大家买来了。接下来我们用Threejs把冰墩墩在网页里显示出来。...大帅之前写过几篇Threejs的文章，想要学习网页3D渲染的小伙伴们记得点点赞，后续我还会多更新一些Threejs的教程。 2天赚了4个W，手把手教你用Threejs搭建一个Web3D汽车展厅！...建立基本场景的代码就不细说了，和官方文档中也没有区别。 <!...GLTF的格式的特点以及如何在Threejs里加载GLTF模型。...我在导出GLTF格式之前设置的可不是这样呀。可能由于兼容性的问题，脸部的卡通材质丢失了，还有冰晶外壳需要的环境反射贴图也没有了。

2.2K2 0

三维世界中的坐标系

上篇文章中介绍了threejs中几个基本概念，例如场景、相机、渲染器以及组件等，并通过一个简单的案例向小伙伴展示了这些东西的用法，本文来看看threejs中的坐标体系。...本文是threejs系列的第二篇，阅读前面的文章有助于更好的理解本文： ---- 1.一个简单的案例，理解threejs中几个基本概念 ---- 坐标体系首先，threejs中坐标体系是右手坐标系，如下图...不过读者看到，这里红色是x轴，绿色是y轴，好像没有看到z轴？...(cube); var axesHelper = new THREE.AxesHelper(5); obj.add(axesHelper); scene.add(obj); camera.position.z...+= 0.01; obj.rotation.y += 0.01; obj.rotation.z += 0.01; render.render(scene, camera); }

2.1K4 0

Threejs入门之二:引用Threejs并创建第一个3D图形

Threejs的引入1.新建一个文件夹，命名为threejs_demo,在该文件夹下新建一个lib文件夹，将前面下载的threejs源码中的build文件夹中的three.module.js文件拷贝到lib...，具体可查看threejs的官方文档 3.Materials：材质顾名思义就是物体的材料质感，比如颜色、透明度等，在场景中就相当于道具的颜色和材料，threejs中也提供了很多材质类接口，比如基础网格材质...threejs中物体由Geometries和Materials两部分组成，这就相当于电影中的道具枪一样，它由外形结构(几何体)和材料颜色(材质)组成。...创建一个3D图形了解了threejs中的几个重要概念，下面来创建一个简单的3D物体，来感受下threejs的强大。...，是因为我们没有指定一个容器用来放置渲染器，相当于我们电影拍摄好了，但是我们没有电视机，看不了，是不是好尴尬；还记得我们最早的html文件吗？

1.1K4 1

干货 | 2D+1D | vivo官网Web 3D应用开发与实战

4.1.2 模型选型了解了渲染库，我们再来聊一聊常用的3D模型格式：OBJ、FBX、GLTF。...各种模型之间的区别无非是组织的方式不同，有些用纯文本（OBJ），有些用json（GLTF），有些用二进制（FBX）。几种不同模型文件对比： ? ? ?...注：图片来自vivo官网前端团队通过对比我们发现几种模型格式分别适用于不同的场景： 1）OBJ模型对于动画的支持不是特别友好，而手机在做3D展示时需要进行一些模型的拆解动画展示。...环境光就是指物体所在的三维空间中天然的光，它充满整个空间，在每一处的光照强度都一样。环境光没有方向，所以，物体表面反射环境光的效果，只和环境光本身以及材质的反射率有关。...所以我们选择移动相机即实现方式(1) 去实现3D实体的旋转交互。 4.2.4 模型颜色切换模型格式采用的是GLB模型（方便后期固化上传），所以每一种颜色对应一个新的GLB文件。

2.1K4 0

用Three.js建模

将颜色应用于面的第二种方法是将不同的颜色应用于三角面的每个顶点。然后，WebGL 将插值顶点颜色值以计算面内部各像素的颜色。...演示程序threejs/curves-and-surfaces.htm中提供了一些展示，下面我们讨论其中的一些示例。参数化表面是最容易处理的。...但是，如果没有启动动画，则需要一种方法在图像加载后渲染场景。...示例程序threejs/textured-pyramid.html显示具有砖块纹理的金字塔。...例如，沿（1，1，1）方向移动 5 个单位，可以使用如下代码： obj.translateOnAxis( new THREE.Vector3(1,1,1).normalize(), 5 ); 没有用于缩放变换的方法

7.3K0 2

ThreeJS实现船行效果

最近确实业务上需要, 简单学习了ThreeJS的API 文章中代码不全, 需要了解的可以访问仓库: https://github.com/klren0312/threejs_ocean_ship...相关库项目里用到的相关库, 基本都在ThreeJS项目文件夹里https://github.com/mrdoob/three.js/tree/dev/examples/js three.js 核心库..., 没有把自己内部的Mesh暴露出来所以我们需要在模型导入后, 在onProgress回调中对其进行递归获取子Mesh, 将所有Mesh存在一个全局数组中....我们需要用到CSS2DRenderer对其进行渲染, 即创建一个DOM, 将其赋给CSS2DRenderer, 下面代码没有设置坐标, 我是放在鼠标移动事件里设置的 var planeInfo =...函数 /** * text 文字 * options.fontColor 文字颜色 * options.bgColor 背景颜色 */ function createFont (text, options

4.6K3 2

不到30行代码实现一个酷炫H5全景

ThreeJS是Three（3D）+JS（JavaScript），它封装了底层的WebGL接口，使得我们能够在不了解图形学知识的前提下，也能用简单的代码实现三维场景的渲染。...完成这一工作（相当于拍照）以上是ThreeJS渲染物体的固定写法，不理解的话记住也行的?...ThreeJS的坐标的位置为： ?...，curY）相减上一次位置的值，计算出弧长除于半径乘以factor，计算出（lon，lat） touchend：暂时没有用的其中：弧长R值的是屏幕的滑动距离 ?...前面介绍ThreeJS，提到过相机，全景缩放也是依据相机拍照时，缩放拍摄照片内容的原理是一样的。 ?

2.3K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭