我想加载一个.obj文件,并在运行时通过按钮点击使用three.js改变它的纹理/材料

i want to load a .obj file and change its texture/material at run-time by button click using three.js

本文关键字:three 按钮 js 改变 材料 纹理 加载 一个 obj 运行时 文件      更新时间:2023-09-26

每次我想加载加载我的模型并改变它的纹理时,模型没有加载,屏幕上什么也没有。我是三个。js/webgl语言和javascript的新手。请帮助我进行正确的信息。下面是代码。https://drive.google.com/open?id=0BxJJ7XpRqKz4S3JONlAwSHJxdFk这个链接提供了我在这个项目中使用的资源。

// once everything is loaded, we run our Three.js stuff.
function init() {
    var stats = initStats();
    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();
    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    // create a render and set the size
    var webGLRenderer = new THREE.WebGLRenderer();
    webGLRenderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));
    webGLRenderer.setSize(window.innerWidth, window.innerHeight);
    webGLRenderer.shadowMapEnabled = true;
    // position and point the camera to the center of the scene
    camera.position.x = 100;
    camera.position.y = 40;
    camera.position.z = 50;
    camera.lookAt(scene.position);
    scene.add(camera);
    // add spotlight for the shadows
    var spotLight = new THREE.DirectionalLight(0xfa93e5);
    spotLight.position.set(30, 40, 50);
    spotLight.intensity = 0.5;
    scene.add(spotLight);
    // add the output of the renderer to the html element
    document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
    // call the render function
    var step = 0;

    // setup the control gui
    var controls = new function () {
        // we need the first child, since it's a multimaterial

    };
    var gui = new dat.GUI();
    //model
var loader = new THREE.OBJLoader();
loader.load( 'sofa 1.obj', function (object) );



var sofa = new THREE.Mesh(object,fabric_1);
    var texture = new THREE.ImageUtils.loadTexture("defaultMat_Base_Color(1).png");
    var texture2 = new THREE.ImageUtils.loadTexture("defaultMat_Base_Color_1.png");
    var material = THREE.ImageUtils.loadTexture("defaultMat_Normal_DirectX bump.png");
    var material1 = THREE.ImageUtils.loadTexture("sofa new final4 high-AO_u0_v0.png");
    var material2 = THREE.ImageUtils.loadTexture("lambert2SG_Roughness specular.png");
    var fabric_1 = new THREE.MeshPhongMaterial(
    { fabric_1.map = texture;
      fabric_1.normalMap = material;
      fabric_1.aoMap = material1;
      fabric_1.specularMap = material2;  });

    var fabric_2 = new THREE.MeshPhongMaterial(
    { fabric_2.map = texture_2;
      fabric_2.normalMap = material;
      fabric_2.aoMap = material1;
      fabric_2.specularMap = material2;
    });
    scene.add(sofa),
    function setfabric_1 () {
        sofa.traverse(function(child){
        if(child instanceof THREE.Mesh){
          child.material = fabric_1;
          }
          sofa.geometry.uvsNeedUpdate = true;
          sofa.needsupdate = true;
        });
        } 
    function setfabric_2 () {
        sofa.traverse(function(child){
        if(child instanceof THREE.Mesh){
          child.material = fabric_2;
          }
          sofa.geometry.uvsNeedUpdate = true;
          sofa.needsupdate = true;
        });
        } 
    render();

    function render() {
        stats.update();
        if (mesh) {
            mesh.rotation.y += 0.006;
            ;           
        }
        // render using requestAnimationFrame
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);
    }
    function initStats() {
        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms
        // Align top-left
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.getElementById("Stats-output").appendChild(stats.domElement);
        return stats;
    }
}
window.onload = init;

使用制服将局部变量链接到着色器,但要确保先预加载纹理。threejs.org/uniforms。最好还是用

"uTexArray" : { type: "tv", value: [ new THREE.Texture(), new THREE.Texture() ] } // texture array (regular)

输入链接描述