您的位置：首页 > Web前端 > JavaScript

Three.js lesson 1 建立一个球体

2013-01-10 09:40 253 查看 

(文章来源一个日本鬼子)

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Three.jsLesson</title>
<!--引入Three.js-->
<scriptsrc="../src/Three.js"></script>
<styletype="text/css">
div#canvas3d{
border:none;
cursor:move;
width:1400px;
height:600px;
background-color:#EEEEEE;
}
</style>
<scripttype="text/javascript"defer="defer">
//开启Three.js渲染器
varrenderer;
functioninitThree(){
width=document.getElementById('canvas3d').clientWidth;
height=document.getElementById('canvas3d').clientHeight;
//生成渲染器对象（属性：抗锯齿效果为设置有效）
renderer=newTHREE.WebGLRenderer({antialias:true});
renderer.setSize(width,height);
//追加【canvas】元素到【canvas3d】元素中。
document.getElementById('canvas3d').appendChild(renderer.domElement);
renderer.setClearColorHex(0xFFFFFF,1.0);
}

//设置相机
varcamera;
functioninitCamera(){
//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里
camera=newTHREE.PerspectiveCamera(45,width/height,1,5000);//（视野角：fov纵横比：aspect相机离视体积最近的距离：near相机离视体积最远的距离：far）

//位置坐标
camera.position.x=0;
camera.position.y=50;
camera.position.z=100;
//轴方向
camera.up.x=0;
camera.up.y=1;
camera.up.z=0;
//视野中心坐标
camera.lookAt({
x:0,
y:0,
z:0
});
}

//设置场景
varscene;
functioninitScene(){
scene=newTHREE.Scene();
}

//设置光源
varlight;
functioninitLight(){
light=newTHREE.DirectionalLight(0xff0000,1.0,0);//设置平行光源
light.position.set(200,200,200);//设置光源向量
scene.add(light);//追加光源到场景
}

//设置物体
varsphere;
functioninitObject(){
sphere=newTHREE.Mesh(
newTHREE.SphereGeometry(20,20),
newTHREE.MeshLambertMaterial({color:0xff0000})//材质设定
);
scene.add(sphere);
sphere.position.set(0,0,0);
}

//执行
functionthreeStart(){
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene,camera);
}
</script>
</head>

<bodyonload='threeStart();'>
<!--盛放canvas的容器-->
<divid="canvas3d"></div>
</body>
</html>






设置相机

varcamera=NEWTHREE.PerspectiveCamera(fov,Aspect,near,FAR);






设置光源

包括聚光源spotlightsource和点光源pointsource，平行光parallellight是点光源的特例，例子里是平行光。

其他光源：

varlight=NEWTHREE.AmbientLight(hex);//ambientlight
varlight=NEWTHREE.PointLight(hex,Intensity,Distance);//pointlightsource
varlight=NEWTHREE.SpotLight(hex,Intensity,Distance,CastShadow);//lightsourceSpotLight


设置物体

THREE.CubeGeometry(width,height,depth,segmentsWidth,segmentsHeight,segmentsDepth,materials,sides);//立方体
THREE.CylinderGeometry(radiusTop,radiusBottom,height,segmentsRadius,segmentsHeight,openEnded);//圆锥体
THREE.OctahedronGeometry(radius,detail)//八面体
THREE.PlaneGeometry(width,height,segmentsWidth,segmentsHeight);//平面
THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart,phiLength,thetaStart,thetaLength);//球体
THREE.TorusGeometry(radius,tube,segmentsR,segmentsT,arc)type//圆环

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航