Currently, I am facing a challenge in exporting a model with texture from Blender to be used in Three.js. I am utilizing the Blender export to Three.js plugin for this purpose.
https://i.sstatic.net/sLkKY.png
- (Red): This depicts the model within Blender before exporting, showcasing the marble texture applied to it.
- (Blue): The model after being exported to Three.js format (saved as fullBoard.js) and reopened in Blender.
- (Green): Following the export process using Three.js mentioned earlier.
Below is my JavaScript function used to initialize the model:
function init2(){
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101010 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0.5, 2, 1 ).normalize();
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var loader = new THREE.JSONLoader();
loader.load( 'objects/fullBoard.js', function ( geometry, materials ) {
var material1 = materials[ 0 ]; //black
var material2 = materials[ 1 ]; //white
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh.scale.set(5,5,5);
scene.add( mesh );
} );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
I have been encountering difficulties in finding a straightforward method to create custom 3D models for use with Three.js that include texture. I also experimented with exporting .dae files using the THREE.ColladaLoader(), but unfortunately, this approach did not retain the texture as expected.