THREE.JS 立方体渲染答案

【问题标题】：THREE.JS Cube RenderingTHREE.JS 立方体渲染
【发布时间】：2014-01-29 00:41:15
【问题描述】：

是否可以通过 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 );
}

【问题讨论】：

@OneOfOne 编辑了帖子

标签： three.js cube

【解决方案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 );
}

【讨论】：