【发布时间】：2018-08-20 04:53:23
【问题描述】：
我正在尝试为我从 clara.io 导出的 3D Dog JSON 模型添加纹理。我使用 Ojectloader 加载 3D 模型，然后尝试使用 Textureloader 加载纹理，但纹理似乎没有加载到模型上。
也许我的代码是错误的，或者是在错误的地方。我曾尝试查看其他示例，说明人们如何做到这一点，但运气不佳。正如我所说，问题是纹理似乎没有将图像加载到模型上。 chrome的控制台也没有错误。
如果有人可以提供任何帮助，谢谢。
<!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>
【问题讨论】：
标签： javascript json three.js