javascript - ThreeJS ShaderMaterial Texture问题-6ren

javascript - ThreeJS ShaderMaterial Texture问题

转载作者：行者123 更新时间：2023-11-30 16:44:10

27

4

使用 three.js r71。我不明白为什么我的纹理没有被 ShaderMaterial 读取。飞机是黑色的。我需要一双新鲜的眼睛来帮助我找出问题所在。

非常感谢!

这是 HTML:

<!DOCTYPE html>

<html>
  <head>
    
    <script src="jquery.min.js"></script>
    <script src="three.min.js"></script>
    <script src="testshdr.js"></script>
    
  </head>
  
  <body>
   
    <!-- Shaders -->
    <script id="vertexShader" 
            type="x-shader/x-vertex" >

    varying vec2 vUv;

    void main(){
      vUv = uv;
      gl_Position = projectionMatrix * 
                    modelViewMatrix * 
                    vec4(position, 1.0);

    }

    </script>

    <script name="no_effect"
            id="fragmentShader_0"
            type="x-shader/x-fragment" >

    varying vec2 vUv;

    uniform sampler2D editImg;

    void main(){
      vec4 myTexture = texture2D(editImg, vUv);
      gl_FragColor = vec4 (myTexture.r, 
                           myTexture.g, 
                           myTexture.b, 
                           1.0);

    }

    </script>
   
    <script type="text/javascript">
      var tst = new TestShdr();
    </script>

  </body>
  
</html>

这是 JS:

var TestShdr = function () {
  'use strict';
  
  var
    SCENE,
    RENDERER,
    CAMERA,
    GEO,
    MAT,
    OBJ,
    TEX,
    UNIFS,
    VS,
    FS;
  
  SCENE = new THREE.Scene();
  RENDERER = new THREE.WebGLRenderer();
  RENDERER.setSize(256, 256);
  
  CAMERA = new THREE.PerspectiveCamera(56, 1, 0.1, 1000);
  
  SCENE.add(CAMERA);
  CAMERA.position.z = 5;
  
  TEX = THREE.ImageUtils.loadTexture('1107.jpg');
  
  UNIFS = {
    editImg: { type: 't', value: TEX}
  };
  VS = $('#vertexShader').html();
  FS = $('#fragmentShader_0').html();
  
  GEO = new THREE.PlaneBufferGeometry(1, 1, 1, 1);
  MAT = new THREE.ShaderMaterial({uniforms: UNIFS,
                                  vertexShader: VS,
                                  fragmentShader: FS
                                 });
  OBJ = new THREE.Mesh(GEO, MAT);
  SCENE.add(OBJ);
  
  document.body.appendChild(RENDERER.domElement);
  
  RENDERER.render(SCENE, CAMERA);
  
};

最佳答案

你应该这样做:

TEX = THREE.ImageUtils.loadTexture('1107.jpg', {}, function() {
    RENDERER.render(SCENE, CAMERA);
});

关于javascript - ThreeJS ShaderMaterial Texture问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31501225/

27

4

0

文章推荐： c# - ASP.NET 路由 - 捕获带有约束的整个 url

文章推荐： c# - 将图像转换为灰度并行循环

文章推荐： javascript - Bluebird promise : catching errors

文章推荐： c# - 从 Unity 获取接口(interface)实例

