Partially extended texture in Three.js

Currently, I am using the Collada loader in Three.js r65 to load my 3D object. Upon loading, I apply a texture to all parts of the model using the following code snippet.

var loader = new THREE.ColladaLoader();

loader.options.convertUpAxis = true;
loader.load('obj/cdg/Grenada-test1.dae', function(collada) {

    var texture = new THREE.ImageUtils.loadTexture("../models/textures/Gr1 08869 Bready Grey.jpg");

    var material = new THREE.MeshPhongMaterial({map: texture, tranparent: true});
    for (var i = 0; i < collada.scene.children.length; i++) {
        collada.scene.children[i].material = material;
    }

});

In Three.js, the texture appears stretched at certain locations.

The object displays correctly in Unity 3D when a texture is applied, as shown in the image below.

My attempted solutions so far include:

  • Updating the UV mapping in Three.js and Blender
  • Loading the model in Unity 3D to check if the issue persists
  • Browsing through several SO questions but unable to find a solution

If anyone has insights into why this strange texture issue is happening and how it can be fixed, your help would be greatly appreciated!

Thanks in advance!

Edit:

This is the result with texture.repeat.set( 2, 2 )

And this is what happens with texture.repeat.set( 10, 10 )

Increasing the texture repeat causes the texture to disappear and be replaced by a solid color...

Answer №1

To ensure seamless texture wrapping, adjust the wrapS and wrapT properties to THREE.RepeatWrapping:

Set texture.wrapS = THREE.RepeatWrapping;
Set texture.wrapT = THREE.RepeatWrapping;

Also, remember that your textures should be in "power of 2" sizes such as 16x16, 32x32, 64x64, 128x128, etc.

Answer №2

Did you attempt to enable texture repeating? You can accomplish this by using the following code snippet:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 2, 2 );

Answer №3

Is there a way to apply multiple textures to the same object? Any suggestions?

To achieve this, you can utilize a materialArray and assign a unique texture to each Face of the Vertex that requires texturing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

GraphQL queries that are strongly-typed

Currently working on a Vue CLI project where I am utilizing axios as my request library. In all the examples I've come across, they use strings for queries like this: { hero { name friends { name } } } Given that I am employing ...

Challenges Encountered when Making Multiple API Requests

I've encountered a puzzling issue with an ngrx effect I developed to fetch data from multiple API calls. Strangely, while some calls return data successfully, others are returning null for no apparent reason. Effect: @Effect() loadMoveList$: Obse ...

The array does not store the ObjectId

I'm trying to implement the favoriting feature following a tutorial, but I'm encountering issues with making it work. Any assistance would be greatly appreciated. Thank you! UserSchema: var UserSchema = new mongoose.Schema({ username: {type ...

Separating an Array Subset in JavaScript/jQuery

I need to filter a specific part of a javascript array containing objects by a particular condition, such as: object.property == 2 Instead of manually building a new array with the matching items, I am curious if there is a shortcut for this process. ...

Modify the CSS using JavaScript after a brief delay

I'm creating a homepage that includes animations. Inside a div, I initially have display: none, but I want it to change to display: block after a few seconds. I've been trying to use JavaScript for this purpose, but I'm struggling to find th ...

Using jQuery to organize object properties based on the value of another property

Within my collection, I have an array of objects structured as shown below. [ {"rel_id": 1,"forward_flag": true,"asset_id":5,}, {"rel_id": 1,"forward_flag": true,"asset_id":8}, {"rel_id": 1,"forward_flag": false,"asset_id":3}, {"rel_id": 2,"forwar ...

Experiencing difficulties launching my Server.JS due to a listening error

Hey there, I'm struggling to get my server.js up and running. Whenever I try to run node on it, I keep getting the error message "listening on *:3000". Below is the code for my server.js: var app = require('express')(); var http = require(&a ...

When I attempted to run `npm start`, an error with status code 1 was thrown,

Upon running npm start, the following error is displayed: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4c5d5d6d1d031c031d">[email protected]</a> start /Users/user/Desktop/react-tutorial > react-script ...

jquery function context

I'm having trouble grasping function scope in this scenario. When a button is clicked, it triggers a dialog box with a textarea inside displaying a URL that can be copied for camera setup. <button id="axis-details" onclick="apikey('<?php e ...

angularjs .reject not executing correctly within the then statement

I'm having trouble identifying the bug in my code. For some reason, $q.defer().reject() isn't functioning correctly. defer.resolve works as expected and even reaches the finally segment, but defer.reject (although it doesn't throw an error) ...

Guide on using a pipe feature with varying arguments when the main function is called

I am delving into functional programming for the first time and have a query regarding using pipes. Imagine I have this particular function: const updateArray = R.curry((index, value, array) => Object.assign([], array, {[index]: v ...

Displaying an RSS feed inside a designated div element

Seeking assistance from all you wonderful individuals for what seems to be a simple problem. Here is the HTML code I am working with: <div id="rssfeed"></div> Along with JavaScript that includes the FeedEK plugin $(document).ready(function ...

Issue with Vue Loading Overlay Component functionality in nuxt2 .0

I've integrated the vue-loading-overlay plugin into my project. plugins/vueloadingoverlaylibrary.js import Vue from 'vue'; import Loading from 'vue-loading-overlay'; // import 'vue-loading-overlay/dist/vue-loading.css'; ...

box tick does not alter appearance

I've been struggling with this seemingly simple issue for an hour now. I have a radio button set up with two buttons: <input class="form-control icheck" id="cash_prize" name="cash_prize" type="radio" value="1" style="position: absolute; opacity: 0 ...

Ensure the video plays automatically without being muted

<div class="tab-img"> <video id="autplay-video" width="320" height="240" controls autoplay poster="https://solax-prod.s3.amazonaws.com/demo/Thumbnail+English-SOLAx+Video.jpg& ...

Determine the Availability of a URL with AngularJS

Looking for a way to verify the existence of a URL like www.testsite.com/mypage using AngularJS. Is this possible? Any suggestions from the community? ...

Step-by-step guide on how to showcase elements within v-for by clicking on them

In my data array, only the first element is visible by default. Clicking on either the YES or NO button will display the element with the corresponding id of yes_section or no_section (depending on which button was clicked). For instance, if we click on ...

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

Include the aria-labelledby attribute in the jQuery Datatable Pagination

Check out the HTML output created by the Jquery Datatable plug-in for pagination(https://datatables.net/plug-ins/pagination/full_numbers_no_ellipses): <div class="dataTables_paginate paging_full_numbers" id="my-table_paginate" aria-l ...

Elevate the React experience by smoothly sliding a fixed navbar upwards when scrolling down, and elegantly sliding it

tl;dr Don't miss the solution at the end! Looking to create a slide up and down effect on a fixed navbar in react? What's the best approach - using refs or the componentDidMount lifecycle hook? hideNav = (navbar) => { const hide = () ...