3

おそらく面テクスチャとして 2D キャンバス要素を使用して、立方体の 1 つの面に画像を追加したいと考えています。これが私のコードですが、必要な結果が得られません。キャンバスをテクスチャとして使用している面は空白で、他の面は THREE.ImageUtils.loadTexture を使用しており、問題ありません。

var renderer, camera, scene;
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var image0 = new Image();
var image1 = new Image();

image0.onload = function() {
    context.drawImage(image0, 0, 0);
};
image0.src = 'textures/nx.jpg';

var texture = new THREE.Texture(canvas);

texture.needsUpdate = true;

init();
animate();

function init(){
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    scene = new THREE.Scene();

    var materialArray = [];
    materialArray.push(new THREE.MeshBasicMaterial( { map: texture }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/ny.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/nz.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/px.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/py.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/pz.jpg' ) }));

    var geometry = new THREE.CubeGeometry( 400, 400, 400 );
    var DiceBlueMaterial = new THREE.MeshFaceMaterial(materialArray);
    mesh = new THREE.Mesh( geometry, DiceBlueMaterial);
    scene.add( mesh );
    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
    requestAnimationFrame( animate );

    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;

    renderer.render( scene, camera );
}
4

1 に答える 1

6

のtexture.needsUpdate設定が早すぎる可能性があります。これを試して：

var texture = new THREE.Texture(canvas);

image0.onload = function() {
    context.drawImage(image0, 0, 0);
    texture.needsUpdate = true;
};
image0.src = 'textures/nx.jpg';
于 2013-05-04T08:07:08.407 に答える