Struggling to apply texture to my 3D Dog JSON model exported from clara.io. Tried using Objectloader and Textureloader, but the texture won't load onto the model.
The code might be incorrect or in the wrong place. Looked at other examples but no luck. The main issue is the texture not appearing on the model, and there are no errors in the console either.
If anyone can offer assistance, it would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - Clara.io JSON loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<script src="three.js"></script>
<script src="Detector.js"></script>
<script src="stats.min.js"></script>
<script src="UnpackDepthRGBAShader.js"></script>
<script src="ShadowMapViewer.js"></script>
<script src="dat.gui.min.js"></script>
<script src="OrbitControls.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 4;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
//new attempt at a texture and object loader
var loader = new THREE.TextureLoader();
loader.load("dogtexture.jpg", function ( texture ) {
var material = new THREE.MeshBasicMaterial({ map: texture });
var objectLoader = new THREE.ObjectLoader();
objectLoader.load( "blue-dog1.json", function( obj, texture ) {
obj.scale.set( .04, .04, .04);
scene.add( obj,texture );
});
});
// BEGIN Clara.io JSON loader code
//var objectLoader = new THREE.ObjectLoader();
//objectLoader.load("blue-dog.json", function ( obj ) {
//obj.scale.set( .045, .045, .045);
//scene.add( obj );
//});
//var loader = new THREE.TextureLoader();
//loader.load("dogtexture.jpg", function ( texture ) {
// do something with the texture
//var material = new THREE.MeshNormalMaterial( { map: //texture} );
//} );
// END Clara.io JSON loader code
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x = 400;//vertical camera angle
camera.position.y = 300;
camera.position.z = 150;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>