Question

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

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不会在浏览器中呈现

1 个答案: