Question

我做了一些数学运算来创建一个带有半径段的方锥当顶部和底部半径相同时，它可以正常工作，如图所示。 top and bottom radius are the same

但是当顶部和底部半径不同时，它不起作用，如图所示。 top and bottom radius are not the same

我不确定问题是什么？我真的很感激任何其他方式来做到这一点？先感谢您。这是我的代码：

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

Three.js：创建一个半径超过4的方锥

0 个答案: