Three.js: create a square cone with radius segments more than 4

Question

I have done some math to create a square cone with radius segment more than 4. When the top and bottom radius are the same it works fine as shown in the image.

but when the top and bottom radius are different it does not work as shown in the image. top and bottom radius are not the same

I am not sure what the problem is? I really appreciate any other way to do this? Thank you in advance. here is my code:

<html>

<head>

<title>Lightshade</title>


<script src="three.js"> </script>
<script src="TrackballControls.js"></script>


</head>

<body>

<script>

//declaring variables
var camera, scene, renderer;
var controls;
var cone, coneGeometry;

scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera( -window.innerWidth /  2.5, window.innerWidth / 2.5, window.innerHeight / 2.5, -window.innerHeight /  2.5, -10000, 1000000);

camera.position.set( 0, 2.0, 5.0);
camera.lookAt(scene.position);  

//adding the renderer to the screen
renderer = new THREE.WebGLRenderer( { antialias: true} );
renderer.setClearColor( 0xeeeeee , 0); //eeeeee
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapCullFace = THREE.CullFaceBack;
renderer.shadowMapEnabled = true;

document.body.appendChild( renderer.domElement );

//adding the camera interactive method
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.noKeys = true;


//creating materials for lightshade
lightshadeMaterial = new THREE.MeshPhongMaterial({color:0xffeb00,wireframe:false, side:THREE.DoubleSide, ambient: 0xffffff});

var coneGeometry = new THREE.CylinderGeometry( 50, 125, 150, 60, 44 , true);
var cone = new THREE.Mesh( coneGeometry, lightshadeMaterial );
cone.geometry.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI/2));  



for (j=0;j<=2684;j=j+61) {
    for (i=0;i<=60;i++) { 

        if (i<=15) {

            tempLineGrad = (cone.geometry.vertices[15].z - cone.geometry.vertices[0].z) / (cone.geometry.vertices[15].x - cone.geometry.vertices[0].x);
            cone.geometry.vertices[i+j].z = tempLineGrad * (cone.geometry.vertices[i+j].x - cone.geometry.vertices[0].x) + cone.geometry.vertices[0].z;
        }
        if (i>15 && i<=30){
            tempLineGrad = (cone.geometry.vertices[30].z - cone.geometry.vertices[15].z) / (cone.geometry.vertices[30].x - cone.geometry.vertices[15].x);

            if (tempLineGrad>999999) {

                cone.geometry.vertices[i+j].x = cone.geometry.vertices[15].x;

            } else {
            cone.geometry.vertices[i+j].z = tempLineGrad * (cone.geometry.vertices[i+j].x - cone.geometry.vertices[15].x) + cone.geometry.vertices[15].z;
            }
        }
        if (i>30 && i<=45){
            tempLineGrad = (cone.geometry.vertices[45].z - cone.geometry.vertices[30].z) / (cone.geometry.vertices[45].x - cone.geometry.vertices[30].x);
            cone.geometry.vertices[i+j].z = tempLineGrad * (cone.geometry.vertices[i+j].x - cone.geometry.vertices[30].x) +  cone.geometry.vertices[30].z;
        }
        if (i>45 && i<=60){
            tempLineGrad = (cone.geometry.vertices[60].z - cone.geometry.vertices[45].z) / (cone.geometry.vertices[60].x - cone.geometry.vertices[45].x);
            cone.geometry.vertices[i+j].z = tempLineGrad * (cone.geometry.vertices[i+j].x - cone.geometry.vertices[45].x) +  cone.geometry.vertices[45].z;

        }
    }
}
scene.add(cone);

// adding some light to the screen
var light3 = new THREE.PointLight( 0xffffff, 1, 1000); 
light3.position.set( 0, 300.0, 0 ); 
scene.add( light3 );        

var light1 = new THREE.PointLight( 0xffffff,0.7, 1000  ); 
light1.position.set( 0, 4.0, 0 ); 
scene.add( light1 );
var light2 = new THREE.PointLight( 0xffffff, 0.7, 1000  ); 
light2.position.set( 0, -1.0, 0 ); 
scene.add( light2 );

var light4 = new THREE.PointLight( 0xffffff, 1, 1000); 
light4.position.set( 300.0, 160.0, 300.0 ); 
scene.add( light4 );

var light5 = new THREE.PointLight( 0xffffff, 1, 1000); 
light5.position.set( -300.0, 160.0, 300.0 ); 
scene.add( light5 );




function animate() {
requestAnimationFrame(animate);

render();
}

function render() {


controls.update();

renderer.render( scene, camera );
}

animate();



</script>


</body>

</html>

Tip: see [this post](http://stackoverflow.com/questions/17558085/three-js-orthographic-camera/17567292#17567292} for how to properly instantiate an orthographic camera. — WestLangley, Dec 12 '14 at 13:17
Thank you very much. I corrected that but it seems that the problem is from somewhere else. — Hesamoy, Dec 12 '14 at 18:17

Three.js: create a square cone with radius segments more than 4

0 Answers0