定制UVgenerator Three.js用于挤压几何 [英] Custom UVgenerator Three.js for extrudedgeometry

问题描述

我想在挤压几何体的表面上使用纹理。我一直在研究定制UV发生器，并发现了这些相关问题：
1.）
2.）然而，该方法提出将我的几何点分为1000和 mesh.scale .set（1000,1000,1）不起作用，因为我的几何图形不再位于正确的位置。我宁愿指定UV贴图。一个答案说基于源代码实现一个自定义uvgenerator，但我被卡住&不知道该怎么做。

这是我的几何创建，材质为512x512px，我怎样才能将纹理映射到顶端？

  pointList = [[0,0,0]，
 [0,1000,0]，
 [750， 1000,0]，
 [750,750,0]，
 [1000,750,0]，
 [1000,0,0]] 
 
 for（i = 0; i< pointList.length; i ++）{
 
 point = pointList [i]; 
 
 x =点[0]; 
 y =点[1]; 
 
 myPoints.push（new THREE.Vector2（x，y））; 
} 
 
 myShape = new THREE.Shape（myPoints）; 
 extrusionSettings = {
 amount：height 
}; 
 
 myGeometry = new THREE.ExtrudeGeometry（myShape，extrusionSettings）; 
 resultshape = new THREE.Mesh（myGeometry，material）; 
  

解决方案

您可以为<$ c $指定自定义UV通过指定你自己的 UVGenerator ，这是 extrusionSettings 的其中一个属性，通过 ExtrudeGeometry / p>

要指定您的自定义UV生成器，您可以使用 THREE.ExtrudeGeometry.WorldUVGenerator 作为模板，它可以找到在 src / extras / geometries / ExtrudeGeometry.js 。

有一个更简单的解决方案，

您可以利用偏移和重复您的纹理的属性。使用以下模式：

  texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
 texture.repeat.set（1 / 500,1 / 500）; 
 texture.offset.set（0.1，0.5）; 
  

three.js r.68

I want to use a texture on the surface of my extruded geometry. I have been researching custom UVgenerators for a while now, and have found these related questions: 1.) How to apply a texture to THREE.ExtrudeGeometry? 2.) Loaded texture appears blurred, or like a single color. How to make the texture crisp and sharp

However, the method proposed to divide my geometry points by 1000 and to mesh.scale.set(1000,1000,1) doesn't work because my geometry is no longer in the correct place. I would prefer to specify the UV Mapping. One answer says to implement a custom uvgenerator based on the source code, but I am stuck & can't figure out what to do.

This is my geometry creation, the material is 512x512px, how can I map a texture onto the top?:

pointList=[[0,0,0],
        [0,1000,0],
        [750,1000,0],
        [750,750,0],
        [1000,750,0],
        [1000,0,0]]

for (i=0;i < pointList.length; i++) {

        point = pointList[i];

        x = point[0];
        y = point[1];

        myPoints.push( new THREE.Vector2 (x,y) );
    }

    myShape = new THREE.Shape( myPoints );
    extrusionSettings = {
        amount:height
    };

    myGeometry = new THREE.ExtrudeGeometry( myShape, extrusionSettings );
    resultshape = new THREE.Mesh( myGeometry, material );

解决方案

You can specify custom UVs for your ExtrudeGeometry by specifying your own UVGenerator, one of the properties of extrusionSettings.

To specify your custom UV generator, you can use as a template THREE.ExtrudeGeometry.WorldUVGenerator, which can be found in src/extras/geometries/ExtrudeGeometry.js.

There is a simpler solution that may work for you, however.

Instead of a custom UV generator, you can take advantage of the offset and repeat properties of your texture. Use the following pattern:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1 / 500, 1 / 500 );
texture.offset.set( 0.1, 0.5 );

three.js r.68

这篇关于定制UVgenerator Three.js用于挤压几何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！