threejs更换贴图
示例1
var fbxModelfilepath = './example.fbx';
var fbxLoader = new THREE.FBXLoader();
fbxLoader.load(fbxModelfilepath,function(fbxObject){
fbxObject.traverse(function(child){
if(child instanceof THREE.Mesh)
{
if(child.name.indexOf("Body") != -1)
{
var loader = new Three.TextureLoader();
loader.load(
'./Resource/body.png',
function (texture) {
child.material.map = texture;
child.material.needsUpdate = true;
console.log("身体贴图更新完毕");
},
undefined,
function (err) {
console.error('An error happened.');
}
);
}
}
});
scene.add(fbxObject);
});
示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
overflow: hidden;
}
.switchPanel {
width: 100%;
position: fixed;
bottom: 8%;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
}
.chartlet {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
margin: 20px;
position: relative;
transition: 0.3s;
}
.chartlet:hover {
box-shadow: 0px 2px 5px #525151;
}
.chartlet img {
width: 100%;
transform-origin: 5% 95%;
position: absolute;
bottom: 0;
transform: scale(4);
}
</style>
<!--引入three.js三维引擎-->
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
<!-- 引入threejs扩展控件OrbitControls.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<!-- 引入obj模型加载库OBJLoader.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
<!-- 引入obj模型材质加载库MTLLoader.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/MTLLoader.js"></script>
</head>
<body>
<div class="switchPanel">
<div class="chartlet" onclick="changeMap('texture1')">
<img src="./texture1.png" alt="">
</div>
<div class="chartlet" onclick="changeMap('texture2')">
<img src="./texture2.png" alt="">
</div>
<div class="chartlet" onclick="changeMap('texture3')">
<img src="./texture3.png" alt="">
</div>
</div>
</body>
<script>
var scene = new THREE.Scene();
var OBJ;
var OBJLoader = new THREE.OBJLoader();
var MTLLoader = new THREE.MTLLoader();
MTLLoader.load('./material.mtl', function (materials) {
console.log(materials);
OBJLoader.setMaterials(materials);
OBJLoader.load('./model.obj', function (obj) {
scene.add(obj);
obj.children[0].scale.set(5, 5, 5);
OBJ = obj.children[0]
console.log(OBJ)
})
})
function changeMap(img) {
var texture = new THREE.TextureLoader().load(img + '.png');
OBJ.material.map = texture
}
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
var ambient = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambient);
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 150;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);
function render() {
renderer.render(scene, camera);
if (OBJ) {
OBJ.rotation.x += 0.01;
}
requestAnimationFrame(render);
}
render();
var controls = new THREE.OrbitControls(camera);
</script>
</html>