22. Three.js案例-创建旋转的圆环面

实现效果

知识点

WebGLRenderer (WebGL渲染器)

THREE.WebGLRenderer 是Three.js中最常用的渲染器，用于将场景渲染到WebGL画布上。

构造器

new THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置渲染器。

常用参数：

antialias：布尔值，是否开启抗锯齿，默认为 false。
canvas：HTMLCanvasElement，指定渲染器使用的画布，默认为自动创建。
context：WebGLRenderingContext，指定渲染器使用的WebGL上下文，默认为自动创建。
precision：字符串，指定着色器精度，可选值为 "low", "mediump", "highp"，默认为 "mediump"。
alpha：布尔值，是否透明，默认为 false。
premultipliedAlpha：布尔值，是否使用预乘Alpha，默认为 true。
preserveDrawingBuffer：布尔值，是否保留绘制缓冲区，默认为 false。
depth：布尔值，是否启用深度测试，默认为 true。
stencil：布尔值，是否启用模板测试，默认为 true。
logarithmicDepthBuffer：布尔值，是否启用对数深度缓冲，默认为 false。
failIfMajorPerformanceCaveat：布尔值，如果性能不佳则失败，默认为 false。

方法

setSize(width, height, updateStyle)：设置渲染器的尺寸。
setClearColor(color, alpha)：设置渲染器的背景颜色。
render(scene, camera)：渲染场景。

PerspectiveCamera (透视相机)

THREE.PerspectiveCamera 是Three.js中常用的透视相机，用于模拟人眼的透视效果。

构造器

new THREE.PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	Number	视野角度，以度为单位。
aspect	Number	相机的宽高比。
near	Number	近裁剪面距离。
far	Number	远裁剪面距离。

方法

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

Scene (场景)

THREE.Scene 是Three.js中的场景对象，用于存储所有的物体、光源和相机。

构造器

new THREE.Scene()

方法

add(object)：将物体添加到场景中。
remove(object)：从场景中移除物体。

AmbientLight (环境光)

THREE.AmbientLight 是Three.js中的环境光源，用于模拟环境光。

构造器

new THREE.AmbientLight(color, intensity)

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

DirectionalLight (方向光)

THREE.DirectionalLight 是Three.js中的方向光源，用于模拟太阳光。

构造器

new THREE.DirectionalLight(color, intensity)

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

方法

position.set(x, y, z)：设置光源的位置。

TextureLoader (纹理加载器)

THREE.TextureLoader 用于加载纹理贴图。

构造器

new THREE.TextureLoader(manager)

参数	类型	描述
manager	LoadingManager	加载管理器，默认为 `DefaultLoadingManager`。

方法

load(url, onLoad, onProgress, onError)：加载纹理贴图。
setCrossOrigin(value)：设置跨域请求标志。

MeshLambertMaterial (网格Lambert材质)

THREE.MeshLambertMaterial 是一种简单的漫反射材质，适用于不带镜面反射的表面。

构造器

new THREE.MeshLambertMaterial(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置材质。

常用参数：

color：材质颜色。
map：纹理贴图。
side：渲染面，默认为 THREE.FrontSide，可选值为 THREE.BackSide 和 THREE.DoubleSide。

RingGeometry (圆环几何体)

THREE.RingGeometry 用于创建一个圆环几何体。

构造器

new THREE.RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength)

参数	类型	描述
innerRadius	Number	内半径。
outerRadius	Number	外半径。
thetaSegments	Number	圆周上的分段数。
phiSegments	Number	半径上的分段数。
thetaStart	Number	开始角度，以弧度为单位。
thetaLength	Number	扇形的角度，以弧度为单位。

Mesh (网格)

THREE.Mesh 是Three.js中的网格对象，用于将几何体和材质组合在一起。

构造器

new THREE.Mesh(geometry, material)

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

方法

position.set(x, y, z)：设置网格的位置。
rotation.set(x, y, z)：设置网格的旋转角度。

动画

requestAnimationFrame 用于请求浏览器在下一次重绘之前调用指定的函数。

方法

requestAnimationFrame(callback)：请求浏览器在下一次重绘之前调用指定的函数。

示例代码

html 复制代码

<!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.setSize(window.innerWidth, window.innerHeight);
    myRenderer.setClearColor('white', 1.0);
    $("#myContainer").append(myRenderer.domElement);

    // 创建相机
    var myCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);

    // 创建场景
    var myScene = new THREE.Scene();

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

    // 添加方向光
    var myLight = new THREE.DirectionalLight('white');
    myLight.position.set(0, 1, 0);
    myScene.add(myLight);

    // 加载纹理贴图
    var myMap = new THREE.TextureLoader().load("images/img006.jpg");
    myMap.wrapS = myMap.wrapT = THREE.RepeatWrapping;
    myMap.anisotropy = 16;

    // 创建材质
    var myMaterial = new THREE.MeshLambertMaterial({
        map: myMap,
        side: THREE.DoubleSide
    });

    // 创建圆环几何体
    var myGeometry = new THREE.RingGeometry(40, 180, 1000);

    // 创建网格
    var myMesh = new THREE.Mesh(myGeometry, myMaterial);
    myMesh.position.set(0, 0, 0);
    myScene.add(myMesh);

    // 渲染圆环面
    animate();

    function animate() {
        requestAnimationFrame(animate);
        var myTimer = Date.now() * 0.0001;
        myCamera.position.x = Math.cos(myTimer) * 400;
        myCamera.position.y = Math.cos(myTimer) * 400;
        myCamera.position.z = Math.sin(myTimer) * 400;
        myCamera.lookAt(myScene.position);
        myMesh.rotation.x = myTimer * 5;
        myMesh.rotation.y = myTimer * 3;
        myMesh.rotation.z = myTimer * 2;
        myRenderer.render(myScene, myCamera);
    }
</script>
</body>
</html>

演示链接

示例链接