Learn how to create a "generated" texture coordinate in three.js similar to how it is done in Blender Cycles

Question

Learn how to create a "generated" texture coordinate in three.js similar to how it is done in Blender Cycles

How can I properly display a texture on a cylinder object using THREE.js without distortion? Currently, the texture appears stretched along the edges of the cylinder as shown here: https://i.sstatic.net/O2YFr.png

This issue is based on the texture provided here: https://i.sstatic.net/gdN1y.jpg

I am aiming for a result similar to the "generated" texture coordinate setting in Blender Cycles which avoids distortion. See an example here: https://i.sstatic.net/A8QAP.png

In THREE.js, how can I adjust the texture coordinates to achieve this effect?

EDIT::: There's been a request for the actual source code, so here it is (even though it's complicated):

var COBY = new (function() {
// Source code goes here
})();

javascript three.js

Answer 1

Answer №1

When it comes to using THREE.CylinderGeometry() and THREE.CylinderBufferGeometry(), both functions perform as expected:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

//var cylGeom = new THREE.CylinderGeometry(5, 5, 1, 8);
var cylGeom = new THREE.CylinderBufferGeometry(5, 5, 1, 8);

var texLoader = new THREE.TextureLoader();
var texEnd = texLoader.load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg");
texEnd.wrapS = THREE.RepeatWrapping;
texEnd.wrapT = THREE.RepeatWrapping;
texEnd.repeat.set(1, 1);
var texSide = texLoader.load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg");
texSide.wrapS = THREE.RepeatWrapping;
texSide.wrapT = THREE.RepeatWrapping;
texSide.repeat.set(1, 1 / (cylGeom.parameters.radiusTop * cylGeom.parameters.radiusBottom));

var cylMatEnd = new THREE.MeshBasicMaterial({
  map: texEnd
});
var cylMatSide = new THREE.MeshBasicMaterial({
  map: texSide
});
var cyl = new THREE.Mesh(cylGeom, [cylMatSide, cylMatEnd, cylMatEnd]);
scene.add(cyl);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 2

When it comes to using THREE.CylinderGeometry() and THREE.CylinderBufferGeometry(), both functions perform as expected:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

//var cylGeom = new THREE.CylinderGeometry(5, 5, 1, 8);
var cylGeom = new THREE.CylinderBufferGeometry(5, 5, 1, 8);

var texLoader = new THREE.TextureLoader();
var texEnd = texLoader.load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg");
texEnd.wrapS = THREE.RepeatWrapping;
texEnd.wrapT = THREE.RepeatWrapping;
texEnd.repeat.set(1, 1);
var texSide = texLoader.load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg");
texSide.wrapS = THREE.RepeatWrapping;
texSide.wrapT = THREE.RepeatWrapping;
texSide.repeat.set(1, 1 / (cylGeom.parameters.radiusTop * cylGeom.parameters.radiusBottom));

var cylMatEnd = new THREE.MeshBasicMaterial({
  map: texEnd
});
var cylMatSide = new THREE.MeshBasicMaterial({
  map: texSide
});
var cyl = new THREE.Mesh(cylGeom, [cylMatSide, cylMatEnd, cylMatEnd]);
scene.add(cyl);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Learn how to create a "generated" texture coordinate in three.js similar to how it is done in Blender Cycles

Answer №1

Similar questions

Different Ways Split Button Format Can Vary Based on Web Browser

Pictures in the portfolio failing to load on Mozilla Firefox

What's the best way in Angular 6 to set focus on an element that's being made content editable?

React TypeScript - creating a component with a defined interface and extra properties

Developing ES6 modules in C++ using Node.js

Download the ultimate HTML package with a built-in chart.js component directly from your nuxt app

Troubleshooting jQuery compatibility issues with Wordpress

Capturing the input value from a text box within a table cell, saving it in an array using Javascript, and then transmitting it back

Is there a method to redirect and display a JavaScript message efficiently?

Moving from one page to another

Navigating Angular.js: finding my way to the endpoint paths

What could be causing my if statement to fail even though the condition is met?

Utilizing Javascript and CSS for horizontal alignment from left to right

What is the button that switches the bootstrap modal?

Issue encountered: Unforeseen command: POST karma

Angular: Defining variables using let and var

How do I use props to enable and conceal elements like lists, buttons, and images?

How can I preserve the line break in a textarea using PHP?

Passing events from a grandchild component up to its grandparent component in VueJS 2.0

Guide on Adding a Map to a List in JavaScript