Hello, Im new to three, and my objective is to create a CS:GO 3D weapon inspector. However. Im encountering countless anount of problems, one of the being this:
I have 3 part model, once I apply the same texture to all of the parts, the some partitions are still not textures, so either my models are broken, or Im doing something wrong and then I encountered another problem, that I have a normal model, however it isnt separated and I need to use a texture on its part which isnt textured by default. I tried looking at some other websites, but either their code is extremely different or is obfuscated. So let me do an overview. I have two questions. I have noticed that when I looked at the source of other websites which do not have this problem, they seem to be using some sort material map in array, I think this has something to do with that, they apply different textures at specific locations on one object. I think the rest will be caused by the same issue too. Thanks for any help.
So the question is: How do I apply different textures to specific locations of an object, without actually having to know which coordinates it has to be on
If you want to do this without having to write your own shader, you could split your geometry into groups, which will be rendered in separate draw calls, with separate materials. Then instead of assigning only one material to your mesh with groups, you can pass an array of materials with different material textures and parameters.
Well, I really dont know how to do that, but is it possible that the obj file would contain some information for that, since I have looked further and some weapon models render for me with much more elements, while the same obj on their website displays barely with anything that I have got (Yes, Im sure Im using the same obj as they do), however, all the places are either white (my first issue, when I just cannot apply the texture to the specific part, but the rest works okay) or I see the entire texture displayed there
I think you will need to provide a editable example to demonstrate your issue, if you want us to be able to help you properly.
Ah. I wanted to, but I’m used to stackoverflow where my account has been multiple times banned for requesting someone to specifically, solve my problems rather than asking a question. So, are you saying I might just send my code for someone to take a look at and not get banned?
You can simply publish the code here and specify your question using the code example. 
Write a jsfiddle or codepen.
Or copy a code snippet and format it with the icon in the toolbar. 
There are many examples here. See my collection.
Links always in source code.
Okay, so I will provide everything needed to run my code.
script.js
import * as THREE from "./three.module.js";
import { OBJLoader } from "./OBJLoader.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
let container, camera, scene, renderer, mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2, object, object2, object3, controls;
var memodels = ["AWP", "AK-47"];
var m2models = ["AUG"];
container = $(".3dcontent").get(0);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 250;
scene = new THREE.Scene();
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 0.8);
camera.add(pointLight);
scene.add(camera);
function inspect3d(weapon, skin) {
function loadModel() {
object.traverse(function(child) {
if(child.isMesh) {
child.material.map = texture;
}
});
if(memodels.includes(weapon)) {
object2.traverse(function(child) {
if(child.isMesh) {
child.material.map = texture;
}
});
}
if(m2models.includes(weapon)) {
object3.traverse(function(child) {
if(child.isMesh) {
child.material.map = texture;
}
});
}
object.position.y = 0;
scene.add(object);
if(memodels.includes(weapon)) {
object.add(object2);
}
if(m2models.includes(weapon)) {
object.add(object3);
}
}
const manager = new THREE.LoadingManager(loadModel);
manager.onProgress = function (item, loaded, total) {
console.log(item, loaded, total);
};
const textureLoader = new THREE.TextureLoader(manager);
const texture = textureLoader.load("textures/" + weapon + "/" + skin + ".jpg");
function onProgress(xhr) {
if (xhr.lengthComputable) {
const percentComplete = xhr.loaded / xhr.total * 100;
console.log('model ' + Math.round( percentComplete, 2 ) + '% downloaded');
}
}
function onError() {}
const loader = new OBJLoader(manager);
loader.load("models/" + weapon + "_m0.obj", function (obj) {
object = obj;
if(memodels.includes(weapon)) {
loader.load("models/" + weapon + "_m1.obj", function (obj2) {
object2 = obj2;
}, onProgress, onError);
}
if(m2models.includes(weapon)) {
loader.load("models/" + weapon + "_m2.obj", function (obj3) {
object3 = obj3;
}, onProgress, onError);
}
}, onProgress, onError);
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(35, 1, 0);
camera.lookAt(0,0,0)
controls.autoRotate = false;
controls.autoRotateSpeed = 0.75;
controls.rotateSpeed = 0.75;
controls.enablePan = true
controls.panSpeed = 0.025;
controls.enableZoom = true
controls.zoomSpeed = 1.4;
controls.enableDamping = true;
controls.dampingFactor = 0.02;
controls.staticMoving = true;
controls.enableKeys = false;
controls.maxDistance = 50;
controls.minDistance = 5;
controls.screenSpacePanning = true;
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) / 2;
mouseY = (event.clientY - windowHalfY) / 2;
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
inspect3d("AUG", "Akihabara");
animate();
index.html
<!DOCTYPE html>
<html>
<head>
<title>CS:GO 3D Inspect</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="design.css" />
<script src="script.js" type="module"></script>
</head>
<body>
<div class="3dcontent"></div>
</body>
</html>
Here is the list of my models and textures for the AUG:
https://upload.hicoria.com/files/zndDPTdn.txt
(I cant post more than 5 links)
I think this is solved by Second side of my object renders weird ? Or is this a separate texturing issue?
It has been, I just dont know how to make a post with my solution. The problem was, that I had no idea that OBJ models could contain custom childs (or nodes or however you call it), but now I managed to fix it.