HTML5 3D，帆布，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); 
} 

​​作品，

但如何寫入到畫布上使用jQuery？

$('#container').appendChild(renderer.domElement);不起作用。

Answer 1

你可以試試這個：

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

$('#container')返回一個jQuery對象，其中appendChild()是一個JavaScript方法，它與一個JavaScript DOM元素的作品，但不是一個jQuery對象。

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

---

由於您的#container是canvas元素，它不支持appendChild()方法。相反，你可以把它改成一個div，如：

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

OR

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

在這裏，你不需要添加：

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

，然後與嘗試因爲renderer.domElement是canvas ele換貨。例如，在this link，查看源顯示在HTML中沒有<canvas>。相反，它創建一個div由JavaScript，追加一條到DOM，最後追加renderer.domElement（這是<canvas>）到div。