Question

我正在Web应用程序中使用Three.js实现3d模型。问题是在导入的gltf模型上更新纹理图像无法正常工作。我首先使用gltf-export插件从3ds max导出了模型。我得到3个文件，分别是.bin，.gltf，.texture图像文件。之后，我将这三个文件和其他纹理图像文件放在同一文件夹中。

之后，我使用Three.js的GLTFLoader在我的网站上加载了gltf文件。如下所示效果很好。

First time rendering gltf model

但是当我尝试使用TextureLoader更改具有绿色的纹理图像并将其应用到我的模型时，它如下所示显示。

After changing texture image that has green color

我认为问题可能是GLTFLoader已经使用.bin文件加载了原始gltf文件渲染，一旦加载，我将在其上应用外部纹理图像。但这不是问题的根源，因为在第一次加载模型时应用相同的纹理图像会显示相同的问题，它会显示具有相同颜色的相同混乱模型。

所以基本上，我得出了这个结论。成功将模型加载为gltf格式后，手动更新纹理无法正常工作。下面是到目前为止的源代码。我在下面共享导出的gltf模型文件。

https://drive.google.com/open?id=1mZrQHVJHmFv0Q_I1aInqmgA4-WtZDwID

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page session="false" %>

<!doctype html>

<head>
	<script src="<c:url value="/resources/three.js" />"></script>
	<script src="<c:url value="/resources/three.min.js" />"></script>
	<script src="<c:url value="/resources/OrbitControls.js" />"></script>
	<script src="<c:url value="/resources/GLTFLoader.js" />"></script>
	
	<style type="text/css">

	    #canvas {
	    width: 600px;
		height: 600px;
		background: white;
		}
  </style>
</head>
<body>

<div id="canvas"></div>

<select id="colorOption" onchange="setAnotherTexture()">
  <option value="blue">blue</option>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="black">black</option>
</select>

<script type='text/javascript'>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer, modelObj;

init();
animate();

// Sets up the scene.
function init() {

	// Create the [SCENE] and set the scene size.
	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xffffff );
	//Create a [RENDERER] and add it to the DOM.
	renderer = new THREE.WebGLRenderer({antialias:true});
	//renderer.gammaFactor = 2.2;
	
	var container = document.getElementById('canvas');
    var WIDTH = container.offsetWidth;
    var HEIGHT = container.offsetHeight;
    
	renderer.setSize(WIDTH, HEIGHT);
	container.appendChild(renderer.domElement);
	
	
	// Create a [CAMERA], zoom it out from the model a bit, and add it to the scene.
    camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
    camera.position.set(0,6,0);
    scene.add(camera);
    
    
    // Update the Viewport on Resize
	// Create an event listener that resizes the renderer with the browser window.
	window.addEventListener('resize', function() {
		var WIDTH = container.offsetWidth,
		    HEIGHT = container.offsetHeight;
		
		renderer.setSize(WIDTH, HEIGHT);
		camera.aspect = WIDTH / HEIGHT;
		camera.updateProjectionMatrix();
    });
	
    
	// Add Lighting
	// Set the background color of the scene.
    renderer.setClearColor(0xffffff, 1);
    renderer.gammaOutput = true;
    
    // Create a light, set its position, and add it to the scene.
    var light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
	//light.position.set( 0, 1, 0 );
	scene.add( light );
	
    
 	// Instantiate a loader
    var loader = new THREE.GLTFLoader().setPath( 'resources/models/gltf/Hermes_Berkin/' );
	loader.setResourcePath( 'resources/models/gltf/Hermes_Berkin/' );
 	
    loader.load( 'hermes.gltf', function ( gltf ) {
		
    	modelObj = gltf.scene;
    	
    	scene.add( modelObj );
    	
		console.log(modelObj);
		
    }, undefined, function ( error ) {

    	console.error( error );

    } );
    
    
 	
    // Add Controls
 	// Add OrbitControls so that we can pan around with the mouse.
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    //container.addEventListener("touchstart", handlerFunction, false);

}

//Renders the scene and updates the render as needed.
function animate() {

	// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
	requestAnimationFrame(animate);
	
	// Render the scene.
	renderer.render(scene, camera);
	controls.update();

}

function setAnotherTexture() {
	var textureColor = document.getElementById("colorOption").value;
	var textureLoader = new THREE.TextureLoader();
	
	var newTexture = textureLoader.load( "resources/models/gltf/Hermes_Berkin/hermes_birkin_" + textureColor + "_d.jpg");
	
	newTexture.encoding = THREE.sRGBEncoding;
	newTexture.flipY = false;

 	modelObj.traverse( function ( child ) {
		
		if (child instanceof THREE.Mesh) {
		    //create a global var to reference later when changing textures
		    //apply texture

	    	child.material.map = newTexture;
	    	child.material.needsUpdate = true;
	    	child.material.map.needsUpdate = true;

		}
	});
	console.log(modelObj);

}
</script>

</body>

Answer 1

此模型在纹理上使用“重复”包装，添加新纹理时需要将其添加到新纹理中。

newTexture.wrapS = THREE.RepeatWrapping;
newTexture.wrapT = THREE.RepeatWrapping;

我认为您这里还有其他所有内容，但是GLTFLoader docs的纹理部分中介绍了一些其他常用设置。

在导入的GLTF模型及其纹理变化方面需要帮助

1 个答案: