THREE.js 不在浏览器中呈现

Question

我正在观看使用 THREE.js 库创建太阳系的教程。但是我无法在浏览器的 window 中看到结果。你能帮我找出代码中的错误吗？

代码如下：

<!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>

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

Answer 1

您的代码的问题是 document.body.clientHeight 为 0。请改用这些行：

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

另外 THREE.CanvasRenderer has been moved to examples/js/renderers/CanvasRenderer.js 所以你需要包括那个，如果你想使用 CanvasRenderer()

但是你可以使用 WebGLRenderer():

render = new THREE.WebGLRenderer();

THREE.js 不在浏览器中呈现

THREE.js does not render in the browser

javascript

browser

three.js