35. Three.js案例-创建带阴影的球体与平面
35. Three.js案例-创建带阴影的球体与平面 实现效果 知识点 WebGLRenderer WebGLRenderer 是Three.js中用于渲染场景的主要类之一，它负责将场景中的对象渲染到画布上。 构造器 new THREE.WebGLRenderer(parameters : Object) 方法 setPixelRatio(value : Number): 设置设备像素比。setSize(...
React和Three.js结合-React Three Fiber
简介 React Three Fiber（简称 R3F）是一个用于在 React 中渲染 3D 图形的库，它将 Three.js 与 React 的声明式编程模型结合起来。Three.js 是一个广泛使用的 JavaScript 库，用于在 Web 中创建 3D 场景、动画和互动效果，而 React 是一个流行的 JavaScript 库，专注于构建用户界面。React Three Fiber 使得开发者...
36. Three.js案例-创建带光照和阴影的球体与平面
36. Three.js案例-创建带光照和阴影的球体与平面 实现效果 知识点 Three.js基础 WebGLRenderer WebGLRenderer 是Three.js中最常用的渲染器，用于将场景渲染到网页上。 构造器 new THREE.WebGLRenderer(parameters) 方法 setPixelRatio(value): 设置设备像素比。setSize(width, height)...
Three.js资源-贴图材质网站推荐
在使用 Three.js 进行 3D 图形渲染时，纹理贴图是不可或缺的一部分。无论是创建复杂的材质效果，还是提升模型的细节感，都离不开合适的纹理贴图资源。今天，我为大家推荐一些优质的 Three.js 纹理贴图网站，这些网站提供了丰富的纹理资源，可以帮助你轻松提升项目的视觉效果。 1. Textures.com 网址：https://www.textures.com简介：Textures.com 是一个著...
Three.js案例-360° VR看房
我们需要监听用户的输入（如鼠标或触控）来旋转视角。 相机控制：通过旋转相机的方位角（通常是使用 lon 和 lat）来改变用户的视角，从而模拟 360° 环视的效果。 球体的反向显示 由于默认情况下，Three.js 的球体表面是朝外的，因此我们需要将球体反转，让其内表面可见。这通过 geometry.scale(-1, 1, 1) 来实现。 创建 360° 看房 Demo 下面，我们将按照以下步骤一步步实...
17. Threejs案例-Three.js创建多个立方体
17. Threejs案例-Three.js创建多个立方体 实现效果 知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染 WebGL 场景的核心类。它负责将场景中的对象渲染到画布上。 构造器 new THREE.WebGLRenderer(parameters) 方法 setSize(width, height): 设置渲染器输出的尺寸。...
使用 Three.js 创建圣诞树场景
今天带大家一起实现一个圣诞树，先看下效果 一、导入模块并初始化 Three.js 场景 1. 创建场景 创建场景的目的是构建 3D 空间的容器，用于承载各种 3D 对象和光源。 const scene = new THREE.Scene(); 2. 创建相机 创建相机用于定义观察视角，我们使用透视相机（PerspectiveCamera），它能模拟人眼观察场景的效果。 参数含义： 75：视角大小，决定相机...
ThreeJS入门（162）：THREE.ConvexGeometry 知识详解，示例代码
文章目录 创建凸几何体的方法方法一：使用 `THREE.Geometry` 或 `THREE.BufferGeometry`方法二：使用 `THREE.ConvexBufferGeometry` 示例：创建一个凸几何体总结 在 Three.js 中，THREE.ConvexGeometry 不是一个内置的类或构造函数。然而，Three.js 提供了创建凸多边形几何体的方法，可以通过组合现有的几何体或编写自...
Three.js机器人与星系动态场景（四）：封装Threejs业务组件
封装ThreeTool类 导入相关依赖 import * as THREE from "three"; // 引入Three.js库import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import Stats from "three/examples/jsm/libs/stats.module.js"...
React 使用 three.js 加载 gltf 3D模型 | three.js 入门
系列文章 示例项目(gitcode)：https://gitcode.com/qq_41456316/simple-react-three-demo 文章目录 系列文章前言一、three.js是什么？二、使用 React 和 three.js 加载 glTF 3D 模型的步骤步骤 1：创建 React 应用步骤 2：安装 three.js步骤 3：准备 glTF 3D 模型文件步骤 4：创建组件加载 3D...