Three.js 实现龙年春节3D创意源码

# Three.js 实现龙年春节3D创意页面  ## 背景 龙年 `🐅` 春节将至，本文使用 `Three.js` 技术栈，实现趣味 `3D` 创意页面。本文包含的知识点主要包括：`ShadowMaterial`、 `MeshPhongMaterial` 两种基本材质的使用、`OrbitControls` 的缓动动画效果等。 ## 实现 > `👀` 在线预览，可登录：<http://www.sparkonline.cn/dragon/> ### 引入资源 其中 `GLTFLoader`、`FBXLoader` 用于加在模型、`OrbitControls` 用户镜头轨道控制、`TWEEN` 用于生成补间动画。 ```js <script type="text/javascript" charset="UTF-8" src="./libs/three/three.js"></script> <script type="text/javascript" charset="UTF-8" src="./libs/three/utils/SceneUtils.js"></script> <script type="text/javascript" charset="UTF-8" src="./libs/three/loaders/FBXLoader.js"></script> <script type="text/javascript" charset="UTF-8" src="./libs/three/controls/TrackballControls.js"></script> <script type="text/javascript" src="./libs/fire/FireShader.js"></script> <script type="text/javascript" src="./libs/fire/Fire.js"></script> <script type="text/javascript" src="./libs/other/inflate.min.js"></script> <script type="text/javascript" src="./libs/util/Stats.js"></script> <script type="text/javascript" src="./libs/util/dat.gui.js"></script> <script type="text/javascript" src="./js/util.js"></script> ``` ### 场景初始化 这部分内容主要用于初始化场景和参数，详细讲解可查阅相关文章，本文不再赘述。 ```js scene = new THREE.Scene(); scene.background = new THREE.TextureLoader().load(bgTexture); scene.fog = new THREE.Fog(0xdddddd, 100, 420); //var camera = initCamera(); var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; //透视相机 camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR); camera.position.set(0, 10, 70); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); //初始化渲染器 renderer = initRenderer(); //增加窗口监听事件 window.addEventListener('resize', onResize, true); //增加鼠标监听事件 document.addEventListener( 'pointerdown', onPointerDown ); document.addEventListener( 'pointermove', onPointerMove ); document.addEventListener( 'pointerup', onPointerUp ); //创建龙火和火球组 DragonFireBall = new THREE.Group(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; //创建场景平面 var planeGeometry = new THREE.PlaneGeometry(100, 100); // 透明材质显示阴影 var planeMaterial = new THREE.ShadowMaterial({ opacity: .5 }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = -0.5 * Math.PI; plane.position.set(0, -8, 0); plane.receiveShadow = true; scene.add(plane); //创建灯光 light = new THREE.DirectionalLight(0xffffff, 1); light.intensity = 1; light.position.set(20, 20, 8); light.castShadow = true; light.target = cube; light.shadow.mapSize.width = 512 * 12; light.shadow.mapSize.height = 512 * 12; light.shadow.camera.top = 80; light.shadow.camera.bottom = -30; light.shadow.camera.left = -30; light.shadow.camera.right = 80; scene.add(light); // 创建环境光 const ambientLight = new THREE.AmbientLight(0xffffff); scene.add(ambientLight); ``` #### `💡` Fog 场景雾化 本例中，打开页面时**模型由远及近加载，颜色由白色变为彩色的功能**就是通过 `Fog` 实现的。`Fog` 类定义的是线性雾，雾的密度是随着距离线性增大的，即场景中物体雾化效果随着随距离线性变化。 **构造函数**：`Fog(color, near, far)`。 * `color` 属性: 表示雾的颜色，比如设置为红色，场景中远处物体为黑色，场景中最近处距离物体是自身颜色，最远和最近之间的物体颜色是物体本身颜色和雾颜色的混合效果。 * `near` 属性：表示应用雾化效果的最小距离，距离活动摄像机长度小于 `near` 的物体将不会被雾所影响。 * `far` 属性：表示应用雾化效果的最大距离，距离活动摄像机长度大于 `far` 的物体将不会被雾所影响。 ### 创建地面 本例中使用了背景图，我需要一个**既能呈现透明显示背景、又能产生阴影的材质**生成地面，于是使用到 `ShadowMaterial` 材质。 ```js //创建场景地面 var planeGeometry = new THREE.PlaneGeometry(100, 100); // 透明材质显示阴影 var planeMaterial = new THREE.ShadowMaterial({ opacity: .5 }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = -0.5 * Math.PI; plane.position.set(0, -8, 0); plane.receiveShadow = true; scene.add(plane); ``` #### `💡` ShadowMaterial 阴影材质 此材质可以接收阴影，但在其他方面完全透明。 **构造函数**： `ShadowMaterial(parameters: Object)` * `parameters`：（可选）用于定义材质外观的对象，具有一个或多个属性。 **特殊属性**： * `.isShadowMaterial[Boolean]`：用于检查此类或派生类是否为阴影材质。默认值为 `true`。因为其通常用在内部优化，所以不应该更改该属性值。 * `.transparent[Boolean]`：定义此材质是否透明。默认值为 `true`。 ### 创建魔法阵 在老虎 `🐅` 底部地面创建一个炫酷的旋转**自发光**圆形魔法阵。 ```js cycle = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load(cycleTexture), transparent: true })); cycle.rotation.x = -0.5 * Math.PI; cycle.position.set(0, -11, 0); cycle.scale.set(1.9, 1.9, 1.9); // cycle.receiveShadow = true; scene.add(cycle); ``` 魔法阵的贴图：  #### `💡` MeshPhongMaterial 网格材质 一种用于具有镜面高光的光泽表面的材质。该材质使用非物理的 `Blinn-Phong` 模型来计算反射率。 **构造函数**：`MeshPhongMaterial(parameters: Object)` * `parameters`：（可选）用于定义材质外观的对象，具有一个或多个属性。 **特殊属性**： * `.emissive[Color]`：材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。 * `.emissiveMap[Texture]`：设置放射（发光）贴图。默认值为 `null`。放射贴图颜色由放射颜色和强度所调节。 如果你有一个放射贴图，请务必将放射颜色设置为黑色以外的其他颜色。 * `.emissiveIntensity[Float]`：放射光强度。调节发光颜色。默认为 `1`。 * `.shininess[Float]`：`specular` 高亮的程度，越高的值越闪亮。默认值为 `30`。 * `.specular[Color]`：材质的高光颜色。默认值为 `0x111111` 的颜色 `Color`。这定义了材质的光泽度和光泽的颜色。 * `.specularMap[Texture]`：镜面反射贴图值会影响镜面高光以及环境贴图对表面的影响程度。默认值为 `null`。 > 与 `MeshLambertMaterial` 中使用的 `Lambertian` 模型不同，该材质可以模拟具有镜面高光的光泽表面（例如涂漆木材）。使用 `Phong` 着色模型计算着色时，会计算每个像素的阴影，与 `MeshLambertMaterial` 使用的 `Gouraud` 模型相比，该模型的结果更准确，但代价是牺牲一些性能。 > `MeshStandardMaterial` 和 `MeshPhysicalMaterial` 也使用这个着色模型。在 `MeshStandardMaterial` 或 `MeshPhysicalMaterial` 上使用此材质时，性能通常会更高 ，但会牺牲一些图形精度。 ### 文字模型 使用 `FBXLoader` 来加载**阖家欢乐\n万事如意**字样的 `3D` 文字模型。 ```js var loader = new THREE.FontLoader(); loader.load( './assets/fonts/Microsoft YaHei_Regular.json', function ( font ) { te