在three.js中更改collor和texture

时间:2017-12-07 01:07:53

标签: javascript three.js

我试图更改材料的颜色和图像,但我没有得到它,我使用以下代码:

public class Server extends NanoHTTPD {
    private final static int PORT = 8080;

    public Server() throws IOException {
        super(PORT);
        start();
        System.out.println("\nRunning! Point your browers to http://localhost:8080/ \n");
    }

@Override
    public Response serve(IHTTPSession session) {
        String msg = "<html><body><h1>IoT server </h1>\n";
        final Map<String, String> parms = session.getParms();
        msg += "<form action='?' method='SUBMIT'>\n";
        msg += "<input type='button' value='test' onclick=\"myFunction("+iLoop+")\">"; 
        msg += "<input name='Submit' type='submit' value='Submit' />";
        msg += "<script>";
        msg += "    function myFunction(f) {";
        msg += "        document.getElementById('Name1').value = 'Hi'+ eval(GetPin(f));";  // Something like this?
        msg += "    }";
        msg += "</script>";
        msg += "</form>\n";
        return new NanoHTTPD.Response(msg + "</body></html>\n");

    }


    String GetPin(String s) {

        // lots of code here but the net result is to return a value 

        return MyActivity.getIOPin(s)   
    }

}

但它不起作用。 在物体中我有3种材料,我想改变一种颜色并替换另一种颜色。

1 个答案:

答案 0 :(得分:1)

您可以在运行时更改对象的材质。您需要做的就是通过指定选项并将其分配给对象来创建材料。 例如,以下代码将创建一个白色的“MeshStandardMaterial”和指定的其他 properties 。它还将具有您已加载的纹理。将“”视为应附加材料的对象。

var material = new THREE.MeshStandardMaterial( { color: 0xffffff, side: THREE.FrontSide, opacity: 0.3, transparent: true, vertexColors: THREE.FaceColors, map : <THE TEXTURE YOU HAVE LOADED> } );

作为更好的方法,您可以使用 TextureLoader 加载纹理,并在加载纹理时创建材质。以下代码解释了这一点。

var loader = new THREE.TextureLoader();

function onLoad( texture ) {
    var material = new THREE.MeshPhongMaterial( { map : texture, color : 0xff0000 } );
    box.material = material;
}

function onProgress( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
}

function onError( xhr ) {
    console.error( 'An error happened' );
}

loader.load( 'assets/img/crate.png', onLoad, onProgress, onError );

您还可以在不创建新材料的情况下更改材质的颜色和纹理

仅更改颜色,

box.material.color.setHex( 0xff0000 );// will set red color for the box

或改变纹理,

var loader = new THREE.TextureLoader();

function onLoad( texture ) {
    box.material.map = texture;
}

function onProgress( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
}

function onError( xhr ) {
    console.error( 'An error happened' );
}

loader.load( 'assets/img/Dice-Blue-5.png', onLoad, onProgress, onError );