html5 3d，canvas，three.js

Question

I have the following HTML

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

and JavaScript code

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 ); works,

But how to write into canvas with jQuery?

$('#container').appendChild(renderer.domElement); does not work.

Answer 1

You may try this:

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

$('#container') returns a jQuery Object, where appendChild() is a JavaScript method which works with a JavaScript DOM element, but not with a jQuery object.

Therefore, to append use the jQuery method .append() .

---

As your #container is a canvas element, it does not support the appendChild() method. Instead you can change it to a div like:

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

and then try with:

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

OR

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

Here, you do not need to add a <canvas> either, because renderer.domElement is a canvas element. For example, in this link , the view source shows there is no <canvas> in the HTML . Instead, it creates a div by JavaScript, appends that to the DOM and at last appends the renderer.domElement (which is <canvas> ) to that div .