1

我需要处理使用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>

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

4

2 回答 2

0

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

一些注意事项，renderer.setClearColorHex现在已弃用，这应该只是renderer.setClearColor.

您还设置了相机，width / height但我没有看到它们在任何地方定义？

接下来是camera.position.z = 300;可能太远在 (0, 0, 0) 处看不到一个小立方体

尝试这些项目，让我们知道它是否有效。

于 2013-11-09T19:17:40.553 回答
0

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

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

于 2013-11-09T20:22:11.050 回答