August 25, 2017 01:28
diff --git a/index.html b/index.html
 <html>
    <head>
        <title>My first three.js app</title>
        <style>
 body { margin: 0; }
 canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="https://threejs.org/build/three.js"></script>
        <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
        <script>

            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75,
                window.innerWidth/window.innerHeight, 0.01, 1000 );
            controls = new THREE.OrbitControls( camera );


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

            //var geometry = new THREE.BoxGeometry( 1, 1, 1 );

            var verticesOfPrism = [
                -1, 1, 0,
                -1, 0, 1,
                -1, 0, -1,
                1, 0, -1,
                1, 0, 1,
                1, 1, 0
            ];
            var indicesOfFaces = [
                0, 1, 2,
                1, 2, 3,
                3, 4, 1,
                2, 0, 3,
                0, 5, 3,
                0, 1, 4,
                4, 5, 0,
                3, 4, 5
            ];
            var geometry = new THREE.Geometry();
            for(let i = 0; i<verticesOfPrism.length; i+=3) {
                geometry.vertices.push(
                    new THREE.Vector3(verticesOfPrism[i], verticesOfPrism[i+1],
                        verticesOfPrism[i+2])
                );
            }
            for(let i = 0; i<indicesOfFaces.length; i+=3) {
                let round = Math.floor(i/3);
                console.log(i);
                geometry.faces.push( new THREE.Face3( indicesOfFaces[i],
                    indicesOfFaces[i+1], indicesOfFaces[i+2] ) ); 
            }
            var material = new THREE.MeshPhysicalMaterial( { 
                color: 0xffffff,
                transparent: false,
                opacity: .3,
            } );
            material.side = THREE.DoubleSide;
            var prism = new THREE.Mesh( geometry, material );
            scene.add( prism );

            var material = new THREE.MeshPhongMaterial( { color: 0x808080, dithering:
                true } );
            var geometry = new THREE.BoxGeometry( 2000, 1, 2000 );
            var mesh = new THREE.Mesh( geometry, material );
            mesh.position.set( 0, - 1, 0 );
            mesh.receiveShadow = true;
            scene.add( mesh );

            var light = new THREE.PointLight( 0xffffff, 1, 100 );
            light.position.set( 10, 10, 10 );
            scene.add( light );

            var axisHelper = new THREE.AxisHelper( 5 );
            scene.add( axisHelper );

            camera.position.z = 5;

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

                renderer.render(scene, camera);
            };

            animate();
        </script>
    </body>
 </html>
	<html>
	<head>
	<title>My first three.js app</title>
	<style>
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	</style>
	</head>
	<body>
	<script src="https://threejs.org/build/three.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
	<script>

	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera( 75,
	window.innerWidth/window.innerHeight, 0.01, 1000 );
	controls = new THREE.OrbitControls( camera );


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

	//var geometry = new THREE.BoxGeometry( 1, 1, 1 );

	var verticesOfPrism = [
	-1, 1, 0,
	-1, 0, 1,
	-1, 0, -1,
	1, 0, -1,
	1, 0, 1,
	1, 1, 0
	];
	var indicesOfFaces = [
	0, 1, 2,
	1, 2, 3,
	3, 4, 1,
	2, 0, 3,
	0, 5, 3,
	0, 1, 4,
	4, 5, 0,
	3, 4, 5
	];
	var geometry = new THREE.Geometry();
	for(let i = 0; i<verticesOfPrism.length; i+=3) {
	geometry.vertices.push(
	new THREE.Vector3(verticesOfPrism[i], verticesOfPrism[i+1],
	verticesOfPrism[i+2])
	);
	}
	for(let i = 0; i<indicesOfFaces.length; i+=3) {
	let round = Math.floor(i/3);
	console.log(i);
	geometry.faces.push( new THREE.Face3( indicesOfFaces[i],
	indicesOfFaces[i+1], indicesOfFaces[i+2] ) );
	}
	var material = new THREE.MeshPhysicalMaterial( {
	color: 0xffffff,
	transparent: false,
	opacity: .3,
	} );
	material.side = THREE.DoubleSide;
	var prism = new THREE.Mesh( geometry, material );
	scene.add( prism );

	var material = new THREE.MeshPhongMaterial( { color: 0x808080, dithering:
	true } );
	var geometry = new THREE.BoxGeometry( 2000, 1, 2000 );
	var mesh = new THREE.Mesh( geometry, material );
	mesh.position.set( 0, - 1, 0 );
	mesh.receiveShadow = true;
	scene.add( mesh );

	var light = new THREE.PointLight( 0xffffff, 1, 100 );
	light.position.set( 10, 10, 10 );
	scene.add( light );

	var axisHelper = new THREE.AxisHelper( 5 );
	scene.add( axisHelper );

	camera.position.z = 5;

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

	renderer.render(scene, camera);
	};

	animate();
	</script>
	</body>
	</html>