1

私は次のHTMLを持っています

<canvas id="container" name ="container" width="300" height="300"></canvas>

および JavaScript コード

var WIDTH = 400, HEIGHT = 300;
var VIEW_ANGLE = 90, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 300;

renderer = new THREE.CanvasRenderer();
renderer.setSize( WIDTH, HEIGHT );

camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
camera.position.z = 200;

scene = new THREE.Scene();
scene.add(camera);

renderer.render( scene, camera );

document.body.appendChild( renderer.domElement );
//$('#container').appendChild(renderer.domElement);

$('#container').width(WIDTH);
$('#container').height(HEIGHT);

function getSphere() {
    var radius = 50, segments = 16, rings = 16;
    var geometry = new THREE.SphereGeometry(radius,segments,rings);
    var material = new THREE.MeshLambertMaterial({
        color: 0xCC0000
    });
    return new THREE.Mesh(geometry, material);
}

document.body.appendChild( renderer.domElement );作品、

しかし、jQuery を使用してキャンバスに書き込む方法は?

$('#container').appendChild(renderer.domElement);動作しません。

4

1 に答える 1

4

これを試すことができます：

$('#container').append(renderer.domElement);

$('#container')jQuery オブジェクトを返します。ここで、appendChild()は JavaScript DOM 要素で機能する JavaScript メソッドですが、jQuery オブジェクトでは機能しません。

したがって、追加するには jQuery メソッドを使用します.append()。

your#containerは要素であるため、メソッドcanvasをサポートしていません。代わりに、次のようappendChild()に変更できます。div

<div id="container" name="container" style:"width:300;height:300"></div>

そして試してみてください：

document.getElementById('container').appendChild(renderer.domElement);

また

$('#container').append(renderer.domElement);

ここでは、 は要素<canvas>であるため、どちらかを追加する必要はありません。たとえば、このリンクでは、ソースを表示すると、. 代わりに、JavaScript で を作成し、それを に追加し、最後に(これは) をその に追加します。renderer.domElementcanvas<canvas>HTMLdivDOMrenderer.domElement<canvas>div

于 2012-09-13T08:16:36.363 に答える