Hello, I have created my custom model, which, seems like either is broke, or my code. However, this code worked perfectly fine before, but now, when I did some changes, the texture from child.material.map is applied to the whole obj. Here is my code:
import * as THREE from "./three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { OBJLoader } from "./OBJLoader.js";
let container, camera, scene, renderer, mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2, object, controls, texturegold, texturemarble;
container = $("div").get(0);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 2000);
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);
camera.position.z = 250;
scene.add(camera);
const loader = new OBJLoader();
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.set(35, 1, 0);
camera.lookAt(0,0,0);
container.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
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.screenSpacePanning = true;
const manager = new THREE.LoadingManager();
const textureLoader = new THREE.TextureLoader();
texturegold = textureLoader.load("marble.jpg");
texturemarble = textureLoader.load("gold.jpg");
loader.load("badge.obj", function(obj) {
obj.traverse(function(child) {
if(child.isMesh) {
if(child.name === "Torus") {
child.material.map = texturegold;
console.log("gold");
}
if(child.name === "badge_bg_Cylinder") {
child.material.map = texturemarble;
console.log("marble");
}
}
});
obj.position.x = obj.position.y = obj.position.z = 0;
scene.add(obj);
});
document.addEventListener('mousemove', onDocumentMouseMove, false);
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);
}
animate();