J'essaie de créer un long couloir avec une texture répétée. Comment ajouter une texture répétitive et faire pivoter un objet (dans ce cas un plan) à angle droit pour créer le mur de couloir et le plafond?
var texture, material, plane;
texture = THREE.ImageUtils.loadTexture( "../img/texture.jpg" );
texture.wrapT = THREE.RepeatWrapping; // This doesn't seem to work;
material = new THREE.MeshLambertMaterial({ map : texture });
plane = new THREE.Mesh(new THREE.PlaneGeometry(400, 3500), material);
plane.doubleSided = true;
plane.position.x = 100;
plane.rotation.z = 2; // Not sure what this number represents.
scene.add(plane);
4 Réponses :
Pour un exemple de texture répétitive, consultez la source de l'exemple à:
http : //_temkoski.github.com/three.js/texture-repeat.html P>
Je recommande les modifications suivantes à votre code: P>
var texture, material, plane;
texture = THREE.ImageUtils.loadTexture( "../img/texture.jpg" );
// assuming you want the texture to repeat in both directions:
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// how many times to repeat in each direction; the default is (1,1),
// which is probably why your example wasn't working
texture.repeat.set( 4, 4 );
material = new THREE.MeshLambertMaterial({ map : texture });
plane = new THREE.Mesh(new THREE.PlaneGeometry(400, 3500), material);
plane.material.side = THREE.DoubleSide;
plane.position.x = 100;
// rotation.z is rotation around the z-axis, measured in radians (rather than degrees)
// Math.PI = 180 degrees, Math.PI / 2 = 90 degrees, etc.
plane.rotation.z = Math.PI / 2;
scene.add(plane);
Répéter la texture fonctionne pour une seule texture, mais qu'en est-il du double face? Voir la solution ci-dessous.
avion.side = trois.doubleside <- Je pense que vous auriez peut-être fait une faute de frappe ici. Plan.Material.Side = trois.doubleside semble fonctionner bien.
Recherche de solution sans dupliquer toute ma géométrie.
Ici, vous allez dames et messieurs ... P>
var materials = [new THREE.MeshBasicMaterial({map: texture, side: THREE.FrontSide}),
new THREE.MeshBasicMaterial({map: textureBack, side: THREE.BackSide})];
var geometry = new THREE.PlaneGeometry(width, height);
for (var i = 0, len = geometry.faces.length; i < len; i++) {
var face = geometry.faces[i].clone();
face.materialIndex = 1;
geometry.faces.push(face);
geometry.faceVertexUvs[0].push(geometry.faceVertexUvs[0][i].slice(0));
}
scene.add(new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)));
Ça ne foncrionne pas du tout
Je cherchais la même chose et vous venez d'utiliser la propriété trois.Doubleside sur le mauvais objet. Vous devez l'utiliser sur le matériau plutôt que sur le maillage lui-même: ... rien de plus!
imageUtil.loadtexture est obsolète, utilise trois.textureloader () () xxx
Je suppose que le bois devrait être un nom de fichier de texture?
Oui, le paramètre de fonction de première charge est l'URL du fichier. Voir ici: Threejs.org/docs/#api/fr/loaders/TextureloaderLOADER;)
Consultez ma solution ci-dessous, c'est maigre et méchante et fonctionne!