File diff suppressed because it is too large
Load Diff
@ -0,0 +1,263 @@
|
||||
import * as THREE from 'three';
|
||||
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
|
||||
//定义全局变量
|
||||
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
|
||||
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
|
||||
var material1 = new THREE.MeshBasicMaterial({color:0x800080})
|
||||
var progress = 0;
|
||||
var velocity = 0.001;
|
||||
var a = [new THREE.Vector3(10,10,0),
|
||||
new THREE.Vector3(10,0,2),
|
||||
new THREE.Vector3(0,15,20)];
|
||||
var curve;
|
||||
var scene ;
|
||||
var camera ;
|
||||
var renderer;
|
||||
var controls ;
|
||||
var hands=[Lhand,Rhand];
|
||||
var Lhand = [Lcube,Lcube1,Lcube2,Lcube3,Lcube4,Lcube5,Lcube6,Lcube7,Lcube8,Lcube9,Lcube10,Lcube11,Lcube12,Lcube13,Lcube14,Lcube15,Lcube16,Lcube17,Lcube18,Lcube19,Lcube20];
|
||||
var Rhand = [Rcube,Rcube1,Rcube2,Rcube3,Rcube4,Rcube5,Rcube6,Rcube7,Rcube8,Rcube9,Rcube10,Rcube11,Rcube12,Rcube13,Rcube14,Rcube15,Rcube16,Rcube17,Rcube18,Rcube19,Rcube20];
|
||||
var Lcube = new THREE.Mesh( geometry, material );
|
||||
Lcube.position.set(-10,10,10);
|
||||
var Lcube1 = new THREE.Mesh( geometry, material );
|
||||
Lcube1.position.set(-5,10,0);
|
||||
var Lcube2 = new THREE.Mesh( geometry, material );
|
||||
Lcube2.position.set(0,10,0);
|
||||
var Lcube3 = new THREE.Mesh( geometry, material );
|
||||
Lcube3.position.set(5,10,0);
|
||||
var Lcube4 = new THREE.Mesh( geometry, material );
|
||||
Lcube4.position.set(10,10,0);
|
||||
|
||||
var Lcube5 = new THREE.Mesh( geometry, material );
|
||||
Lcube5.position.set(5,10,3);
|
||||
var Lcube6 = new THREE.Mesh( geometry, material );
|
||||
Lcube6.position.set(10,10,3);
|
||||
var Lcube7 = new THREE.Mesh( geometry, material );
|
||||
Lcube7.position.set(15,10,3);
|
||||
var Lcube8 = new THREE.Mesh( geometry, material );
|
||||
Lcube8.position.set(20,10,3);
|
||||
|
||||
var Lcube9 = new THREE.Mesh( geometry, material );
|
||||
Lcube9.position.set(5,10,6);
|
||||
var Lcube10 = new THREE.Mesh( geometry, material );
|
||||
Lcube10.position.set(10,10,6);
|
||||
var Lcube11 = new THREE.Mesh( geometry, material );
|
||||
Lcube11.position.set(15,10,6);
|
||||
var Lcube12 = new THREE.Mesh( geometry, material );
|
||||
Lcube12.position.set(20,10,6);
|
||||
|
||||
var Lcube13 = new THREE.Mesh( geometry, material );
|
||||
Lcube13.position.set(5,10,9);
|
||||
var Lcube14 = new THREE.Mesh( geometry, material );
|
||||
Lcube14.position.set(10,10,9);
|
||||
var Lcube15 = new THREE.Mesh( geometry, material );
|
||||
Lcube15.position.set(15,10,9);
|
||||
var Lcube16 = new THREE.Mesh( geometry, material );
|
||||
Lcube16.position.set(20,10,9);
|
||||
|
||||
var Lcube17 = new THREE.Mesh( geometry, material );
|
||||
Lcube17.position.set(5,10,12);
|
||||
var Lcube18 = new THREE.Mesh( geometry, material );
|
||||
Lcube18.position.set(10,10,12);
|
||||
var Lcube19 = new THREE.Mesh( geometry, material );
|
||||
Lcube19.position.set(15,10,12);
|
||||
var Lcube20 = new THREE.Mesh( geometry, material );
|
||||
Lcube20.position.set(20,10,12);
|
||||
|
||||
var Rcube = new THREE.Mesh( geometry, material );
|
||||
Rcube.position.set(-10,0,10);
|
||||
var Rcube1 = new THREE.Mesh( geometry, material );
|
||||
Rcube1.position.set(-5,0,0);
|
||||
var Rcube2 = new THREE.Mesh( geometry, material );
|
||||
Rcube2.position.set(0,0,0);
|
||||
var Rcube3 = new THREE.Mesh( geometry, material );
|
||||
Rcube3.position.set(5,0,0);
|
||||
var Rcube4 = new THREE.Mesh( geometry, material );
|
||||
Rcube4.position.set(10,0,0);
|
||||
|
||||
var Rcube5 = new THREE.Mesh( geometry, material );
|
||||
Rcube5.position.set(5,0,3);
|
||||
var Rcube6 = new THREE.Mesh( geometry, material );
|
||||
Rcube6.position.set(10,0,3);
|
||||
var Rcube7 = new THREE.Mesh( geometry, material );
|
||||
Rcube7.position.set(15,0,3);
|
||||
var Rcube8 = new THREE.Mesh( geometry, material );
|
||||
Rcube8.position.set(20,0,3);
|
||||
|
||||
var Rcube9 = new THREE.Mesh( geometry, material );
|
||||
Rcube9.position.set(5,0,6);
|
||||
var Rcube10 = new THREE.Mesh( geometry, material );
|
||||
Rcube10.position.set(10,0,6);
|
||||
var Rcube11 = new THREE.Mesh( geometry, material );
|
||||
Rcube11.position.set(15,0,6);
|
||||
var Rcube12 = new THREE.Mesh( geometry, material );
|
||||
Rcube12.position.set(20,0,6);
|
||||
|
||||
var Rcube13 = new THREE.Mesh( geometry, material );
|
||||
Rcube13.position.set(5,0,9);
|
||||
var Rcube14 = new THREE.Mesh( geometry, material );
|
||||
Rcube14.position.set(10,0,9);
|
||||
var Rcube15 = new THREE.Mesh( geometry, material );
|
||||
Rcube15.position.set(15,0,9);
|
||||
var Rcube16 = new THREE.Mesh( geometry, material );
|
||||
Rcube16.position.set(20,0,9);
|
||||
|
||||
var Rcube17 = new THREE.Mesh( geometry, material );
|
||||
Rcube17.position.set(5,0,12);
|
||||
var Rcube18 = new THREE.Mesh( geometry, material );
|
||||
Rcube18.position.set(10,0,12);
|
||||
var Rcube19 = new THREE.Mesh( geometry, material );
|
||||
Rcube19.position.set(15,0,12);
|
||||
var Rcube20 = new THREE.Mesh( geometry, material );
|
||||
Rcube20.position.set(20,0,12);
|
||||
|
||||
init();
|
||||
finger(Lcube1,Lcube2,Lcube3,Lcube4);
|
||||
finger(Lcube5,Lcube6,Lcube7,Lcube8);
|
||||
finger(Lcube9,Lcube10,Lcube11,Lcube12);
|
||||
finger(Lcube13,Lcube14,Lcube15,Lcube16);
|
||||
finger(Lcube17,Lcube18,Lcube19,Lcube20);
|
||||
|
||||
finger(Rcube1,Rcube2,Rcube3,Rcube4);
|
||||
finger(Rcube5,Rcube6,Rcube7,Rcube8);
|
||||
finger(Rcube9,Rcube10,Rcube11,Rcube12);
|
||||
finger(Rcube13,Rcube14,Rcube15,Rcube16);
|
||||
finger(Rcube17,Rcube18,Rcube19,Rcube20);
|
||||
link();
|
||||
makeCurve()
|
||||
animate();
|
||||
//-----------------------------------------------------
|
||||
|
||||
function makeCurve(){
|
||||
curve = new THREE.CatmullRomCurve3(a);
|
||||
curve.curveType = "catmullrom";
|
||||
curve.closed = false;//设置闭环
|
||||
curve.tension = 0.7//设置弧度
|
||||
|
||||
}
|
||||
function moveOnCurve(){
|
||||
if(curve==null){
|
||||
console.log("Loading");
|
||||
}
|
||||
else{
|
||||
if(progress<=1-velocity){
|
||||
const point = curve.getPointAt(progress);
|
||||
const pointBox = curve.getPointAt(progress+velocity);
|
||||
|
||||
if(point && pointBox){
|
||||
Lcube4.position.set(point.x,point.y,point.z);
|
||||
finger(Lcube1,Lcube2,Lcube3,Lcube4);
|
||||
}
|
||||
progress+=velocity;
|
||||
}
|
||||
else{
|
||||
progress = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//-----------------------------------------------------
|
||||
function init(){
|
||||
// 初始化场景
|
||||
scene = new THREE.Scene();
|
||||
//初始化相机
|
||||
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
|
||||
camera.position.set(30, 30, 30);//设置相机位置
|
||||
camera.lookAt(0,0,0); //设置相机方向(指向的场景对象)
|
||||
//初始化渲染器
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
renderer.shadowMapEnabled = true;//开启阴影，加上阴影渲染
|
||||
document.body.appendChild(renderer.domElement);//渲染到浏览器
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.update();
|
||||
}
|
||||
function link(){
|
||||
scene.add(Lcube);
|
||||
var points = [];
|
||||
points.push( new THREE.Vector3( Lcube1.position.x,Lcube1.position.y,Lcube1.position.z ) );
|
||||
points.push( new THREE.Vector3( Lcube.position.x,Lcube.position.y,Lcube.position.z ) );
|
||||
points.push( new THREE.Vector3( Lcube5.position.x,Lcube5.position.y,Lcube5.position.z ) );
|
||||
points.push( new THREE.Vector3( Lcube9.position.x,Lcube9.position.y,Lcube9.position.z ) );
|
||||
points.push( new THREE.Vector3( Lcube13.position.x,Lcube13.position.y,Lcube13.position.z ) );
|
||||
points.push( new THREE.Vector3( Lcube17.position.x,Lcube17.position.y,Lcube17.position.z ) );
|
||||
points.push( new THREE.Vector3( Lcube.position.x,Lcube.position.y,Lcube.position.z ) );
|
||||
var geometry1 = new THREE.BufferGeometry().setFromPoints( points );
|
||||
var line1 = new THREE.Line( geometry1, material );
|
||||
scene.add( line1 );
|
||||
|
||||
scene.add(Rcube);
|
||||
var points = [];
|
||||
points.push( new THREE.Vector3( Rcube1.position.x,Rcube1.position.y,Rcube1.position.z ) );
|
||||
points.push( new THREE.Vector3( Rcube.position.x,Rcube.position.y,Rcube.position.z ) );
|
||||
points.push( new THREE.Vector3( Rcube5.position.x,Rcube5.position.y,Rcube5.position.z ) );
|
||||
points.push( new THREE.Vector3( Rcube9.position.x,Rcube9.position.y,Rcube9.position.z ) );
|
||||
points.push( new THREE.Vector3( Rcube13.position.x,Rcube13.position.y,Rcube13.position.z ) );
|
||||
points.push( new THREE.Vector3( Rcube17.position.x,Rcube17.position.y,Rcube17.position.z ) );
|
||||
points.push( new THREE.Vector3( Rcube.position.x,Rcube.position.y,Rcube.position.z ) );
|
||||
var geometry2 = new THREE.BufferGeometry().setFromPoints( points );
|
||||
var line2 = new THREE.Line( geometry2, material1 );
|
||||
scene.add( line2 );
|
||||
}
|
||||
|
||||
function finger(value,value1,value2,value3){
|
||||
scene.add( value );
|
||||
scene.add( value1 );
|
||||
scene.add( value2 );
|
||||
scene.add( value3 );
|
||||
|
||||
var points = [];
|
||||
points.push( new THREE.Vector3( value.position.x,value.position.y,value.position.z ) );
|
||||
points.push( new THREE.Vector3( value1.position.x,value1.position.y,value1.position.z ) );
|
||||
points.push( new THREE.Vector3( value2.position.x,value2.position.y,value2.position.z ) );
|
||||
points.push( new THREE.Vector3( value3.position.x,value3.position.y,value3.position.z ) );
|
||||
var geometry1 = new THREE.BufferGeometry().setFromPoints( points );
|
||||
var line = new THREE.Line( geometry1, material );
|
||||
scene.add( line );
|
||||
|
||||
}
|
||||
function animate() {
|
||||
requestAnimationFrame( animate );
|
||||
moveOnCurve();
|
||||
// required if controls.enableDamping or controls.autoRotate are set to true
|
||||
controls.update();
|
||||
renderer.render( scene, camera );
|
||||
|
||||
}
|
||||
@ -0,0 +1,230 @@
|
||||
import * as THREE from "/static/three.js-r122/build/three.module.js"
|
||||
import {OrbitControls} from "/static/three.js-r122/examples/jsm/controls/OrbitControls.js";
|
||||
//定义全局变量
|
||||
//定义全局变量
|
||||
var geometry = new THREE.BoxGeometry(0.1,0.1,0.1);
|
||||
var Boxmaterial = new THREE.MeshBasicMaterial({color:0x00ff00});
|
||||
var Lmaterial = new THREE.MeshBasicMaterial({color:0x800080});
|
||||
var Rmaterial = new THREE.MeshBasicMaterial({color:0x800080});
|
||||
|
||||
var progress = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
|
||||
var velocity = 0.01;
|
||||
|
||||
var scene;
|
||||
var camera;
|
||||
var renderer;
|
||||
var controls;
|
||||
|
||||
var Lhands=[]
|
||||
var Rhands=[]
|
||||
var hands = [Lhands,Rhands];
|
||||
var Lline;
|
||||
var Rline;
|
||||
var value1;
|
||||
var curve ;
|
||||
var strings=[];
|
||||
var string0 =[];
|
||||
"议案速度"
|
||||
var a="0.1925947666168213,0.5473065376281738,2.3206620625160213e-08,0.3033226728439331,0.5114372372627258,0.04651688411831856,0.41777345538139343,0.5392630696296692,0.027217578142881393,0.4958229064941406,0.6215819716453552,-0.010156922042369843,0.544066309928894,0.7091509103775024,-0.04631917551159859,0.48519444465637207,0.4558757543563843,0.0012310644378885627,0.6001424193382263,0.4919063448905945,-0.02964494377374649,0.6723194122314453,0.4914349913597107,-0.05351248010993004,0.7327231764793396,0.48740360140800476,-0.07321580499410629,0.4649563729763031,0.4880273640155792,-0.05196492746472359,0.5244404673576355,0.6586609482765198,-0.07859423011541367,0.4717526137828827,0.6705580949783325,-0.07350102812051773,0.44495320320129395,0.636782169342041,-0.06894036382436752,0.42801740765571594,0.542985737323761,-0.10230648517608643,0.4637511670589447,0.7040750980377197,-0.10944212228059769,0.41616007685661316,0.6964676380157471,-0.08283781260251999,0.39777180552482605,0.6557613611221313,-0.06995978206396103,0.3863465487957001,0.6023310422897339,-0.1533883661031723,0.41023093461990356,0.7209582328796387,-0.14129549264907837,0.3680790066719055,0.7129360437393188,-0.11648382246494293,0.3500169515609741,0.6766629219055176,-0.10399384796619415"
|
||||
var b="0.3074747920036316,0.9019898772239685,1.0195339683605198e-08,0.25297945737838745,0.741093635559082,0.11882976442575455,0.2568987011909485,0.6188923120498657,0.15985067188739777,0.2994866967201233,0.5347099900245667,0.18189513683319092,0.34198740124702454,0.4815441370010376,0.208918958902359,0.2663106322288513,0.5142314434051514,0.08551575988531113,0.3212432861328125,0.38244909048080444,0.1309291571378708,0.3601645231246948,0.3609071969985962,0.17727282643318176,0.38025137782096863,0.35570672154426575,0.20493900775909424,0.33115246891975403,0.5110653042793274,0.03439659997820854,0.34486210346221924,0.31776756048202515,0.06974716484546661,0.362997829914093,0.23869016766548157,0.11691167950630188,0.37287649512290955,0.1874750852584839,0.14666494727134705,0.395782470703125,0.5395836234092712,-0.003572869813069701,0.44010263681411743,0.4286065399646759,0.05928943678736687,0.4411655068397522,0.4772379696369171,0.13026396930217743,0.4254198670387268,0.5230597853660583,0.17077606916427612,0.4580012559890747,0.5990009903907776,-0.03686628118157387,0.4788168966770172,0.5118088126182556,0.027214739471673965,0.47198575735092163,0.5557542443275452,0.08088598400354385,0.45820629596710205,0.5955811142921448,0.1158442348241806"
|
||||
var c="0.4523501992225647,0.1942148208618164,1.7096501991886726e-08,0.4074195623397827,0.29815971851348877,-0.08865319937467575,0.3774319887161255,0.42925089597702026,-0.1571134626865387,0.33004724979400635,0.5312825441360474,-0.22099411487579346,0.267127126455307,0.6064754724502563,-0.2902185618877411,0.5546683669090271,0.5435442328453064,-0.1285058706998825,0.5916881561279297,0.7007477283477783,-0.20100270211696625,0.6193171739578247,0.7940925359725952,-0.25689464807510376,0.6485602855682373,0.8795797228813171,-0.2977239191532135,0.6190973520278931,0.4962724447250366,-0.1330675482749939,0.6876095533370972,0.6502389311790466,-0.19820000231266022,0.7323645353317261,0.7488104701042175,-0.25582656264305115,0.7742902040481567,0.8370606899261475,-0.30281922221183777,0.6567232012748718,0.4195241332054138,-0.14580829441547394,0.7421215176582336,0.5388163328170776,-0.20962446928024292,0.7959713935852051,0.6220346093177795,-0.268515020608902,0.8430056571960449,0.7013962864875793,-0.3116633892059326,0.6741085052490234,0.32284364104270935,-0.1664796620607376,0.756801187992096,0.39365607500076294,-0.22251586616039276,0.8009949922561646,0.44722166657447815,-0.2642620801925659,0.840006411075592,0.5034887790679932,-0.29797473549842834"
|
||||
|
||||
var string = "0.3540383279323578,0.8863077163696289,5.255019974725883e-09,0.42504027485847473,0.8655926585197449,-0.03437764570116997,0.48042523860931396,0.806210994720459,-0.05496273189783096,0.5089290738105774,0.7344641089439392,-0.07449766248464584,0.5281661748886108,0.673363447189331,-0.09565073251724243,0.4463174641132355,0.6658893823623657,-0.031486935913562775,0.4772888720035553,0.5715258717536926,-0.05420501157641411,0.49460917711257935,0.5125950574874878,-0.07035552710294724,0.5082244873046875,0.4608921408653259,-0.0821903645992279,0.4041683077812195,0.6421458125114441,-0.03437076508998871,0.42221447825431824,0.5334337949752808,-0.054231300950050354,0.4320411682128906,0.46971893310546875,-0.07292795926332474,0.43996569514274597,0.41378194093704224,-0.08764351159334183,0.361648291349411,0.6407799124717712,-0.04192019999027252,0.3719751238822937,0.5392971038818359,-0.06619732081890106,0.37998464703559875,0.4714270234107971,-0.08831380307674408,0.38868609070777893,0.4155805706977844,-0.10313612222671509,0.3165479898452759,0.6576754450798035,-0.05323990061879158,0.31218597292900085,0.577325165271759,-0.0751069039106369,0.3108590245246887,0.5289334058761597,-0.09076160192489624,0.312467098236084,0.4876782298088074,-0.10198315232992172,0.3044047951698303,0.9663895964622498,6.9287020565411694e-09,0.38538458943367004,0.9433897733688354,-0.009958998300135136,0.4416201412677765,0.8743448257446289,-0.019099092110991478,0.4695747494697571,0.795817494392395,-0.021065426990389824,0.4836556017398834,0.7308721542358398,-0.019284158945083618,0.39677807688713074,0.7579846382141113,-0.04791314899921417,0.42566627264022827,0.6467018723487854,-0.04389629140496254,0.43870189785957336,0.5789888501167297,-0.03294100612401962,0.4477599859237671,0.5318640470504761,-0.02457273006439209,0.34907078742980957,0.7333060503005981,-0.03398894891142845,0.37949085235595703,0.6184651851654053,-0.02437933348119259,0.39749619364738464,0.553763747215271,-0.006116447038948536,0.4120081663131714,0.5092087984085083,0.004803979303687811,0.30696022510528564,0.7298744320869446,-0.014533798210322857,0.336764395236969,0.6606125235557556,0.009672199375927448,0.35517191886901855,0.6632943749427795,0.041734661906957626,0.36504673957824707,0.6806830167770386,0.06082293391227722,0.27332603931427,0.740144670009613,0.0023831308353692293,0.2884930372238159,0.6849370002746582,0.02794426493346691,0.29987964034080505,0.6789973974227905,0.05210520327091217,0.3059382438659668,0.68449467420578,0.06873659789562225";
|
||||
strings.push(string);
|
||||
// strings.push(a);
|
||||
// strings.push(a);
|
||||
// strings.push(c);
|
||||
strings.push(string)
|
||||
strings.push(string)
|
||||
strings.push(string);
|
||||
var p=0;
|
||||
var Rpoints=[new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)
|
||||
,new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,0)];
|
||||
//-------------------------------------------------
|
||||
function creat(){
|
||||
for (let i = 0; i < 21; i++) {
|
||||
Lhands.push(new THREE.Mesh( geometry, Boxmaterial ))
|
||||
Rhands.push(new THREE.Mesh( geometry, Boxmaterial ))
|
||||
}
|
||||
init()
|
||||
add();
|
||||
makeValue(string);
|
||||
console.log(value1);
|
||||
makeCurve();
|
||||
animate();
|
||||
}
|
||||
function init(){
|
||||
//初始化场景
|
||||
scene = new THREE.Scene();
|
||||
//初始化相机
|
||||
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
|
||||
camera.position.set(10, 15, 10);//设置相机位置
|
||||
camera.lookAt(0,0,0); //设置相机方向(指向的场景对象)
|
||||
//初始化渲染器
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
|
||||
renderer.setSize(950, 415);
|
||||
|
||||
renderer.shadowMapEnabled = true;//开启阴影，加上阴影渲染
|
||||
document.getElementById("container").appendChild(renderer.domElement);//渲染到浏览器
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
//controls.enableDamping = true;//阻尼
|
||||
controls.update();
|
||||
}
|
||||
function add(){
|
||||
for(let i = 0;i<21;i++){
|
||||
scene.add(Lhands[i]);
|
||||
}
|
||||
/*for(let i = 0;i<21;i++){
|
||||
scene.add(Rhand[i]);
|
||||
}*/
|
||||
let geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0,0,0)]);
|
||||
let geometry1 = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0,0,0)]);
|
||||
Lline = new THREE.Line(geometry,Lmaterial);
|
||||
Rline = new THREE.Line(geometry1,Rmaterial);
|
||||
scene.add(Lline);
|
||||
scene.add(Rline);
|
||||
}
|
||||
|
||||
function animate(){
|
||||
requestAnimationFrame(animate);
|
||||
moveOnCurve();
|
||||
//console.log(Lhands);
|
||||
controls.update;
|
||||
updateLine();
|
||||
//获取屏幕宽度
|
||||
var htmlWidth = document.documentElement.clientWidth;
|
||||
var htmlHeight = document.documentElement.clientHeight;
|
||||
//窗口自适应
|
||||
console.log(htmlWidth);
|
||||
if(htmlWidth>900&&htmlWidth<950&&htmlHeight<1200){
|
||||
renderer.setSize(900, 415);
|
||||
|
||||
}
|
||||
else if(htmlWidth>950&&htmlHeight>1200){
|
||||
renderer.setSize(950, 1200);
|
||||
}
|
||||
else if(htmlWidth>850&&htmlWidth<900&&htmlHeight<1200){
|
||||
renderer.setSize(850, 415);
|
||||
}
|
||||
else{
|
||||
renderer.setSize(950, 415);
|
||||
}
|
||||
if(progress[0][0]>1-velocity&&p!=strings.length-1){
|
||||
progress = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
|
||||
makeValue(strings[p]);
|
||||
makeCurve();
|
||||
p++;
|
||||
}
|
||||
renderer.render(scene,camera);
|
||||
}
|
||||
function makeValue(value){
|
||||
value1 = [[[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]]
|
||||
,[[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]]];
|
||||
var value = value.split(',');
|
||||
for(let i=0;i<value.length;i++){
|
||||
value[i] =parseFloat(value[i])*10;
|
||||
}
|
||||
for(let k=0;k<value.length/63;k++){
|
||||
for(let i=0;i<21;i++){
|
||||
|
||||
var x = value[0+i*3+k*63];
|
||||
var y = value[1+i*3+k*63];
|
||||
var z = value[2+i*3+k*63];
|
||||
value1[0][i].push(new THREE.Vector3(x,y,z));
|
||||
|
||||
}}
|
||||
}
|
||||
function makeCurve(){
|
||||
curve = [[[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],[[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]]];
|
||||
for(let i = 0;i<1;i++){
|
||||
for(let j=0;j<21;j++){
|
||||
if(value1[i][j].length!=0){
|
||||
curve[i][j] = new THREE.CatmullRomCurve3(value1[i][j]);
|
||||
curve[i][j].curveType = "catmullrom";
|
||||
curve[i][j].closed = false;
|
||||
curve[i][j].tension = 0.7;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
function moveOnCurve(){
|
||||
let point;
|
||||
let pointBox;
|
||||
for(let i=0;i<1;i++){
|
||||
for(let j=0;j<21;j++){
|
||||
if(curve[i][j].length==0){
|
||||
console.log("Loading");
|
||||
}
|
||||
else{
|
||||
if(progress[i][j]<=1-velocity){
|
||||
point = curve[i][j].getPointAt(progress[i][j]);
|
||||
pointBox = curve[i][j].getPointAt(progress[i][j]+velocity);
|
||||
if(point && pointBox){
|
||||
hands[i][j].position.set(point.x,point.y,point.z);
|
||||
//console.log(Lhands20);
|
||||
}
|
||||
progress[i][j]+=velocity;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateLine(){
|
||||
let Lpoints=[new THREE.Vector3(Lhands[4].position.x,Lhands[4].position.y,Lhands[4].position.z),new THREE.Vector3(Lhands[3].position.x,Lhands[3].position.y,Lhands[3].position.z),new THREE.Vector3(Lhands[2].position.x,Lhands[2].position.y,Lhands[2].position.z),new THREE.Vector3(Lhands[1].position.x,Lhands[1].position.y,Lhands[1].position.z)
|
||||
,new THREE.Vector3(Lhands[0].position.x,Lhands[0].position.y,Lhands[0].position.z),new THREE.Vector3(Lhands[5].position.x,Lhands[5].position.y,Lhands[5].position.z),new THREE.Vector3(Lhands[6].position.x,Lhands[6].position.y,Lhands[6].position.z),new THREE.Vector3(Lhands[7].position.x,Lhands[7].position.y,Lhands[7].position.z)
|
||||
,new THREE.Vector3(Lhands[8].position.x,Lhands[8].position.y,Lhands[8].position.z),new THREE.Vector3(Lhands[7].position.x,Lhands[7].position.y,Lhands[7].position.z),new THREE.Vector3(Lhands[6].position.x,Lhands[6].position.y,Lhands[6].position.z),new THREE.Vector3(Lhands[5].position.x,Lhands[5].position.y,Lhands[5].position.z)
|
||||
,new THREE.Vector3(Lhands[9].position.x,Lhands[9].position.y,Lhands[9].position.z),new THREE.Vector3(Lhands[10].position.x,Lhands[10].position.y,Lhands[10].position.z),new THREE.Vector3(Lhands[11].position.x,Lhands[11].position.y,Lhands[11].position.z),new THREE.Vector3(Lhands[12].position.x,Lhands[12].position.y,Lhands[12].position.z)
|
||||
,new THREE.Vector3(Lhands[11].position.x,Lhands[11].position.y,Lhands[11].position.z),new THREE.Vector3(Lhands[10].position.x,Lhands[10].position.y,Lhands[10].position.z),new THREE.Vector3(Lhands[9].position.x,Lhands[9].position.y,Lhands[9].position.z),new THREE.Vector3(Lhands[13].position.x,Lhands[13].position.y,Lhands[13].position.z)
|
||||
,new THREE.Vector3(Lhands[14].position.x,Lhands[14].position.y,Lhands[14].position.z),new THREE.Vector3(Lhands[15].position.x,Lhands[15].position.y,Lhands[15].position.z),new THREE.Vector3(Lhands[16].position.x,Lhands[16].position.y,Lhands[16].position.z),new THREE.Vector3(Lhands[15].position.x,Lhands[15].position.y,Lhands[15].position.z)
|
||||
,new THREE.Vector3(Lhands[14].position.x,Lhands[14].position.y,Lhands[14].position.z),new THREE.Vector3(Lhands[13].position.x,Lhands[13].position.y,Lhands[13].position.z),new THREE.Vector3(Lhands[17].position.x,Lhands[17].position.y,Lhands[17].position.z),new THREE.Vector3(Lhands[18].position.x,Lhands[18].position.y,Lhands[18].position.z)
|
||||
,new THREE.Vector3(Lhands[19].position.x,Lhands[19].position.y,Lhands[19].position.z),new THREE.Vector3(Lhands[20].position.x,Lhands[20].position.y,Lhands[20].position.z),new THREE.Vector3(Lhands[19].position.x,Lhands[19].position.y,Lhands[19].position.z),new THREE.Vector3(Lhands[18].position.x,Lhands[18].position.y,Lhands[18].position.z)
|
||||
,new THREE.Vector3(Lhands[17].position.x,Lhands[17].position.y,Lhands[17].position.z),new THREE.Vector3(Lhands[0].position.x,Lhands[0].position.y,Lhands[0].position.z)
|
||||
];
|
||||
let geometry = new THREE.BufferGeometry().setFromPoints(Lpoints);
|
||||
let geometry1 = new THREE.BufferGeometry().setFromPoints(Rpoints);
|
||||
scene.remove(Lline);
|
||||
Lline = new THREE.Line(geometry,Lmaterial);
|
||||
Rline = new THREE.Line(geometry1,Rmaterial);
|
||||
scene.add(Lline);
|
||||
}
|
||||
//----------------------------------------------------------------------------
|
||||
creat()
|
||||
|
||||
function ajax(str) {
|
||||
var xmlhttp;
|
||||
if (str.length==0)
|
||||
{
|
||||
document.getElementById("txtHint").innerHTML="";
|
||||
return;
|
||||
}
|
||||
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
|
||||
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
|
||||
xmlhttp.onreadystatechange=function()
|
||||
{
|
||||
if (xmlhttp.readyState==4 && xmlhttp.status==200)
|
||||
{
|
||||
document.getElementById("txtHint").innerHTML+=xmlhttp.responseText;
|
||||
num=0
|
||||
}
|
||||
}
|
||||
xmlhttp.open("GET","/xyz?="+str,true)
|
||||
xmlhttp.send();
|
||||
}
|
||||
document.getElementById("btn").onclick = function(){
|
||||
var input=document.getElementById("input")
|
||||
var str = input.innerText
|
||||
ajax(str)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue