THREE.JS Рендеринг куба

Можно ли что-то изменить с помощью рендеринга Three/Cube?

Это вращающийся куб по оси Y. Можно ли оставить то, что находится на задней части куба, загруженным?

Что-то вроде этого (плохой рисунок ftw) Можно ли удалить эти маленькие белые линии? я нахожу их довольно раздражающими

Код, которым я пользовался очень давно. R34 или типа того, если не ошибаюсь. Кто-нибудь знает, возможно ли это в R65?

var camera, scene, renderer;
    init();
    setInterval( loop, 1000 / 60 );
    function init() {
    var height = 300;
    var width = 300;
    camera = new THREE.Camera(10, height/width,10, 1000);
    scene = new THREE.Scene();
    var hat_materials = [
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') }),
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') }),
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') }),
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') }),
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') }),
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') })
    ];
    hat = new THREE.Mesh( new Cube(8, 8, 8, 1, 1, hat_materials), new THREE.MeshFaceMaterial());
    hat.position.x = 0;
    hat.position.y = -10;
    hat.position.z = 0;
    scene.addObject(hat);  
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( width,height);
    document.getElementById("holder").appendChild(renderer.domElement);

}
var xvar = 0;
function loop() {
    var speed = $("#speed").val() 
    xvar += Math.PI/speed
    camera.target.position.x = 0;
    camera.target.position.y = -11;
    camera.target.position.z = 0;
    camera.position.x = 0 - 100*Math.sin(xvar);
    camera.position.y = 20;
    camera.position.z = 0 - 100*Math.cos(xvar);
    renderer.render( scene, camera );
}

person user3246850    schedule 29.01.2014    source источник
comment
@OneOfOne Отредактировал сообщение   -  person user3246850    schedule 29.01.2014


Ответы (1)


Попробуйте сделать материал двухсторонним:

var material = new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png'),side:THREE.DoubleSide});

так что ваш код будет:

var camera, scene, renderer;
    init();
    setInterval( loop, 1000 / 60 );
    function init() {
    var height = 300;
    var width = 300;
    camera = new THREE.Camera(10, height/width,10, 1000);
    scene = new THREE.Scene();
    var hat_materials = [
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') },side:THREE.DoubleSide),
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') },side:THREE.DoubleSide),
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') },side:THREE.DoubleSide),
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') },side:THREE.DoubleSide),
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') },side:THREE.DoubleSide),
        new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') ,side:THREE.DoubleSide})
    ];
    hat = new THREE.Mesh( new Cube(8, 8, 8, 1, 1, hat_materials), new THREE.MeshFaceMaterial());
    hat.position.x = 0;
    hat.position.y = -10;
    hat.position.z = 0;
    scene.addObject(hat);  
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( width,height);
    document.getElementById("holder").appendChild(renderer.domElement);

}
var xvar = 0;
function loop() {
    var speed = $("#speed").val() 
    xvar += Math.PI/speed
    camera.target.position.x = 0;
    camera.target.position.y = -11;
    camera.target.position.z = 0;
    camera.position.x = 0 - 100*Math.sin(xvar);
    camera.position.y = 20;
    camera.position.z = 0 - 100*Math.cos(xvar);
    renderer.render( scene, camera );
}
person George Profenza    schedule 20.02.2014