31. Three.js案例-创建并旋转地球模型

最新推荐文章于 2025-01-15 15:17:10 发布

MossGrower

最新推荐文章于 2025-01-15 15:17:10 发布

阅读量1k

点赞数 23

分类专栏： # Threejs 文章标签： Three.js WebGL 3D建模动画

本文链接：https://blog.csdn.net/m0_51180924/article/details/144498003

版权

Threejs 专栏收录该内容

63 篇文章

订阅专栏

31. Three.js案例-创建并旋转地球模型

实现效果

知识点

WebGLRenderer (WebGL渲染器)

用于创建一个WebGL渲染器，负责将3D场景渲染到网页上。

构造器

THREE.WebGLRenderer(parameters : Object)

参数	类型	描述
parameters	Object	渲染器的配置参数。

常用参数：

antialias：布尔值，是否开启抗锯齿，默认为false。
alpha：布尔值，是否允许透明背景，默认为false。
preserveDrawingBuffer：布尔值，是否保留绘图缓冲区，默认为false。

方法

setPixelRatio(value : Number)：设置设备像素比。
setSize(width : Number, height : Number, updateStyle : Boolean)：设置渲染器的尺寸。

Clock (时钟)

用于获取时间差，常用于动画循环中。

构造器

THREE.Clock(autoStart : Boolean)

参数	类型	描述
autoStart	Boolean	是否自动开始计时，默认为`true`。

方法

getDelta()：返回自上次调用此方法以来的时间差（以秒为单位）。
getElapsedTime()：返回自时钟启动以来的总时间（以秒为单位）。

PerspectiveCamera (透视相机)

用于创建一个透视相机，模拟人眼观察3D场景的效果。

构造器

THREE.PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)

参数	类型	描述
fov	Number	视野角度（垂直方向）。
aspect	Number	宽高比。
near	Number	近裁剪面距离。
far	Number	远裁剪面距离。

方法

position.set(x : Number, y : Number, z : Number)：设置相机的位置。
lookAt(vector : Vector3)：使相机看向指定的点。

Scene (场景)

用于存储和管理3D对象、光源等。

构造器

THREE.Scene()

方法

add(object : Object3D)：将对象添加到场景中。
background：设置场景的背景颜色或纹理。

AmbientLight (环境光)

用于创建一个环境光源，照亮整个场景。

构造器

THREE.AmbientLight(color : Color, intensity : Number)

参数	类型	描述
color	Color	光源颜色。
intensity	Number	光源强度，默认为1。

SphereBufferGeometry (球体几何体)

用于创建一个球体几何体。

构造器

THREE.SphereBufferGeometry(radius : Number, widthSegments : Number, heightSegments : Number, phiStart : Number, phiLength : Number, thetaStart : Number, thetaLength : Number)

参数	类型	描述
radius	Number	球体半径。
widthSegments	Number	经度方向的分段数，默认为8。
heightSegments	Number	纬度方向的分段数，默认为6。
phiStart	Number	起始经度，默认为0。
phiLength	Number	经度范围，默认为2π。
thetaStart	Number	起始纬度，默认为0。
thetaLength	Number	纬度范围，默认为π。

TextureLoader (纹理加载器)

用于加载纹理图像。

构造器

THREE.TextureLoader()

方法

load(url : String, onLoad : Function, onProgress : Function, onError : Function)：加载纹理图像。

MeshPhongMaterial (网格Phong材质)

用于创建一个Phong材质，支持光照效果。

构造器

THREE.MeshPhongMaterial(parameters : Object)

参数	类型	描述
map	Texture	纹理贴图。
color	Color	材质颜色。
shininess	Number	高光强度，默认为30。

Mesh (网格对象)

用于创建一个网格对象，结合几何体和材质。

构造器

THREE.Mesh(geometry : Geometry, material : Material)

参数	类型	描述
geometry	Geometry	几何体。
material	Material	材质。

方法

rotation.set(x : Number, y : Number, z : Number)：设置网格对象的旋转角度。

动画循环

使用requestAnimationFrame实现动画循环，不断更新场景并渲染。

function animate() {
    requestAnimationFrame(animate);
    var delta = myClock.getDelta();
    myRenderer.render(myScene, myCamera);
    myMesh.rotation.y += delta / 5;
}

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
    // 创建渲染器
    var myRenderer = new THREE.WebGLRenderer({antialias: true});
    myRenderer.setPixelRatio(window.devicePixelRatio);
    myRenderer.setSize(window.innerWidth, window.innerHeight);
    $("#myContainer").append(myRenderer.domElement);

    // 创建时钟
    var myClock = new THREE.Clock();

    // 创建透视相机
    var myCamera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
    myCamera.position.set(0, 100, 300);
    myCamera.lookAt(new THREE.Vector3(0, 0, 0));

    // 创建场景
    var myScene = new THREE.Scene();
    myScene.background = new THREE.Color('white');

    // 添加环境光
    myScene.add(new THREE.AmbientLight('lightgreen'));

    // 创建球体(地球)
    var myGeometry = new THREE.SphereBufferGeometry(120, 64, 64);
    var myMap = new THREE.TextureLoader().load('images/img007.png');
    var myMaterial = new THREE.MeshPhongMaterial({map: myMap});
    var myMesh = new THREE.Mesh(myGeometry, myMaterial);
    myScene.add(myMesh);

    // 渲染(旋转)球体(地球)
    animate();

    function animate() {
        requestAnimationFrame(animate);
        var delta = myClock.getDelta();
        myRenderer.render(myScene, myCamera);
        myMesh.rotation.y += delta / 5;
    }
</script>
</body>
</html>