我正在try 添加两个纹理.一个放在墙上,一个放在地板上.渲染后,我只是得到一个纯色,而不是纹理. 以下是我的场景和摄像头配置:

    const tempScene = new THREE.Scene();
    tempScene.background = new THREE.Color(0x021D49);
    const ambient = new THREE.AmbientLight(0xffffff, 0.6);
    tempScene.add(ambient);
    const directionalLight = new THREE.DirectionalLight(0xfafafa, 0.6);
    directionalLight.position.set(0, 300, 300);
    tempScene.add(directionalLight);

    const tempCamera = new THREE.PerspectiveCamera(
      60,
      el.clientWidth / el.clientHeight,
      0.1,
      10000,
    );

    tempCamera.up.set(0, 0, 1);
    tempCamera.position.set(0, 300, 300);
    tempCamera.lookAt(0, 0, 0);
    const tempControls = new OrbitControls(tempCamera, el);
    tempControls.maxPolarAngle = Math.PI / 2;
    tempControls.minDistance = 10;
    tempControls.maxDistance = 500;
    tempControls.enablePan = false;

    const tempRenderer = new THREE.WebGLRenderer({ canvas: el, antialias: true });
    tempRenderer.setSize(el.clientWidth, el.clientHeight);
    tempRenderer.setPixelRatio(window.devicePixelRatio);
    tempRenderer.shadowMap.enabled = true;
    tempRenderer.shadowMap.type = THREE.PCFSoftShadowMap;
    tempRenderer.outputEncoding = THREE.sRGBEncoding;

以下是纹理的代码:

      const floorTex = new THREE.TextureLoader().load(floorTexture);
      const wallMaterial = new THREE.MeshBasicMaterial({ map: wallTex, side: THREE.DoubleSide });
      const floorMaterial = new THREE.MeshStandardMaterial({ map: floorTex });
      const lineMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });

        const wallGeometry = new THREE.BufferGeometry();
        const wallVertices = new Float32Array([
          -x1,
          y1,
          0, // vertex 1
          -x1,
          y1,
          10, // vertex 2
          -x2,
          y2,
          0, // vertex 3
          -x2,
          y2,
          10, // vertex 4
        ]);
        wallGeometry.setAttribute('position', new THREE.BufferAttribute(wallVertices, 3));
        wallGeometry.setIndex([0, 2, 1, 2, 3, 1]);
        const wall = new THREE.Mesh(wallGeometry, wallMaterial);
        const geo = new THREE.EdgesGeometry(wall.geometry);
        const wireframe = new THREE.LineSegments(geo, lineMaterial);
        wall.add(wireframe);
        wall.castShadow = true;
        wall.receiveShadow = true;
        scene!.add(wall);
        
        
       const floorGeometry = new THREE.Shape(floorPoints.map((point) => new THREE.Vector2(point[0],          point[1])));
      const shapeGeometry = new THREE.ShapeGeometry(floorGeometry);
      const floor = new THREE.Mesh(shapeGeometry, floorMaterial);
      floor.receiveShadow = true;
      scene!.add(floor);

This is how it looks

但在现实中,纹理如下所示: floorTexturewallTexture

推荐答案

您的墙不会应用纹理,因为您没有为wallGeometry定义纹理坐标.在position 旁边,您需要一个保存这些数据的uv缓冲区属性.

不幸的是,代码片段没有提供足够的信息来调查地板没有纹理的原因.ShapeGeometry的实例有一个纹理坐标,所以我可以想象你的纹理有一个加载问题.

顺便说一句:如果在代码中添加tempRenderer.outputEncoding = THREE.sRGBEncoding;,则必须将所有 colored颜色 纹理的encoding属性也设置为THREE.sRGBEncoding.否则,您的sRGB工作流将不完整.

Javascript相关问答推荐

WebGL 2.0无符号整数输入变量

S文本内容和值不必要的不同

更改预请求脚本中重用的JSON主体变量- Postman

确保函数签名中的类型安全:匹配值

在使用位板时,如何在Java脚本中判断Connect 4板中中柱的对称性?

在FAQ Accodion应用程序中使用React useState时出现问题

SPAN不会在点击时关闭模式,尽管它们可以发送日志(log)等

在不删除代码的情况下禁用Java弹出功能WordPress

按下单键和多值

如果一个字符串前面有点、空格或无字符串,后面有空格、连字符或无字符串,则匹配正则表达式

匹配一个或多个可选重复的特定模式

为什么我看到的是回复,而不是我的文档?

如何在Reaction中清除输入字段

未找到用于 Select 器的元素:in( puppeteer 师错误)

我如何才能让p5.js在不使用实例模式的情况下工作?

使用jQuery每隔几秒钟突出显示列表中的不同单词

JavaScript structuredClone在Chrome/Edge中获得了非法调用,但在NodeJS中没有

如何在不获取其子元素的文本内容的情况下获取元素的文本内容?

从D3 v3更新,没有错误,但输出SVG路径不可见

typewriter 效应和容器大小