c++ - Opengl C++ : texture code textures all models with the same texture
我创建了一个类来保存我的模型信息。我必须正确渲染模型并正确包裹纹理，但出于某种原因，如果我有多个模型，它会将我的所有模型纹理化为仅 1 个纹理，如您在此图像中所见:http://imgur.com/d
opengl - 冻伤 PBR : different compression on separate texture channels of the same texture
是否有可能，如果有，如何在 OpenGL4.x 中的不同 channel 上创建和读取具有不同压缩算法的 RGBA 纹理: 没有实际意义的例子A: RG channel 存储以 3Dc 编码的法线贴图
OpenGL:SSBO vs "Buffer Texture"vs "PBO/Texture"来提供计算着色器
我需要将浮点数据提供给计算着色器。我看到的 3 种方法是: 着色器存储缓冲区对象缓冲纹理 “经典”纹理(使用 PBO 将数据上传到 GPU，然后使用 glTexSubImage2D 将数据复制到纹
textures - OpenGL ES 2.0 : Texture renders black, 几个小时没有解决:(
我会保持简单:本文末尾列出的代码在我的项目中按从上到下的顺序排列。我有一个 OGLES2.0 框架，可以完美渲染除纹理之外的所有内容。渲染单个纹理时，我看到的只是一个尺寸正确的黑盒子。这是我已验证的
java - OpenGL ES : Using Texture: Blank White instead of Texture Image
我在 Android 平台上编码。我正在尝试为三角形使用纹理(从 Assets 文件夹加载图像)。当我的应用程序运行时，它只是三角形中的空白白色(不是我想要的纹理)。我读过一些其他资料，说图像必须是
android - OpenGL ES 1.0 : Hide texture parts while textures overlapped
我有道路的纹理。具有此纹理的线(由三角形条表示)如下所示: 当然，道路可以与其他道路重叠。在这种情况下，我想隐藏道路边界。道路边界具有 alpha 0.6，同时道路具有 alpha 1。那么当它们与具
javascript - WebGL - 绘制元素 : The texture is a non-power-of-two texture or not mipmap complete
我正在画一个到 webgl Canvas 上。我可以在 Chrome 和 Firefox 中使用它，但 IE11 似乎会抛出错误。错误指出: drawElements: The texture is
three.js - 三个 : how to render a texture with custom shaders INCLUDING the textures UV offsets
我想使用自定义着色器将纹理渲染到平面上。这个纹理有一个“偏移”属性集，当我使用标准的 threejs Material 时它可以正常工作。但是，我不知道如何在我的自定义片段着色器中访问这些偏移量。它只
visual-studio - Image' 不包含 'texture' 的定义，并且没有可访问的扩展方法 'texture' 接受类型 'Image' 的第一个参数
导入项目后，Unity 中不断出现此错误。这是代码: public static void CameraFadeSwap(Texture2D texture){ if(cameraFade)
c++ - OpenGL ES 2.0 : paint in FBO + Texture = gray blending in texture
这就是我在片段着色器中渲染画笔的方式: gl_FragColor.rgb = Color.rgb; gl_FragColor.a = Texture.a * Color.a; 在 (0, 0, 0,
Android MediaCodec 输出格式 : GLES External Texture (YUV/NV12) to GLES Texture (RGB)
我目前正在尝试在 Android 上开发视频播放器，但在颜色格式方面遇到困难。上下文:我通过 MediaExtractor/MediaCodec 的标准组合提取和解码视频。因为我需要将提取的帧用作
ios - _validateTextureView :557: failed assertion `Texture View Validation cannot create View from Memoryless texture
在 Xcode 13 beta 中运行模拟器，我遇到了崩溃，我该怎么办？ _validateTextureView:557: failed assertion `Texture View Valida
iphone - OGL_ES 2.0 : Using multiple texture units vs rebinding textures for separate shaders
在我目前制作的游戏中，我有两个着色器: 一个用于纹理图集上的 Sprite 一个单独加载的粒子形状纹理。 (我决定将此纹理保留在图集之外，因为我的生成器中的粒子是 GL_POINTS)。目前，我将其
c++ - 我怎么: convert surface to a texture or create a texture with certain multisampling parameters or render a surface with an alpha layer
我正在创建两个渲染目标，两者都必须共享后台缓冲区的深度缓冲区，因此我将它们设置为具有相同的多重采样参数很重要，但是 pDevice->CreateTexture(..) 没有给出任何参数设置多重采样类
textures - 创建一个看起来像地球的球体
如何在 POV-Ray 中创建一个看起来像地球的球体？据推测，答案将涉及获取某种地球 map 并以某种方式将其包裹在球体周围作为纹理。谷歌搜索让我找到了http://www.physics.sfasu
textures - WebGL:顶点着色器中的纹理访问？
是否可以从中的纹理读取顶点带 WebGL 的着色器？我写了一个 WebGL page (只是为了尝试一下)并使用 Chrome 7 对其进行测试。一旦我升级到 Chrome 8，它就停止工作。我仔
texture-mapping - 多个网格上的Vulkan纹理渲染
我正在为一个模型的多个网格渲染不同的纹理，但是我对程序没有太多的了解。有人建议为每个网格创建自己的描述符集，并调用vkCmdBindDescriptorSets()和vkCmdDrawIndexed(
textures - Vulkan 纹理模糊问题
我有一个简单的 Vulkan 设置，它加载了一个相当大的网格文件(女性)并应用了漫反射和法线贴图纹理。顶点着色器: #version 450 core layout (set = 0, bindin
textures - Apple 的织物纹理是如何生成的？
Apple 现在在其许多产品中都使用了这种纹理: 仔细看看: 您可以看到它不仅仅是一堆线条:它具有随机性元素。一般来说，如何才能做到这一点？我对实现不像对概念那么感兴趣。我在网上看过，但找不到任何提示
javascript - 无法从未定义中读取属性 "texture"
我知道这是一个非常常见的问题。我收到无法从未定义中读取属性“纹理”的消息。抱歉，我对 javascript 还很陌生。我的代码的javascript部分如下 this.createTexture=f

首页

博学

6Ren·AI

商城

javascript - ThreeJS ShaderMaterial Texture问题