three.js - texture - three min js download

Exportar un modelo simple con textura de Blender a three.js

Question

Nota: Quiero evitar modificar el modelo en el código de JavaScript y hacer todo el diseño del modelo dentro de Blender.

Nota n. ° 2: Si bien esta pregunta es larga, en realidad es un problema básico (el título lo dice todo). Lo siguiente es "recorrer" el problema.

Estoy intentando exportar modelos de Blender a threejs.org como modelo DAE, pero tengo problemas con los modelos con textura (también he probado el formato JSON y OBJ + MTL):

Para simplificar las cosas, estos son los pasos que realizo (y fallan) para agregar textura al simple "archivo de inicio" que contiene un cubo, una cámara y una luz:

1. Selecciona el cubo
2. En el panel Materiales , asegúrese de que el Material predeterminado para el cubo esté seleccionado.
3. En el panel de Textura , asegúrese de que esté seleccionado "Tex" (la textura predeterminada para el material).
4. Para esta textura, establece Tipo a "Imagen o Película"
5. En la sección Imagen del panel, abra grass1.jpg (una imagen de 512x512) como textura.
6. En la sección de mapeo , cambie las coordenadas a UV.
7. Exporte el modelo como modelo de Collada , marcando las casillas de verificación "Incluir texturas UV", "Incluir texturas de materiales" y "Copiar".

Puede descargar los archivos blend, dae y texture mencionados en estos pasos.

Luego utilizo el siguiente código para cargar el modelo DAE, pero obtengo este error y el cubo no se muestra:

256 [.WebGLRenderingContext] GL ERROR: GL_INVALID_OPERATION: glDrawElements: intento de acceder a vértices fuera de rango en el atributo 2 WebGL: demasiados errores, no se informarán más errores a la consola para este contexto.

<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ColladaLoader.js"></script>
<script>
var scene, camera, renderer;
init();
animate();
function init() {
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 10000);
camera.position.set(10,10,10);
scene.add(camera);
window.addEventListener(''resize'', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
var loader = new THREE.ColladaLoader();
loader.load( ''models/untitled.dae'', function(geometry) {
dae = geometry.scene;
scene.add(dae);
var gridXZ = new THREE.GridHelper(100, 10);
gridXZ.setColors( new THREE.Color(0x8f8f8f), new THREE.Color(0x8f8f8f) );
gridXZ.position.set(0,0,0);
scene.add(gridXZ);
});
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
</script>

Y aquí está la captura de pantalla de Blender después de los mencionados 7 pasos:

Actualización: exportar como archivo js utilizando el exportador JSON para Blender tampoco funciona y dio como resultado el mismo error.

Actualización 2: el mismo error después de exportar a OBJ + MTL y cargarlos con OBJMTLLoader .

Answer 1

El problema es que no ha configurado las coordenadas UV para su modelo. De forma predeterminada, cada cara aplica toda la textura, pero en la licuadora los UV están en blanco al exportar.

Desea configurar específicamente sus coordenadas UV. Estas son coordenadas que muestran cómo aplicar una textura a cada cara.

Asegúrese de desenvolver UV su modelo en la licuadora. Vaya al modo de edición (pestaña), seleccione todas las caras, presione "u" y haga clic en "desenvolver". Luego intente reexportar.

Desenvolver es solo 1 método, hay muchos. Experimente con diferentes métodos en Blender para obtener los resultados que desea (posiblemente la opción "restablecer").