THREE.js无法在浏览器中渲染。

Question

THREE.js无法在浏览器中渲染。

4

我正在观看使用THREE.js库创建太阳系的教程。然而，我无法在浏览器窗口中看到结果。您能否帮助我找到代码中的错误？

以下是代码：

<!doctype html>
   <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Solar System - Intro (1)</title>
        <script src="three.min.js"></script>
    </head>

<body>

<script>
    var scene, camera, render, container, W, H;

    W = parseInt(document.body.clientWidth);
    H = parseInt(document.body.clientHeight);

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(45, W / H, 1, 10000);
    camera.position.z = 4300;
    scene = new THREE.Scene();

    // Sun
    var sun, sun_geom, sun_mat;
    sun_geom = new THREE.SphereGeometry(430, 30, 30);
    sun_mat = new THREE.MeshNormalMaterial();
    sun = new THREE.Mesh(sun_geom, sun_mat);
    scene.add(sun);

    render = new THREE.CanvasRenderer();
    render.setSize(W, H);
    container.appendChild(render.domElement);
    animate();

    function animate() {
        requestAnimationFrame(animate);
        render.render(scene, camera);
    }
</script>

</body>

</html>

视频链接： https://www.youtube.com/watch?v=kzwEZjVMdkA&list=LLSn1erQiQ7lWhWY9IMOEGTw&index=5

此视频为IT技术相关内容，请点击上方链接观看。

- sheriff_paul

是否有任何错误报告？ - Norman Breau

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gaitat · Accepted Answer

您的代码问题在于document.body.clientHeight的值为0。请改用以下代码：

W = parseInt(window.innerWidth);
H = parseInt(window.innerHeight);

除此之外，THREE.CanvasRenderer已经被移动到examples/js/renderers/CanvasRenderer.js，因此如果您想使用CanvasRenderer()，需要将其包含在内。

但是您可以使用WebGLRenderer()：

render = new THREE.WebGLRenderer();