將紋理添加到JSON對象-three.js
[英]adding texture to a json object - three.js
問題描述
我試圖將紋理添加到從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>
1 個解決方案
解決方案1
1 已采納 2016-12-23 19:38:46
MeshNormalMaterial可能不是您想要的材料類型。
嘗試使用MeshBasicMaterial或MeshPhongMaterial 。
從此處獲取的MeshNormalMaterial的描述
將法線向量映射到RGB顏色的材料。
向下滾動three.js文檔的左側以查看可用的其他類型的材料。
編輯..
您永遠不會將材質添加到對象上。
編輯..
添加一些示例代碼。 我將使用ObjectLoader，因為您似乎可以正常工作。
// 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;
}
}
該代碼未經測試，並且可能存在一些關閉問題，但是它應該使您走上正確的道路。
如果無法正常工作，請嘗試使用JSONLoader類搜索示例。
three.js將紋理添加到JSON對象
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.