adding texture to a json object - three.js
Question
I am trying to add texture to my 3D Dog JSON model which I have exported from clara.io. I have used Ojectloader to load the 3D model and then tried using a Textureloader to load the texture, but the texture doesn't seem to load onto the model.
Maybe my code is wrong, or is in the wrong place. I have tried looking at other examples of how people have done this but not gotten much luck. As I said the problem is the texture doesn't seem to load the image onto the model. Also there are no errors on the console in chrome as well.
If anyone could be any help, thank you.
<!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>
1 answers
solution1
1 ACCPTED 2016-12-23 19:38:46
MeshNormalMaterial is probably not the type of material you want.
Try MeshBasicMaterial or MeshPhongMaterial .
Description of MeshNormalMaterial taken from here
A material that maps the normal vectors to RGB colors.
Scroll down the left side of the three.js docs to see the other types of materials available.
EDIT..
Your never add the material onto the object..
EDIT..
Adding some example code. I will use ObjectLoader as you seem to have this working.
// Create material for later use.
var material = new THREE.MeshBasicMaterial();
// Create ObjectLoader.
var objectLoader = new THREE.ObjectLoader();
// Initiate load of model
objectLoader.load("blue-dog1.json", function(obj) {
// The documentation for ObjectLoader says it can't load geometries.. confusing (I have never used the ObjectLoader class)
// But since you say it is working, we'll run with it.
// obj will be an Object3D, so we must traverse it's children and add the material (I think).
obj.traverse(function(child) {
if(child instanceof THREE.Mesh) {
child.material = material;
}
}
// Now the Object is loaded and the material is applied..
// Add it to the scene (maybe do this after the texture is loaded?).
scene.add(obj);
// Load the texture.
var loader = new THREE.TextureLoader();
loader.load("dogtexture.jpg", function(texture) {
// Apply texture to material.
material.map = texture;
// Maybe this is needed.
material.needsUpdate = true;
}
}
This code is untested, and there might be some closure issues, but it should get you on the right track.
If you cant get this working, try searching for examples using the JSONLoader class.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.