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

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.BackSideTHREE.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>

演示链接

示例链接

相关推荐
世伟爱吗喽7 小时前
threejs入门学习日记
前端·javascript·three.js
拜无忧2 天前
three.js纸飞机飞行撞建筑
前端·three.js
拜无忧2 天前
three/文字爆裂效果
three.js
前端人类学3 天前
构筑数字夜空:Three.js 建筑群灯光特效全解析
javascript·three.js
xhload3d5 天前
场景切换 × 流畅过渡动画实现方案 | 图扑软件
物联网·3d·智慧城市·html5·动画·webgl·数字孪生·可视化·虚拟现实·工业互联网·工控·工业·2d·轻量化·过渡动画
柳杉5 天前
使用three.js搭建3d隧道监测-3
前端·javascript·three.js
三维搬砖者6 天前
06Threejs电影拍摄角度-第三章:搭建场景 - 初始化环境
three.js
sixgod_h7 天前
Threejs源码系列- renderer/webgl
three.js
陈小峰_iefreer9 天前
使用Stone 3D快速制作第一人称视角在线小游戏
游戏引擎·元宇宙·three.js·web3d
iloveas20149 天前
three.js+WebGL踩坑经验合集(8.3):合理设置camera.near和camera.far缓解实际场景中的z-fighting叠面问题
webgl