html 5 canvas 在線 3D 動畫體驗

opt3D.size={width:300,height:300};
opt3D.scene=new THREE.Scene();
/*攝影機設定*/
opt3D.cameraParam={fov:45,aspect:opt3D.size.width/opt3D.size.height,near:0.1,far:10000,distance:200};
opt3D.camera=new THREE.PerspectiveCamera(opt3D.cameraParam.fov,opt3D.cameraParam.aspect,opt3D.cameraParam.near,opt3D.cameraParam.far);
opt3D.renderer=new THREE.WebGLRenderer();
opt3D.renderer.setSize(opt3D.size.width,opt3D.size.height);
opt3D.canvas=opt3D.renderer.domElement;
opt3D.canvasJ=$(opt3D.canvas).replaceAll('*.canvas3D>section:nth-of-type(1)>*');

/*半徑、水平格數、垂直格數*/
opt3D.geomParam={radius:70,segmentH:16,segmentV:8};
opt3D.geometry=new THREE.SphereGeometry(opt3D.geomParam.radius,opt3D.geomParam.segmentH,opt3D.geomParam.segmentV);

/*表面色*/
opt3D.mateParam={color:'#33ffff',emissive:'#001031'};
opt3D.material=new THREE.MeshLambertMaterial(opt3D.mateParam);

opt3D.sphere=new THREE.Mesh(opt3D.geometry,opt3D.material);

/*光源與光色*/
opt3D.light=new THREE.PointLight(0xffffff);
opt3D.light.position.set(-20,35,150);
opt3D.scene.add(opt3D.sphere);
opt3D.scene.add(opt3D.light);

opt3D.camera.position.z=opt3D.cameraParam.distance;

/*繪製*/
opt3D.render=function (){
 /*取得動畫速率*/
 animaReq=requestAnimationFrame(opt3D.render);

/*加動畫漸變值*/

/**/
 opt3D.renderer.render(opt3D.scene, opt3D.camera);
};
opt3D.render();