在正常的webgl表面上,我绘制了两个线段。我试图沿着那条线挤出。我期望的结果是折叠的平面;类似于悬挂在太空中的单张折叠的A4纸。
生成相同代码的代码如下:
function onPageLoad() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
0.1,
20000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var m1 = new THREE.LineBasicMaterial({
color: 0x0000ff
}),
m2 = new THREE.LineBasicMaterial({ color: 0xff0000 }),
m3 = new THREE.LineBasicMaterial({ color: 0x00ff00 });
var g1 = new THREE.Geometry();
var origin = new THREE.Vector3(0,0,0);
g1.vertices.push(
origin,
new THREE.Vector3(0, 10, 0),
new THREE.Vector3(0, 20, 0)
);
var g2 = new THREE.Geometry();
g2.vertices.push(
origin,
new THREE.Vector3(10, 0, 0),
new THREE.Vector3(20, 0, 0)
);
var g3 = new THREE.Geometry();
g3.vertices.push(
origin,
new THREE.Vector3(0,0, 10),
new THREE.Vector3(0,0, 20)
);
var liney = new THREE.Line(g1, m1),
linex = new THREE.Line(g2, m2),
linez = new THREE.Line(g3, m3);
scene.add(liney, linex, linez);
camera.position.set(-100,50,100);
// camera.lookAt(new THREE.Vector3(0,0,0));
camera.lookAt(scene.position);
var controls = new THREE.OrbitControls(camera, render.domElement);
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,100,0);
scene.add(light);
var lineGeo = new THREE.Geometry();
var origin = new THREE.Vector3(0,0,0);
var lineMat = new THREE.LineBasicMaterial({ color: 0xefefef });
var shape = new THREE.Shape([
new THREE.Vector3(0,0,0),
new THREE.Vector3(25, 45, 10),
new THREE.Vector3(55, 15, 25)
]);
var settings = {
amount: 10,
bevelEnabled: false,
material: 0,
extrudeMaterial: 1
};
var exGeo = new THREE.ExtrudeGeometry(shape, settings);
var material = new THREE.MeshBasicMaterial({ color: 0xff8800 });
//
var obj = new THREE.Mesh(exGeo, material);
scene.add(obj);
var wfTexture = new THREE.MeshBasicMaterial({ color: 0xffffff , wireframe: true });
var wf = new THREE.Mesh(exGeo, wfTexture);
scene.add(wf);
animate();
function animate()
{
requestAnimationFrame( animate );
render();
update();
}
function update()
{
// if ( keyboard.pressed("z") )
// {
// // do something
// }
controls.update();
// stats.update();
}
function render()
{
renderer.render( scene, camera );
}
}
window.addEventListener('load', onPageLoad, false);
然而,我得到的结果是一个楔子:
我可以将任何设置传递给ExtrudeGeometry,以达到预期效果吗?