three.js金字塔高度不一致

Question

我希望创建具有不同高度的多个金字塔，但需要澄清为什么这不起作用。

当我只改变第二个金字塔的高度时，底部半径看起来更小，金字塔的位置也会在场景中发生变化。

如果两者都设置为0,0,0 - 为什么它们位于不同的位置？

如果两者具有相同的顶部半径和底部半径，为什么一个比另一个宽？

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

camera.position.z = 3;

var pyramidgeo = new THREE.CylinderGeometry(0,1,1,4,false);
var pyramidmat = new THREE.MeshBasicMaterial({wireframe:true, color:0xFFDE14});
var pyramid = new THREE.Mesh(pyramidgeo,pyramidmat);
pyramid.position.set(0.0,0,0);
pyramid.rotation.y = Math.PI/4;
scene.add(pyramid);

var pyramidgeo1 = new THREE.CylinderGeometry(0,1,2,4,false);    
var pyramid1 = new THREE.Mesh(pyramidgeo1,pyramidmat);
pyramid1.position.set(0,0,0);
pyramid1.rotation.y = Math.PI/4;
scene.add(pyramid1);

function render() {
    requestAnimationFrame(render);
    renderer.render(scene,camera);
}
render();

</script>

Answer 1

http://jsfiddle.net/gero3/f88Vj/5/

表明一个不宽于另一个

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

camera.position.z = 3;

var pyramidgeo = new THREE.CylinderGeometry(0,1,1,4,false);
var pyramidmat = new THREE.MeshBasicMaterial({wireframe:true, color:0xFFDE14});
var pyramid = new THREE.Mesh(pyramidgeo,pyramidmat);
pyramid.position.set(0.0,0,0);
pyramid.rotation.y = Math.PI/4;
scene.add(pyramid);

var pyramidgeo1 = new THREE.CylinderGeometry(0,1,2,4,false);    
var pyramid1 = new THREE.Mesh(pyramidgeo1,pyramidmat);
pyramid1.position.set(0,0,0);
pyramid1.rotation.y = Math.PI/4;
scene.add(pyramid1);

var lineGeo = new THREE.Geometry();
lineGeo.vertices.push(new THREE.Vector3(0.707,2,0.707));
lineGeo.vertices.push(new THREE.Vector3(0.707,-2,0.707));
lineGeo.vertices.push(new THREE.Vector3(-0.707,2,0.707));
lineGeo.vertices.push(new THREE.Vector3(-0.707,-2,0.707));

lineGeo.vertices.push(new THREE.Vector3(0.707,2,-0.707));
lineGeo.vertices.push(new THREE.Vector3(0.707,-2,-0.707));
lineGeo.vertices.push(new THREE.Vector3(-0.707,2,-0.707));
lineGeo.vertices.push(new THREE.Vector3(-0.707,-2,-0.707));

lineGeo.verticesNeedUpdate = true;

var line = new THREE.Line(lineGeo,new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff, opacity: 1 } ),THREE.LinePieces)
scene.add(line);



function render() {
    requestAnimationFrame(render);
    renderer.render(scene,camera);
}
render();

http://jsfiddle.net/gero3/f88Vj/6/

显示他们在同一个位置，2个小人进入一个大的

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

camera.position.z = 3;

var pyramidgeo = new THREE.CylinderGeometry(0,1,1,4,false);
var pyramidmat = new THREE.MeshBasicMaterial({wireframe:true, color:0xFFDE14});
var pyramid = new THREE.Mesh(pyramidgeo,pyramidmat);
pyramid.position.set(0.0,0,0);
pyramid.rotation.y = Math.PI/4;
scene.add(pyramid);

var pyramidgeo1 = new THREE.CylinderGeometry(0,1,2,4,false);    
var pyramid1 = new THREE.Mesh(pyramidgeo1,pyramidmat);
pyramid1.position.set(0,0,0);
pyramid1.rotation.y = Math.PI/4;
scene.add(pyramid1);
/*
var lineGeo = new THREE.Geometry();
lineGeo.vertices.push(new THREE.Vector3(0.707,2,0.707));
lineGeo.vertices.push(new THREE.Vector3(0.707,-2,0.707));
lineGeo.vertices.push(new THREE.Vector3(-0.707,2,0.707));
lineGeo.vertices.push(new THREE.Vector3(-0.707,-2,0.707));

lineGeo.vertices.push(new THREE.Vector3(0.707,2,-0.707));
lineGeo.vertices.push(new THREE.Vector3(0.707,-2,-0.707));
lineGeo.vertices.push(new THREE.Vector3(-0.707,2,-0.707));
lineGeo.vertices.push(new THREE.Vector3(-0.707,-2,-0.707));

lineGeo.verticesNeedUpdate = true;

var line = new THREE.Line(lineGeo,new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff, opacity: 1 } ),THREE.LinePieces)
scene.add(line);*/

var pyramidgeo1 = new THREE.CylinderGeometry(0,1,1,4,false);
var pyramidmat1 = new THREE.MeshBasicMaterial({wireframe:true, color: Math.random() * 0xffffff});
var pyramid1 = new THREE.Mesh(pyramidgeo1,pyramidmat1);
pyramid1.position.set(0.0,0.5,0);
pyramid1.rotation.y = Math.PI/4;
scene.add(pyramid1);

var pyramidgeo2 = new THREE.CylinderGeometry(0,1,1,4,false);
var pyramidmat2 = new THREE.MeshBasicMaterial({wireframe:true, color: Math.random() * 0xffffff});
var pyramid2 = new THREE.Mesh(pyramidgeo2,pyramidmat2);
pyramid2.position.set(0.0,-0.5,0);
pyramid2.rotation.y = Math.PI/4;
scene.add(pyramid2);

var SphereGeometry = new THREE.SphereGeometry(0.1,10,10);
var MeshBasicMaterial = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff});
var sphere = new THREE.Mesh(SphereGeometry,MeshBasicMaterial);
sphere.position.set(0,0,0);
scene.add(sphere);



function render() {
    requestAnimationFrame(render);
    renderer.render(scene,camera);
}
render();

您在宽度和高度上看到的变化归因于相机。