THREE.JS立方體渲染

Question

是否有可能用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); 
} 

Answer 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); 
}