3d使用javascript的立方体形状

时间:2017-04-10 15:47:24

标签: javascript html

我从webgl获得此代码我使用它与他们在教程中提到的相同,但我无法在浏览器屏幕上获得结果只有我能看到的只是黑色背景没有别的。我使用了three.js库来创建立方体的3d模型。

 <pre>
          <!doctype html>

           <html>
       <head>
       <meta charset="utf-8">
       <style>
       canvas { width: 100%; height: 100% }
       </style>
       <title>Pryamid</title>
       </head>

<body>

       

 <script>
 var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75,    window.innerWidth/window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var cubegeometry = new THREE.CubeGeometry(1,1,1);
        var cubematerial = new THREE.MeshBasicMaterial({wireframe: true, color: 0x000000});

        var cube = new THREE.Mesh(cubegeometry, cubematerial);

        scene.add(cube);

        camera.position.z = 5;

        var render = function () {
            requestAnimationFrame(render);

            cube.rotation.y += 0.01;
            cube.rotation.x += 0.01;
            cube.rotation.z += 0.01;

            renderer.render(scene, camera);
        };

        // Calling the render function
window.onload = function() {
render();
};

</script>
</body>
</html>

1 个答案:

答案 0 :(得分:4)

这是您的完整代码吗?我认为,如果您发布了您尝试实现的完整HTML背景,那将会很有帮助。

但是,我首先看到的是,您要么不将渲染目标添加到HTML页面,要么不使用HTML中的画布进行渲染。 / p>

显示多维数据集的最简单方法是将渲染画布添加到页面的DOM中,其中包括: document.body.appendChild( renderer.domElement );