Javascript THREE.js不会在浏览器中渲染_Javascript_Browser_Three.js

Javascript THREE.js不会在浏览器中渲染

javascript browser three.js

Javascript THREE.js不会在浏览器中渲染,javascript,browser,three.js,Javascript,Browser,Three.js,我正在看使用THREE.js库创建太阳系的教程。但是，我无法在浏览器窗口中看到结果。你能帮我找出代码中的错误吗代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Solar System - Intro (1)</title> <script src="t

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


太阳系-简介（1）
var场景、摄影机、渲染、容器、W、H；
W=parseInt（document.body.clientWidth）；
H=parseInt（document.body.clientHeight）；
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像机=新的三个透视摄像机（45，W/H，11000）；
摄像机位置z=4300；
场景=新的三个。场景（）；
//太阳
var sun、sun_geom、sun_mat；
sun_geom=新三种。球墨法（430,30,30）；
sun_mat=新的三个.MeshNormalMaterial（）；
sun=新的三层网格（sun\u geom、sun\u mat）；
场景。添加（太阳）；
render=新的三个。CanvasRenderer（）；
渲染。设置大小（W，H）；
container.appendChild（render.domeElement）；
制作动画（）；
函数animate（）{
请求动画帧（动画）；
渲染。渲染（场景、摄影机）；
}

视频链接：

代码的问题是

document.body.clientHeight

为0。请使用以下行：

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

此外，

THREE.CanvasRenderer已移动到examples/js/renderers/CanvasRenderer.js

，因此如果要使用

CanvasRenderer（）

但是您可以使用

WebGLRenderer（）

：

是否报告了任何错误？谢谢！这真的帮助了我@gaitat我在examples/js/renders/CanvasRenderer.js下找不到它，现在它在其他目录下吗？而且，我确实用WebGLRenderer（）替换了它；但是，并不是我的模型很单调，只是显示为实心填充颜色。您想使用画布渲染还是WebGL渲染？这个问题已经很老了，Cavas渲染器可能已经被删除了。如果您想使用WebGL，则可能需要添加灯光。CanvasRenderer在r98中被删除

render = new THREE.WebGLRenderer();