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)：请求浏览器在下一次重绘之前调用指定的函数。
示例代码
<!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>
演示链接
示例链接