3d cube shape using javascript

Question

I got this code from webgl I have used it same as they mentioned in their tutorial but i cannot get result on my browser screen only i can see is just black background nothing else. i have used three.js library to create 3d model of cube.

 <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>

Answer 1

Is this your full code? I think it would be helpful if you posted the full HTML context of what you're trying to achieve.

However, what I see at first blink, is that you either don't add the rendering target to your HTML page, or you don't use the canvas you have in your HTML to render to.

The easiest way to get your cube displayed, is by adding the rendering canvas to your page's DOM, with: document.body.appendChild( renderer.domElement );

3d cube shape using javascript

Question

1 answers

solution1
5 ACCPTED 2017-04-10 15:53:40

3d cube shape using javascript

Question

1 answers

solution1 5 ACCPTED 2017-04-10 15:53:40

solution1
5 ACCPTED 2017-04-10 15:53:40