THREE.js不在浏览器中呈现

Question

THREE.js不在浏览器中呈现

我正在看使用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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

gai*_*tat 6

您的代码的问题是，该document.body.clientHeight值为0。请改用以下几行：

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

Run Code Online (Sandbox Code Playgroud)

此外THREE.CanvasRenderer has been moved to examples/js/renderers/CanvasRenderer.js，如果您想使用CanvasRenderer()

但是您可以使用WebGLRenderer()：

render = new THREE.WebGLRenderer();

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，10 月前
查看次数：	2401 次
最近记录：	10 年，10 月前