Three.js不会在画布上渲染

Question

I loaded the script in index.html but when I open the page it shows the rendered but nothing inside, nothing renderer, I can't find the problem

Here is the code of external .js:

var wdt     = $('.design').width();
var hgh     = $('.design').height();

var scene       = new THREE.Scene();
var camera      = new THREE.Camera(75, wdt/hgh, 0.1, 1000);

var renderer    = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(wdt, hgh);
document.getElementById('designer').appendChild(renderer.domElement);

var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

var render = function () {
requestAnimationFrame(render);

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

renderer.render(scene, camera);
};

render();

Can anybody help please?

Answer 1

Camera issues

Here's a jsfiddle of a working version.

Camera in Three.js is abstract, so I picked the common one to construct:

var camera = new THREE.PerspectiveCamera (75, wdt / hgh, 0.1, 1000);

The camera's viewpoint doesn't line up by default, so explicit calls eliminate confusion:

camera.lookAt(cube.position);

And adding the camera to the scene:

scene.add(camera);