How can load texture on customize shape created with LineDashedMaterial?

Questions
1

var renderer, scene, camera; var text;

init(); animate();

function init() { // Load a texture var texture = new THREE.TextureLoader().load( ‘image.jpg’ );

// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// scene
scene = new THREE.Scene();

// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 0, 20 );

    const size = 5;
const vertices = new Float32Array([

  // 0,  0, 0,
  -size,  size, 0,
  size,  size, 0,
  size+1,  size-2, 0,
  size+4,  size-2, 0,
  size+4,  size-9, 0,

]); // 4 vertices, 3 coords (xyz) each
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

    const material = new THREE.LineDashedMaterial({
  color: 0xFFA500,
        dashSize: 25,
        gapSize: 1
    });

    const line = new THREE.LineLoop(geometry, material);


 line.computeLineDistances();

scene.add(line); // Combine the geometry and material into a mesh

// scene.add(mesh);

}

function animate() {

requestAnimationFrame( animate );

//controls.update();

renderer.render( scene, camera );

}

Thanks in advance

2

Hi there, I don’t think you can apply textures to a LineDashedMaterial, it doesn’t have the map option: I think you can achieve the dashed pattern using a MeshBasicMaterial with the alphaMap, so you can have transparent and texture repeated.

1 Like
3

Mege2Scene
Mege2Scene1342×751 265 KB

Hello Simone

Hello Simone,

MAny thanks for your help

Here is my target. I need to merge 2 scenes perfectly.

The goal is to give illusion a wall can be removed and its can be replaced by another scene (part of a gaming program)

At the beginning I used planeGeometry and try to load scene inside , everything works well for the loading process, but as you can see the scene can not be merged perfectly.

It’s why i used your link given (https://threejs.org/examples/#webgl_geometry_shapes) in second step, especially the california shape , but the california[] array point is very difficult to use + multiscalar function . Then it’s very difficult to build a custom shape that will be the perfect image of my wall to replace the scene behind. It’s very impossible to target the vector point that represent coordinate points of the corner of my wall and build a new shape.

Then I used the lineDashedMaterial which is very easy to custom a shape, in third step, but it’s not possible to load scene in.

It’s why I asked the question on the forum after " How can load texture on customize shape created with LineDashedMaterial"

?"

Please . I very important for me to close this topic. I need it . Please help.

I attached the code. Can you please help me to create an arbitrary shape and load image in please (see part of california)?

All images of scene have their url on the web in my code.twoSceneOld.html (12.0 KB)