Question

我在index.html中加载了脚本但是当我打开页面时它会显示渲染但内部没有任何内容，没有任何渲染器，我找不到问题

以下是外部.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();

有人可以帮忙吗？

Answer 1

相机问题

这是工作版本的jsfiddle。

Three.js中的

Camera是抽象的，所以我选择了常用的构造：

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

默认情况下，相机的视点不会对齐，因此显式调用可以消除混淆：

camera.lookAt(cube.position);

将相机添加到场景中：

scene.add(camera);

Three.js不会在画布上呈现

1 个答案: