html5 3d，canvas，three.js

Question

我有以下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); 不起作用。

Answer 1

你可以試試這個：

$('#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> ，因為renderer.domElement是一個canvas元素。 例如，在此鏈接中 ，視圖源顯示HTML沒有<canvas> 。 相反，它通過JavaScript創建一個div ，將其附加到DOM ，最后將renderer.domElement （它是<canvas> ）附加到該div 。