需要帮助的进口GLTF模型的纹理变化
需要帮助的进口GLTF模型的纹理变化
提问于 2019-01-04 04:14:32
我正在用Three.js在我的web应用程序上实现3d模型。问题是在输入的gltf模型上更新纹理图像是不正确的。我首先使用gltf-导出插件从3ds max导出模型。我得到3个文件，分别是.bin、.gltf、.texture图像文件。之后，我将这三个文件和其他纹理图像文件放在同一个文件夹中。
之后，我使用来自GLTFLoader的Three.js将gltf文件加载到我的web上。它工作得很好，如下所示。
但是当我试图用TextureLoader改变具有绿色的纹理图像并应用到我的模型上时，它会如下所示。
我认为问题可能是GLTFLoader已经加载了原始的gltf文件，使用加载后不可编辑的.bin文件呈现，并且我正在向其应用外部纹理图像。但这并不是问题的原因，因为当我第一次加载相同的纹理图像时，它会出现同样的问题，它会显示相同颜色的混乱模型。
基本上，我得出了这个结论。在我成功地以gltf格式加载我的模型之后，手动更新纹理是不正确的。下面是我的源代码。我正在分享下面导出的gltf模型文件。
<%@ 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>
回答 1
Stack Overflow用户
发布于 2019-01-05 21:05:34
此模型在纹理上使用“重复”包装，添加新纹理时需要添加这些内容：
newTexture.wrapS = THREE.RepeatWrapping;
newTexture.wrapT = THREE.RepeatWrapping;我认为其他的东西都在这里，但是在GLTFLoader文档的纹理部分中还有其他一些常见的设置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54033037
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号