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 方法，它适用于 JavaScript DOM 元素，但不适用于 jQuery 对象。

因此，要追加使用 jQuery 方法.append()。

由于您#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>any，因为renderer.domElement它是一个canvas元素。例如，在这个链接中，查看源代码显示没有<canvas>。HTML相反，它通过 JavaScript 创建 a div，将其附加到 the DOM，最后将renderer.domElement(which is <canvas>) 附加到 that div。

于 2012-09-13T08:16:36.363 回答