纹理贴图（Textures）字面意思就是給几何体对象贴上不同的纹理图！好比于我们每天选择穿不同的衣服，我们穿不同的衣服带来的感官会有很大变化！同理几何体不同贴图的视觉效果也会有千差万别。纹理贴图是 Three.js一个很重要的内容，掌握了纹理贴图可以让3d效果产生质的飞跃。

在Three.js中实现阴影需要几个步骤，包括设置渲染器、光源以及物体的材质等。以下是一个基本的实现阴影的步骤：

1、设置渲染器以支持阴影：

const renderer = new THREE.WebGLRenderer();  
renderer.setSize(window.innerWidth, window.innerHeight);  
renderer.shadowMap.enabled = true;  // 启用阴影映射  
document.body.appendChild(renderer.domElement);

封面图：掘友留白大哥的自拍（有图有真相）

本文简介

点赞 + 关注 + 收藏 = 学会了

不管是做游戏还是做普通网页，在这个时代基本都离不开动画。

说到动画，第一个联想到的概念就是“帧”。这是用来衡量和描述动画是否流畅的一个单位。

导读：最近我购置了一台新的电脑，硬盘空间只有1T。我很担心这个电脑还能用多久。性能限制或者空间的限制，都使得在未来3-5年内，这个电脑会被淘汰。

但是，基于云APP的使用，老的电脑是足够了，而且，我们也不会被window或者linux的选择而费尽心思。

性能，在本地的限制将不再成为瓶颈。

这篇文章详细介绍了三次曲线、贝塞尔曲线和 B 样条曲线和曲面背后的数学原理，并提供了使用 Three.js 库实现的代码。

1、简介

Three.js是开源的宠儿，这是有充分理由的。它彻底改变了我们在网络上处理 3D 的方式，并且自r12013 年发布以来一直在不断发展。使用该库开发 3D 世界确实非常简单，但当您突破 2D 限制时，它仍然感觉像是一个神奇的补充网络。我们先建立一个基地。

# threejs 多屏互动效果，居然还能这么玩

**引言**

在Web前端技术的广阔天地中，Three.js无疑是最具魔力的一款3D图形库。当你尝试将Three.js与多屏互动相结合，将会碰撞出怎样的火花呢？本文将深入探讨如何通过Three.js实现多屏联动，解锁前所未有的Web体验，带你领略视觉艺术与科技交融的魅力。

**一、多屏互动基础概念**

随着元宇宙概念的火爆，3D 渲染相关的技术频繁被提及，而 Three.js 是基于 WebGL 的 api 封装的用于简化 3D 场景的开发的框架， 是入门 3D 的不错的抓手，今天我们就来入门下 Three.js。

我们基于 Three.js 来实现一个花瓣雨的效果。

Three.js 的基础

Three.js 用于渲染一个 3D 的场景，里面会有很多物体，比如立方体、圆柱、圆环、圆锥等各种几何体(以 Geometry 为后缀)，比如点（Points）线（Line）面（Sprite）等基础物体。这些所有的物体怎么管理呢？

本文在前节的基础上，介绍three.js其它的内置几何体。

一、准备代码

// 引入Three.js库的全部功能，并将其命名为THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';



// 创建一个场景
const scene = new THREE.Scene();

// 创建一个透视相机，参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);


//------------- 下面放创建几何体的代码 -----------------------
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const myGeometry = new THREE.Mesh(geometry, material);
scene.add(myGeometry);
//--------------- 创建几何体代码结束 --------------------------

// 创建一个平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize(); // 设置光源的方向
scene.add(directionalLight);

const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 5;
// 创建一个动画函数
function animate() {
    // 请求下一帧动画
    requestAnimationFrame(animate);

    // 更新 OrbitControls
    controls.update();
    myGeometry.rotation.x += 0.01;
    myGeometry.rotation.y += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
}

animate()