我尝试做一个锥形展开动画，让学生更好地理解。
它应该看起来像这样（在http://www.onlinemathlearning.com/geometry-nets-animations.html上找到）：
this is the fold/unfold cone image
我尝试了这个，但这与图片不相似请帮帮我，我尝试了很多
var camera, scene, renderer, controls;
var sides = [];
var clock = new THREE.Clock();
var isDragging = false;
var previousMousePosition = {
x: 0,
y: 0
};
var nSides = 3;
var side0, side5, hPlane, vPlane;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.set(-0.1, 0.1, 1).setLength(3);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(800, 500);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.PlaneGeometry(0,0);
side0 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color:'yellow',
transparent:true,
opacity:0,
// side: THREE.DoubleSide
}));
scene.add(side0);
side0.scale.set( 0.7, 0.7, 0.7);
resultData(5,5);
var side1Geom = PolygonGeometry(6);
side1 = new THREE.Mesh(side1Geom, new THREE.MeshBasicMaterial({
color:'blue',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side1);
side1.scale.set( 0.2588, 0.2588, 0.2588 );
var side2Geom = PolygonGeometry(3);
side2Geom.translate(0,0.5,0);
var side2 = new THREE.Mesh(side2Geom, new THREE.MeshBasicMaterial({
color:0xff0000,
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side2);
side2.scale.set(0.12, 0.84, 0.12);
var side3Geom = new THREE.CircleGeometry( 1, 30 );
var material = new THREE.MeshBasicMaterial({
color:'blue',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide,
});
side3 = new THREE.Mesh( side3Geom, material );
sides.push(side3);
var side4Geom = PolygonGeometry(3);
side4Geom.translate(0,0.5,0);
var side4 = new THREE.Mesh(side4Geom, new THREE.MeshBasicMaterial({
color:'#FFA500',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side4);
side4.scale.set(0.12, 0.84, 0.12);
var side5Geom = PolygonGeometry(3);
side5Geom.translate(0,0.5,0);
var side5 = new THREE.Mesh(side5Geom, new THREE.MeshBasicMaterial({
color:0xff00ff,
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side5);
side5.scale.set(0.12, 0.84, 0.12);
var side6Geom = PolygonGeometry(3);
side6Geom.translate(0,0.5,0);
var side6 = new THREE.Mesh(side6Geom, new THREE.MeshBasicMaterial({
color:'green',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side6);
side6.scale.set(0.12, 0.84, 0.12);
var side7Geom = PolygonGeometry(3);
side7Geom.translate(0,0.5,0);
var side7 = new THREE.Mesh(side7Geom, new THREE.MeshBasicMaterial({
color:'yellow',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side7);
side7.scale.set(0.12, 0.84, 0.12);
var side8Geom = PolygonGeometry(3);
side8Geom.translate(0,0.5,0);
var side8 = new THREE.Mesh(side8Geom, new THREE.MeshBasicMaterial({
color:'brown',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side8);
side8.scale.set(0.12, 0.84, 0.12);
var side9Geom = PolygonGeometry(3);
side9Geom.translate(0,0.5,0);
var side9 = new THREE.Mesh(side9Geom, new THREE.MeshBasicMaterial({
color:'blue',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side9);
side9.scale.set(0.12, 0.84, 0.12);
var side10Geom = PolygonGeometry(3);
side10Geom.translate(0,0.5,0);
var side10 = new THREE.Mesh(side10Geom, new THREE.MeshBasicMaterial({
color:'red',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side10);
side10.scale.set(0.12, 0.84, 0.12);
var side11Geom = PolygonGeometry(3);
side11Geom.translate(0,0.5,0);
var side11 = new THREE.Mesh(side11Geom, new THREE.MeshBasicMaterial({
color:'green',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side11);
side11.scale.set(0.12, 0.84, 0.12);
var side12Geom = PolygonGeometry(3);
side12Geom.translate(0,0.5,0);
var side12 = new THREE.Mesh(side12Geom, new THREE.MeshBasicMaterial({
color:'pink',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side12);
side12.scale.set(0.12, 0.84, 0.12);
var side13Geom = PolygonGeometry(3);
side13Geom.translate(0,0.5,0);
var side13 = new THREE.Mesh(side13Geom, new THREE.MeshBasicMaterial({
color:'yellow',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side13);
side13.scale.set(0.12, 0.84, 0.12);
var side14Geom = PolygonGeometry(3);
side14Geom.translate(0,0.5,0);
var side14 = new THREE.Mesh(side14Geom, new THREE.MeshBasicMaterial({
color:'yellow',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side14);
side14.scale.set(0.12, 0.84, 0.12);
var side15Geom = PolygonGeometry(3);
side15Geom.translate(0,0.5,0);
var side15 = new THREE.Mesh(side15Geom, new THREE.MeshBasicMaterial({
color:'pink',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side15);
side15.scale.set(0.12, 0.84, 0.12);
var side16Geom = PolygonGeometry(3);
side16Geom.translate(0,0.5,0);
var side16 = new THREE.Mesh(side16Geom, new THREE.MeshBasicMaterial({
color:'green',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side16);
side16.scale.set(0.12, 0.84, 0.12);
var side17Geom = PolygonGeometry(3);
side17Geom.translate(0,0.5,0);
var side17 = new THREE.Mesh(side17Geom, new THREE.MeshBasicMaterial({
color:'green',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side17);
side17.scale.set(0.12, 0.84, 0.12);
var side18Geom = PolygonGeometry(3);
side18Geom.translate(0,0.5,0);
var side18 = new THREE.Mesh(side18Geom, new THREE.MeshBasicMaterial({
color:'yellow',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side18);
side18.scale.set(0.12, 0.84, 0.12);
var side19Geom = PolygonGeometry(3);
side19Geom.translate(0,0.5,0);
var side19 = new THREE.Mesh(side19Geom, new THREE.MeshBasicMaterial({
color:'red',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side19);
side19.scale.set(0.12, 0.84, 0.12);
var side20Geom = PolygonGeometry(3);
side20Geom.translate(0,0.5,0);
var side20 = new THREE.Mesh(side20Geom, new THREE.MeshBasicMaterial({
color:'brown',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side20);
side20.scale.set(0.12, 0.84, 0.12);
var side21Geom = PolygonGeometry(3);
side21Geom.translate(0,0.5,0);
var side21 = new THREE.Mesh(side21Geom, new THREE.MeshBasicMaterial({
color:'blue',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side21);
side21.scale.set(0.12, 0.84, 0.12);
var side22Geom = PolygonGeometry(3);
side22Geom.translate(0,0.5,0);
var side22 = new THREE.Mesh(side22Geom, new THREE.MeshBasicMaterial({
color:'pink',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side22);
side22.scale.set(0.12, 0.84, 0.12);
var side23Geom = PolygonGeometry(3);
side23Geom.translate(0,0.5,0);
var side23 = new THREE.Mesh(side23Geom, new THREE.MeshBasicMaterial({
color:'red',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side23);
side23.scale.set(0.12, 0.84, 0.12);
var side24Geom = PolygonGeometry(3);
side24Geom.translate(0,0.5,0);
var side24 = new THREE.Mesh(side24Geom, new THREE.MeshBasicMaterial({
color:'yellow',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side24);
side24.scale.set(0.12, 0.84, 0.12);
var side25Geom = PolygonGeometry(3);
side25Geom.translate(0,0.5,0);
var side25 = new THREE.Mesh(side25Geom, new THREE.MeshBasicMaterial({
color:'green',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side25);
side25.scale.set(0.12, 0.84, 0.12);
var side26Geom = PolygonGeometry(3);
side26Geom.translate(0,0.5,0);
var side26 = new THREE.Mesh(side26Geom, new THREE.MeshBasicMaterial({
color:'brown',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side26);
side26.scale.set(0.12, 0.84, 0.12);
var side27Geom = PolygonGeometry(3);
side27Geom.translate(0,0.5,0);
var side27 = new THREE.Mesh(side27Geom, new THREE.MeshBasicMaterial({
color:'pink',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side27);
side27.scale.set(0.12, 0.84, 0.12);
var side28Geom = PolygonGeometry(3);
side28Geom.translate(0,0.5,0);
var side28 = new THREE.Mesh(side28Geom, new THREE.MeshBasicMaterial({
color:'red',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side28);
side28.scale.set(0.12, 0.84, 0.12);
var side29Geom = PolygonGeometry(3);
side29Geom.translate(0,0.5,0);
var side29 = new THREE.Mesh(side29Geom, new THREE.MeshBasicMaterial({
color:'yellow',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side29);
side29.scale.set(0.12, 0.84, 0.12);
var side30Geom = PolygonGeometry(3);
side30Geom.translate(0,0.5,0);
var side30 = new THREE.Mesh(side30Geom, new THREE.MeshBasicMaterial({
color:'green',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side30);
side30.scale.set(0.12, 0.84, 0.12);
var side31Geom = PolygonGeometry(3);
side31Geom.translate(0,0.5,0);
var side31 = new THREE.Mesh(side31Geom, new THREE.MeshBasicMaterial({
color:'blue',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side31);
side31.scale.set(0.12, 0.84, 0.12);
var side32Geom = PolygonGeometry(3);
side32Geom.translate(0,0.5,0);
var side32 = new THREE.Mesh(side32Geom, new THREE.MeshBasicMaterial({
color:'yellow',
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
}));
sides.push(side32);
side32.scale.set(0.12, 0.84, 0.12);
// hierarchy
side2.position.set(0.5,0.1,0.98);
side2.rotation.y = -0.95; //-0.95
side2.rotation.x = -0.1;
side2.rotation.z = Math.PI/2;
side0.add(side2);
side3.position.set(0.5,0,0);
side3.rotation.z = Math.PI;
side3.rotation.y = -1.57;
side3.rotation.x = 0;
side0.add(side3);
side4.position.set(0.5,-0.1,0.98);
side4.rotation.y = -0.95; //-0.95
side4.rotation.x = 0.09;
side4.rotation.z = Math.PI/2;
side0.add(side4);
side5.position.set(0.5,0.1,-0.98);
side5.rotation.y = 0.95; //-0.95
side5.rotation.x = 0.15;
side5.rotation.z = Math.PI/2;
side0.add(side5);
side6.position.set(0.5,-0.1,-0.99);
side6.rotation.y = 0.95; //-0.95
side6.rotation.x = -0.05;
side6.rotation.z = Math.PI/2;
side0.add(side6);
side7.position.set(0.5,0.3,-0.95);
side7.rotation.y = 0.95; //-0.95
side7.rotation.x = 0.33;
side7.rotation.z = Math.PI/2;
side0.add(side7);
side8.position.set(0.5,-0.3,-0.95);
side8.rotation.y = 0.95; //-0.95
side8.rotation.x = -0.24;
side8.rotation.z = Math.PI/2;
side0.add(side8);
side9.position.set(0.5,-0.5,-0.87);
side9.rotation.y = 0.95; //-0.95
side9.rotation.x = -0.48;
side9.rotation.z = Math.PI/2;
side0.add(side9);
side10.position.set(0.5,0.5,-0.87);
side10.rotation.y = 0.95; //-0.95
side10.rotation.x = 0.55;
side10.rotation.z = Math.PI/2;
side0.add(side10);
side11.position.set(0.5,0.67,-0.75);
side11.rotation.y = 0.95; //-0.95
side11.rotation.x = 0.74;
side11.rotation.z = Math.PI/2;
side0.add(side11);
side14.position.set(0.5,-0.66,-0.75);
side14.rotation.y = 0.95; //-0.95
side14.rotation.x = -0.7;
side14.rotation.z = Math.PI/2;
side0.add(side14);
side12.position.set(0.5,0.8,-0.57);
side12.rotation.y = 0.95; //-0.95
side12.rotation.x = 0.98;
side12.rotation.z = Math.PI/2;
side0.add(side12);
side15.position.set(0.5,-0.8,-0.6);
side15.rotation.y = 0.95; //-0.95
side15.rotation.x = -0.92;
side15.rotation.z = Math.PI/2;
side0.add(side15);
side13.position.set(0.5,0.9,-0.4);
side13.rotation.y = 0.95; //-0.95
side13.rotation.x = 1.2;
side13.rotation.z = Math.PI/2;
side0.add(side13);
side16.position.set(0.5,-0.91,-0.42);
side16.rotation.y = 0.95; //-0.95
side16.rotation.x = -1.15;
side16.rotation.z = Math.PI/2;
side0.add(side16);
side17.position.set(0.5,0.91,0.42);
side17.rotation.y = -0.95; //-0.95
side17.rotation.x = -1.15;
side17.rotation.z = Math.PI/2;
side0.add(side17);
side18.position.set(0.5,-0.9,0.4);
side18.rotation.y = -0.95; //-0.95
side18.rotation.x = 1.2;
side18.rotation.z = Math.PI/2;
side0.add(side18);
side19.position.set(0.5,-0.67,0.75);
side19.rotation.y = -0.95; //-0.95
side19.rotation.x = 0.74;
side19.rotation.z = Math.PI/2;
side0.add(side19);
side20.position.set(0.5,0.66,0.75);
side20.rotation.y = -0.95; //-0.95
side20.rotation.x = -0.7;
side20.rotation.z = Math.PI/2;
side0.add(side20);
side21.position.set(0.5,-0.8,0.57);
side21.rotation.y = -0.95; //-0.95
side21.rotation.x = 0.98;
side21.rotation.z = Math.PI/2;
side0.add(side21);
side22.position.set(0.5,0.8,0.6);
side22.rotation.y = -0.95; //-0.95
side22.rotation.x = -0.92;
side22.rotation.z = Math.PI/2;
side0.add(side22);
side23.position.set(0.5,-0.3,0.95);
side23.rotation.y = -0.95; //-0.95
side23.rotation.x = 0.33;
side23.rotation.z = Math.PI/2;
side0.add(side23);
side24.position.set(0.5,0.3,0.95);
side24.rotation.y = -0.95; //-0.95
side24.rotation.x = -0.28;
side24.rotation.z = Math.PI/2;
side0.add(side24);
side25.position.set(0.5,0.5,0.87);
side25.rotation.y = -0.95; //-0.95
side25.rotation.x = -0.48;
side25.rotation.z = Math.PI/2;
side0.add(side25);
side26.position.set(0.5,-0.5,0.87);
side26.rotation.y = -0.95; //-0.95
side26.rotation.x = 0.55;
side26.rotation.z = Math.PI/2;
side0.add(side26);
side27.position.set(0.5,-0.97,0.2);
side27.rotation.y = -0.95; //-0.95
side27.rotation.x = 1.4;
side27.rotation.z = Math.PI/2;
side0.add(side27);
side28.position.set(0.5,0.97,-0.2);
side28.rotation.y = 0.95; //-0.95
side28.rotation.x = 1.4;
side28.rotation.z = Math.PI/2;
side0.add(side28);
side29.position.set(0.5,0.99,0);
side29.rotation.y = 0.95; //-0.95
side29.rotation.x = 1.6;
side29.rotation.z = Math.PI/2;
side0.add(side29);
side30.position.set(0.5,-0.99,0);
side30.rotation.y = -0.95; //-0.95
side30.rotation.x = 1.6;
side30.rotation.z = Math.PI/2;
side0.add(side30);
side31.position.set(0.5,-0.98,-0.22);
side31.rotation.y = -0.95; //-0.95
side31.rotation.x = 1.8;
side31.rotation.z = Math.PI/2;
side0.add(side31);
side32.position.set(0.5,0.98,0.22);
side32.rotation.y = 0.95; //-0.95
side32.rotation.x = 1.8;
side32.rotation.z = Math.PI/2;
side0.add(side32);
$(renderer.domElement).on('mousedown', function(e) {
isDragging = true;
}).on('mousemove', function(e) {
var deltaMove = {
x: e.offsetX-previousMousePosition.x,
y: e.offsetY-previousMousePosition.y
};
if(isDragging) {
var deltaRotationQuaternion = new THREE.Quaternion()
.setFromEuler(new THREE.Euler(
toRadians(deltaMove.y * 1),
toRadians(deltaMove.x * 1),
0,
'XYZ'
));
side0.quaternion.multiplyQuaternions(deltaRotationQuaternion, side0.quaternion);
}
previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});
// foldTheCube(0);
}
$(document).on('mouseup', function(e) {
isDragging = false;
});
$(document).ready(function() {
$("#slider").slider({
max: 0.95,
min: -1.57,
step: 0.01,
value: 0.95,
slide: function( event, ui ) {
foldTheCube(ui.value);
}
});
});
function foldTheCube(ang){
var start = {value: 0};
var finish = {value: Math.PI / 2};
var angle = 0;
new TWEEN
.Tween(start)
.to(finish, 3000)
.easing(TWEEN.Easing.Sinusoidal.InOut)
.onUpdate(function(){
angle = ang;
sides[1].rotation.y = -angle;
sides[3].rotation.y = -angle;
sides[4].rotation.y = angle;
sides[5].rotation.y = angle;
sides[6].rotation.y = angle;
sides[7].rotation.y = angle;
sides[8].rotation.y = angle;
sides[9].rotation.y = angle;
sides[10].rotation.y = angle;
sides[11].rotation.y = angle;
sides[12].rotation.y = angle;
sides[13].rotation.y = angle;
sides[14].rotation.y = angle;
sides[15].rotation.y = angle;
sides[16].rotation.y = -angle;
sides[17].rotation.y = -angle;
sides[18].rotation.y = -angle;
sides[19].rotation.y = -angle;
sides[20].rotation.y = -angle;
sides[21].rotation.y = -angle;
sides[22].rotation.y = -angle;
sides[23].rotation.y = -angle;
sides[24].rotation.y = -angle;
sides[25].rotation.y = -angle;
sides[26].rotation.y = -angle;
sides[27].rotation.y = angle;
sides[28].rotation.y = angle;
sides[29].rotation.y = -angle;
sides[30].rotation.y = -angle;
sides[31].rotation.y = angle;
})
.start();
}
function PolygonGeometry(sides)
{
var geo = new THREE.Geometry();
// generate vertices
for ( var pt = 0 ; pt < sides; pt++ ){
var angle = (Math.PI/2) + (pt / sides) * 2 * Math.PI;
var x = Math.cos( angle );
var y = Math.sin( angle );
geo.vertices.push( new THREE.Vector3(x,y,0));
}
for ( var i = 0; i< sides-2; i++) {
geo.faces.push( new THREE.Face3(0,i+1,i+2));
}
return geo;
}
function drawTriangle (vertex1, vertex2, vertex3)
{
var triangleGeometry = new THREE.Geometry();
var triangleMaterial = new THREE.MeshBasicMaterial({
color:0x0000ff,
transparent:true,
opacity:0.8,
side: THREE.DoubleSide
});
var triangle = new THREE.Mesh(triangleGeometry, triangleMaterial);
triangleGeometry.vertices = [vertex1, vertex2, vertex3];
triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
THREE.GeometryUtils.center(triangleGeometry);
return triangle;
}
function changeCubeRatio(obj){
var height = Number($('#height-ratio').val());
var width = Number($('#width-ratio').val());
resultData(width,height);
width = width/10;
height = height/10;
side0.scale.set( height, width, width );
}
function addVertPlane(obj){
if($(obj).is(':checked')){
var geometry = new THREE.PlaneGeometry(2,2);
vPlane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
// color:0x00ff00,
transparent:true,
opacity:0.4,
side: THREE.DoubleSide
}));
// vPlane.position.set(0,0,0.5);
side0.add(vPlane);
}else{
side0.remove(vPlane);
}
}
function addHoriPlane(obj){
if($(obj).is(':checked')){
var geometry = new THREE.PlaneGeometry(2,2);
hPlane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
// color:0x00ff00,
transparent:true,
opacity:0.4,
side: THREE.DoubleSide
}));
// hPlane.position.set(0,0,0.5);
hPlane.rotation.x = 1.58;
side0.add(hPlane);
}else{
side0.remove(hPlane);
}
}
// animate
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
render();
}
function render() {
renderer.render(scene, camera);
}
function toRadians(angle) {
return angle * (Math.PI / 180);
}
function toDegrees(angle) {
return angle * (180 / Math.PI);
}
function resultData(baseEdgeCalc,HeightCalc){
var baseArea = (Math.pow(baseEdgeCalc,2)*nSides) / (4 * Math.tan(Math.PI/nSides));
var lateralArea = nSides * baseEdgeCalc * HeightCalc;
var surfaceArea = (2 * baseArea) + lateralArea;
var volume = baseArea * HeightCalc;
console.log('baseArea::',baseArea);
console.log('lateralArea::',lateralArea);
console.log('surfaceArea::',surfaceArea);
console.log('volume::',volume);
}
我是three.js的新手，所以我还需要一个建议。感谢。
答案 0 :(得分：0)
就个人而言，我会以不同的方式处理这个问题：在blender中展开展开的锥体，添加动画然后将动画放到three.js。
你可以请一个jsfiddle或类似的在线示例吗？这是很多要分析的代码。