Question

我需要处理使用three.js的项目。所以我试着学习基础知识和O编写这个简单的代码只是为了看到一些东西。但它根本不起作用，当我点击在网络浏览器上查看时，没有显示任何内容。

这是我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="Three.js"></script>
</head>
<body>
    <script type="text/javascript">4
        var renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(document.body.clientWidth,
                         document.body.clientHeight);

        document.body.appendChild(renderer.domElement);

        renderer.setClearColorHex(0xEEEEEE, 1.0);
        renderer.clear();

        // new THREE.PerspectiveCamera( FOV, viewAspectRatio, zNear, zFar );
        var camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
        camera.position.z = 300;

        var scene = new THREE.Scene();
        var cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50),
                       new THREE.MeshBasicMaterial({ color: 0x000000 }));
        scene.add(cube);

        renderer.render(scene, camera);
    </script>
</body>
</html>

为什么它不起作用？我做错了什么？

Answer 1

美好的一天，你能告诉我们你使用的是什么版本的Three.js（如果你不确定的话，它会在加载时显示在控制台中），以及你使用的浏览器是什么？

现在暂时不推荐使用renderer.setClearColorHex，这应该只是renderer.setClearColor。

你也用width / height设置了相机，但我没看到它们在任何地方定义过吗？

接下来是camera.position.z = 300;可能距离太远而无法在（0,0,0）看到一个小立方体

尝试这些项目并告知我们是否有效。

Answer 2

看看这个例子。 http://mrdoob.github.io/three.js/examples/#webgl_geometry_cube

您缺少用于连续帧渲染的主循环。正如达里尔所说，宽度和高度是多少？

如何使用三个js写？

2 个答案: