Three.js模型在Vue中使用贴图，模型变黑的问题

已于 2023-04-11 10:33:53 修改
阅读量574 收藏
点赞数
分类专栏： three.js 文章标签： vue.js javascript 前端
于 2023-04-10 14:33:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57065653/article/details/130059131
版权

一般来说是贴图图片引入的问题

 

解决方法: 使用require

 这样就可以正常显示了

 要注意的是，require的使用方法，直接使用 require(src)会报错，使用`folder${src}` 或者"folder"+src,就可以了

EverGlowShan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue加载three模型成功，但显示黑屏？
空谷足音的博客
04-03 4932
遇到问题解决方案： 遇到问题：导入到场景内的模型无法查看，而且也没有报错 这种会有可能有多种情况造成的，一般情况下都是下面两种情况造成的： 1.模型太小或者太大，这种情况可以尝试放大一千倍或者缩小一千倍来查看效果。 2. 模型的位置太偏，根本不在相机照射范围内，这种问题我们可以将模型居中到相机照射的焦点位置看 获取模型的大小： // 获取模型大小 let box = new TH...
Three.js中导入GLTF模型变黑无法看到模型
simajinxiu的博客
08-22 7145
一个下午都在Three.js官网导入GLTF模型，但是很不幸，根据官网DEMO中一直待有texture纹理，不能单独载入模型，后经一番查找，发现其实早已经单独讲模型载入到网页中，但是模型与背景色均为黑色，无法判断是否成功加载，所以一直在如何加载模型的道路上越走越偏，之后后来加载一个带有坐标轴的模型后，发现坐标轴可以呈现，但是模型不见，可以约看到个模型大概轮廓，所以改变方向，解决模型显示黑色问题，随...
Three TextureLoader纹理贴图不显示图片（显示黑色）的原因分析
最新发布
weixin_44166849的博客
06-03 1502
基于vue 导入图片 需要改成。第一种：导入的方式不对。第二种：物体材质不对。
Three.js加载自定义贴图（代码可直接在vue中运行，亲测可行！！！）
qq_42005992的博客
11-23 1949
代码运行截图： vue代码( import图片请自行更改，加载的是本地图片 )： <template> <div class="three"> <div id="container"></div> </div> </template> <script> import * as Three from 'three' import road from '../assets/road.jpg'
3dmax导出的FBX加载到three.js后有黑色的处理参考
大英雄不该去雪山打滚
09-08 2092
这里写自定义目录标题场景处理方案其他提醒 场景 准备优化一下之前建的模型，重新建了一下，放到场景之后发现模型有的地方是黑色，而且还有看不到的，必须从另一个方向才能看到的问题，下图是黑色的问题，右为正确模型 处理方案 模型面没闭合，其实在3dmax里用“标准”模型查看模型的时候，就能看到黑色和不黑的 通过给边加“桥”把边连成面使面闭合 焊接多余的点，通过框选选择顶点，有些时候经过附加或者镜像，同一个位置会有多个点，这个应该是影响了面的方向，导致黑面 删除点和线时不能直接按delete，得点右键菜单里的删
three.js材质纹理显示不出来（显示黑色）
Z_Gleng的博客
12-14 1341
【代码】three.js材质纹理显示不出来（显示黑色）
vue使用three.js引入外部obj，mtl模型.zip
05-31
在Vue.js应用中集成Three.js库来加载外部的3D模型，如.obj和.mtl文件，是一种常见的增强网页3D视觉效果的方法。Three.js是一个强大的JavaScript库，它为WebGL提供了一个简单易用的接口，使得在浏览器中创建复杂的3D...
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue3中使用threejs加载fbx模型.zip
07-04
通过以上步骤，你已经成功地在Vue3项目中使用Three.js加载了FBX模型。记得替换`load`方法中的`'path/to/your/model.fbx'`为实际的FBX模型路径。此外，还可以根据项目需求进行更多定制，如添加动画、交互性或优化性能...
three.js加载gltf模型
09-17
在本文中，我们将深入探讨如何使用three.js库加载GLTF（GL Transmission Format）模型，并结合Vue.js框架构建一个完整的Web应用程序。GLTF是一种开放标准的3D资产交换格式，广泛用于WebGL和WebVR场景，因为它能高效...
【threejs】render方法，渲染区域为黑色
qq_44408319的博客
01-12 560
renderer.render(scene, camera)
three.js 模型材质变黑的以及背面消影问题
firefoxddk的博客
07-25 1102
three.js模型材质变黑的以及背面消影问题。
threejs实现点击某个模型变色
九段刀客的博客
08-10 1419
threejs点击模型变色
Threejs在vue中使用(场景、相机、渲染器、gltf模型添加、环境贴图等）
Youxingfang的博客
04-22 6926
前言 Three.js ( Javascript 3D library ) 是基于原生WebGL封装运行的三维引擎，WebGL可以看成是浏览器给我们提供的接口，在JavaScript中可以直接用这些API进行3D图形的绘制；而Three.js它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。 Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。 Three.js开发3D应用，通常包括渲染器（Renderer）、场景（Scene）、照
vue+three.js贴图-自定义贴图.仿写VANS定制功能（three.js+vue）
Dyz_397的博客
07-07 683
使用vue+Three.js贴图功能简单仿写Vans定制服装界面
Three.js对模型进行多区域染色
wz122330的博客
08-31 1489
Three.js对模型进行多区域染色
Vue three.js基础四大组件实现三维效果（三）贴图/镜头移动/地板
weixin_44903473的博客
09-04 1189
Vue three.js基础四大组件实现三维效果（二）贴图 //未贴图 let material = new THREE.MeshPhongMaterial({color："#f60"}) //贴图 const loader = new THREE.TextureLoader()//贴图 let material = new THREE.MeshPhongMaterial({ map: loader.load('https://threejsfundamentals.org/threejs/resou
三维引擎导入obj模型全黑总结
netcy的专栏
12-09 4106
最近有客户试用我们的三维平台，在导入模型的时候，会出现模型全黑和不可见的情况。本文说下全黑的情况。 经过测试，发现可能有如下几种情况。 obj 模型没有法线向量 如果obj模型导出的时候没有导出法线向量，会导致模型不能接受光照，从而导出的模型是全黑的。 此种情况下，高光反射也没有。 解决方案上，一种是让建模人员重新导出模型，导出的时候勾选上导出法线向量。 另外也可以从程序上兼容一下，判断模型是否有法线向量，如果没有，程序自己计算法线向量。 以threejs为例，调用computeVertexNormals计
Threejs使用EffectComposer后期处理通道后，纹理有色差
zhujiarunm的博客
08-19 1627
threejs加载gltf模型后有色差
用three.js在vue中引入3d模型
04-22
您好，关于在Vue中引入3D模型，您需要进行以下步骤： 1. 安装three.js 您可以使用npm安装three.js： ``` npm install --save three ``` 2. 导入three.js和模型文件 在Vue中，您可以在组件文件中引入three.js和模型文件。这里以GLTF格式的模型为例： ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; ... ``` 3. 创建场景、相机、渲染器 在Vue组件文件中，您需要创建场景、相机和渲染器： ```javascript let scene, camera, renderer; function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } init(); ``` 4. 加载模型并添加到场景中 在Vue组件文件中，使用GLTFLoader加载模型文件并添加到场景中： ```javascript let loader = new GLTFLoader(); let model; loader.load('/models/your-model.gltf', function(gltf) { model = gltf.scene; scene.add(model); }); ``` 5. 渲染场景 在Vue组件文件中，使用animate函数渲染场景： ```javascript function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 希望能帮到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值