HTML5 차원, 캔버스, three.js를

Question

I가 다음과 같은 HTML

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

와 자바 스크립트 코드

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()는 자바 스크립트 DOM 요소와 작동하는 자바 스크립트 방법입니다 jQuery를 개체를 반환하지만.

따라서, 사용의 jQuery에게있어서 .append()를 추가한다. 당신의 #container으로

---

그것이 appendChild() 메서드를 지원하지 않습니다하는 canvas 요소입니다. 대신에 당신은 그것을 변경할 수 있습니다 div 같은 :

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

또는 여기

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

, 당신은 추가 할 필요가 없습니다 :로 시도하십시오

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

및 renderer.domElement이 canvas 인 경우 <canvas> 중 하나입니다. ment. 예를 들어, this link에서보기 소스는 HTML에 <canvas>이 없음을 나타냅니다. 대신, JavaScript로 div을 만들고,이를 DOM에 추가하고 마지막으로 (즉, <canvas>)을 div에 추가합니다.