使用three.js设置立方体的颜色

时间:2018-11-04 21:55:12

标签: javascript three.js

我在函数中构建了一个框,将其值分配给名为box的变量,然后尝试通过按“ w”来设置节点的颜色,调用框变量并将其定义为另一个任意变量

<html>
<head>
<title>My first three.js app</title>
<style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, 
    window.innerWidth/window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    camera.position.z = 5;
    renderer.render( scene, camera );

    var box= function() {

        this.root = new THREE.Object3D;
}
    box.prototype.buildBox = function(){

        var geometry = new THREE.BoxGeometry( 0.2, 0.3, 0.1 );


        var material = new THREE.MeshLambertMaterial( {
        color: "white",  // CSS color names can be used!
        } );

        var a= new THREE.Mesh( geometry, material );
        this.root.add(a);
        return this.root;

};
this.scene.add(this.buildBox());
document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event) {
    var keyCode = event.which;
    this.Box = new box();
    var b = this.Box.buildBox();
    var keyCode = event.which;
    if (keyCode == 87)  {
        b.material.color.setHex (0xfff00);

}

    render();
</script>

0 个答案:

没有答案