2024年09月08日
随着元宇宙概念的火爆，3D 渲染相关的技术频繁被提及，而 Three.js 是基于 WebGL 的 api 封装的用于简化 3D 场景的开发的框架， 是入门 3D 的不错的抓手，今天我们就来入门下 Three.js。
我们基于 Three.js 来实现一个花瓣雨的效果。
Three.js 的基础
Three.js 用于渲染一个 3D 的场景，里面会有很多物体，比如立方体、圆柱、圆环、圆锥等各种几何体(以 Geometry 为后缀)，比如点（Points）线（Line）面（Sprite）等基础物体。这些所有的物体怎么管理呢？
2024年09月08日
本文在前节的基础上，介绍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()
2024年09月08日
相机（camera）是用来将3D场景投影到二维屏幕的重要因素，如果没有相机（camera）的投影，我们就什么也看不到。在Web3D｜基于WebGL的Three.js框架｜入门篇中我们已经介绍了相机的两种投影方式：
2024年09月08日
上一篇中，我们创建了一个立方体。见：Three.js(1)--Hello Cube!
那这个立方体的大小、位置是如何确定的呢？本篇就说一说 Three.js 构建的场景中的坐标系。
Three.js 提供了辅助类 AxisHelper 来显示坐标轴：
2024年09月08日
NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎
2024年09月08日
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
2024年09月08日
Three.js 是一款基于JavaScript的开源3D图形库，它简化了在Web上创建复杂的3D场景和动画的过程。
Three.js 由Ricardo Cabello（也称为mr.doob）于2010年创建，最初是为了填补WebGL技术在那个时候的不足而设计的。随着WebGL的普及和浏览器性能的提升，Three.js逐渐成为Web上3D图形编程的事实标准之一。
2024年09月08日
有没有想过如何在 3D Web 应用程序中模拟物理相机？ 在这篇博文中，我将向你展示如何使用 Three.js和 OpenCV 来完成此操作。 我们将从模拟针孔相机模型开始，然后添加真实的镜头畸变。 具体来说，我们将仔细研究 OpenCV 的两个失真模型，并使用后处理着色器复制它们。
2024年09月08日
Threejs点击事件不像我们一般的使用方法用click进行点击，需要使用射线Raycaster，
下面是一个完整的例子，加载obj模型，通过名称获取物体并且为点击到的物体修改颜色