使用 ThreeJS 实现第一个三维场景（详）

已于 2023-12-17 13:02:27 修改
阅读量1k 收藏 4
点赞数 1
分类专栏： JavaScript 前端 艺术 文章标签： ThreeJS WebGL 3D JavaScript 艺术
于 2023-02-09 19:27:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44879989/article/details/128953025
版权
JavaScript 同时被 3 个专栏收录
38 篇文章 1 订阅
订阅专栏
前端
36 篇文章 2 订阅
订阅专栏
艺术
7 篇文章 1 订阅
订阅专栏

文章目录

参考

项目描述
ThreeJS官方文档
搜索引擎Google
哔哩哔哩老陈打码
Three.js开发指南：基于WebGL和HTML5在网页上渲染3D图形和动画（原书第3版）[美] 乔斯·德克森(Jos Dirksen) / 周翀，张薇 译

描述

项目描述
npm8.19.3
nodev18.13.0
ThreeJS148
操作系统Windows 10 专业版
Google109.0.5414.120（正式版本）（64 位）

注：

在观察本篇博客后续内容前请先搭建 ThreeJS 运行的相关环境，如还未搭建相关环境，请移步至我的另一篇博客 初识 ThreeJS （ThreeJS 相关环境搭建）。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用 ThreeJS 实现第一个三维场景</title>
    <style>
      *{
        /* 避免运行程序时浏览器中出现滚动条 */
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <!-- Vite 脚手架构建的 Vue 项目 -->
    <!-- Vue 将会把 JavaScript 文件编译到 #app 元素中 -->
    <div id="app"></div>
    <!-- 导入 main.js 文件 -->
    <!-- 本篇博客后续的 JavaScript 代码都将放置于该文件中 -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

注：

请将 HTML 元素的 margin 默认样式设置为 0px ，否则你将在浏览器中观察到不必要的滚动条。

效果

三维场景的基本实现

导入 ThreeJS

import * as three from 'three';

准备工作

场景

场景是 ThreeJS 中所有内容（摄像机、物体等）的容器。你可以使用如下代码创建一个场景：

const scene = new three.Scene();
摄像机

摄像机的角度、所处的位置等属性都将影响你能观察到的内容。在 ThreeJS 中，最常使用的摄像机有正交摄像机及正交摄像机。

正交摄像机

在 ThreeJS 中，OrthographicCamera 是一个用于创建正交投影相机的函数。与透视相机不同，正交投影相机以一种不具有透视效果的方式呈现场景，这意味着物体的大小不会随着它们与相机的距离而改变。这种相机通常用于工程图纸、建筑视图和2D游戏中，因为它保持了物体的比例和角度。

效果

正交摄像机拍摄的画面并不会存在透视效果，这与我们平常所见到的事物不同，所以你在观察正交摄像机拍摄的画面时可能会感到不适。

OrthographicCamera 的参数有六个，分别是 left, right, top, bottom, near, far。这些参数共同定义了一个称为 视图框 的空间，正交相机仅渲染在此空间内的对象。以下是这些参数的详细说明：

参数描述影响
left视图框左侧边界的坐标值决定了视图框在水平方向上的起始位置
right视图框右侧边界的坐标值决定了视图框在水平方向上的结束位置
top视图框顶部边界的坐标值决定了视图框在垂直方向上的起始位置
bottom视图框底部边界的坐标值决定了视图框在垂直方向上的结束位置
near最近可渲染对象到相机的距离定义了可渲染场景的起始深度，默认值为 0.1
far最远可渲染对象到相机的距离定义了可渲染场景的结束深度，默认值为 2000

注：

  1. near 的值需要在 0~far 范围之间。
  2. 和透视摄像机不同的是，0 对于正交摄像机的近端面来说是一个有效值。
视锥体

在三维计算机图形学中，视锥体（英语：viewing frustum）又称视景体、视锥，是三维世界中在屏幕上可见的区域，即虚拟摄像机的视野。

该区域的实际形状依所模拟的摄像机镜头而定，但顾名思义，其常见的形状是方平截头体。将四棱锥截为平截头体的两个平面称作近平面 和远平面。如果某个物体到摄像机的距离比近平面近或比远平面远，那么这个物体不会被显示。

视锥体

上述内容引用自 维基百科

透视摄像机

使用透视摄像机后，相同的物体会因为摄像机的远近而呈现不同的大小。该摄像机对人眼进行了模拟，使用透视摄像机可以更有效的模拟人眼中的现实世界。

效果

在 ThreeJS 中，你可以使用如下代码创建透视摄像机：

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number );

其中：

项目描述
fov视锥体垂直视野角度，默认值为 50。
aspect视锥体的宽高比，默认值为 1。
near规定视锥体近端面与摄像机之间的距离，默认值为 0.1。
far规定视锥体远端面与摄像机之间的距离，默认值为 2000。

注：

透视摄像机中的 near 的参数值需要大于 0 且小于 far。

示例：

在本示例中，我们将使用 PerspectiveCamera 函数创建透视摄像机，具体代码如下：

const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

其中：

window 对象为浏览器提供的 JavaScript API。

项目描述
window.innerWidth该属性对应的值为浏览器的视口（可视区域）宽度。
window.innerHeight该属性对应的值为浏览器的视口（可视区域）高度。
渲染器

渲染器将会基于摄像机的角度来计算场景对象在浏览器中将会被渲染成什么样子。

在 ThreeJS 中，你可以使用如下代码创建渲染器：

const renderer = new three.WebGLRenderer();

注：

除了我们在这里用到的 WebGLRenderer 渲染器 之外，ThreeJS 还提供了其他几种渲染器。当用户所使用的浏览器过于老旧，或者由于其他原因不支持 WebGLRenderer 渲染器 时，可以使用这几种渲染器实现渲染器的降级处理。

后续处理
将摄像机添加至场景中

在创建摄像机后，你需要将摄像机添加到场景中以使其发挥作用。你可以使用如下代码将摄像机添加到场景中。

scene.add(camera);

注：

在你没有使用上述代码将摄像机添加至场景中时，ThreeJS 会在渲染过程中自动将摄像机添加至场景中。但是我们手动将摄像机添加至场景中是一个更好的方式，尤其是当你需要处理多个摄像机的时候。

移动摄像机

物体在添加至场景中后，均位于场景中心。你需要调整摄像机的位置，否则你将无法观察到场景中的其他物体（对所处位置进行初始化的物体除外）。

Camera 对象拥有一个 position 对象，该对象具有如下属性及方法，你可以通过这些属性或方法修改 Camera 在场景中所处的位置。

项目描述
x设置物体在场景中的 X 坐标。
y设置物体在场景中的 Y 坐标。
z设置物体在场景中的 Z 坐标。
set()该方法接收三个参数，分别用以指定物体在场景中的 X、Y 及 Z 轴坐标。

在本示例中，我们将使用如下代码调整摄像机在场景中的位置：

camera.position.z = 5;
设置画布尺寸

ThreeJS 在内部会使用到 HTML 5 元素 Canvas，ThreeJS 将在 Canvas 元素中绘制三维物体，故 Canvas 元素可以理解为 ThreeJS 的画布。
你可以通过渲染器对象的 setSize() 方法对画布进行设置。

在本示例中，我们将使用如下代码以创建同浏览器视口（可视区域）相同大小的画布。

renderer.setSize(window.innerWidth, window.innerHeight);

其中：

window 对象为浏览器提供的 JavaScript API。

项目描述
window.innerWidth该属性对应的值为浏览器的视口（可视区域）宽度。
window.innerHeight该属性对应的值为浏览器的视口（可视区域）高度。
将渲染器创建的画布添加到 HTML 元素中
document.body.appendChild(renderer.domElement);

其中：

  1. document.body.appendChild()

使用该函数你将在 HTML 中的 body 元素的末尾添加一个指定的元素。

  1. renderer.domElement

该属性包含了 渲染器对象 创建的 Canvas 元素。你可以使用如下代码将 renderer.domElement 打印至控制台中。

console.log(renderer.domElement);

打印结果：

renderer.domElement

渲染

在准备工作结束后，在浏览器中观察运行结果，你将观察到白茫茫的一片，这是由于你还没有对构建的三维世界进行渲染。添加如下代码以对我们构建的三维世界进行渲染：

renderer.render(scene, camera);

执行效果：

在添加上述代码后，执行代码并前往浏览器中观察执行结果，你将观察到黑漆漆的一片，这是由于我们还为向场景中添加处摄像机以外的其他物体。

其中：

renderer.render() 接收两个实参，第一个实参用于指定渲染器需要渲染的场景，第二个参数则用于指定渲染器需要处理的摄像机。

物体

结构

在 ThreeJS 中创建物体时，你需要为该物体指定结构。ThreeJS 中提供了
很多可以直接使用的几何体，你可以使用 BoxGeometry() 函数创建一个长方体。

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

其中：

项目描述
width长方体在 X 轴方向上的长度，默认值为 1。
height长方体在 Y 轴方向上的长度，默认值为 1。
depth长方体在 Z 轴方向上的长度，默认值为 1。
widthSegments该参数为可选参数，用于指定长方体在 X 轴方向上的分段数，默认值为 1。
heightSegments该参数为可选参数，用于指定长方体在 Y 轴方向上的分段数，默认值为 1。
depthSegments该参数为可选参数，用于指定长方体在 Z 轴方向上的分段数，默认值为 1。

示例：

在本示例中，我们将使用 BoxGeometry() 函数创建一个立方体（立方体是特殊的长方体）。

const geometry = new three.BoxGeometry();
材质

3D材质本质上就是覆盖在3D对象表面上的东西，其控制了在渲染（光线与表面相互作用的方式、颜色、纹理、透明度和反射等属性）时带给人们的感知。

示例：

在本示例中我们将使用 MeshBasicMaterial() 构造函数来创建不受光照影响的基本材质。你可以向该函数提交一个对象以对材质进行配置。

const material = new three.MeshBasicMaterial({ color: '#0ff' });

使用上述代码后将创建一个 水绿色 的基础网格材质。

合成

在有了结构和材质后，我们需要将两者合并以创建几何体，使用 Mesh() 函数可以达成这个目的。

Mesh() 函数接收两个实参，第一个实参用于指定几何体的结构，第二个参数用于指定几何体的材质。

示例：

const cube = new three.Mesh(geometry, material);
将物体添加至场景中
scene.add(cube);

代码总汇

// 导入 ThreeJS 模块
import * as three from 'three';

// 常见场景
const scene = new three.Scene();
// 创建透视摄像机
const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new three.WebGLRenderer();
// 将摄像机添加至场景中
scene.add(camera);
// 移动摄像机
camera.position.z = 5;
// 设置画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器创建的画布添加到 HTML 元素中
document.body.appendChild(renderer.domElement);

// 创建各方向长度为 1 的长方体 (即正方体)
const geometry = new three.BoxGeometry();
// 创建一个 水绿色 的基础网格材质
const material = new three.MeshBasicMaterial({ color: '#0ff' });
// 将结构与材质合并以创建需要的几何体
const cube = new three.Mesh(geometry, material);
// 将几何体添加至场景中
scene.add(cube);

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

执行效果

执行效果

动画

我们可以使用 ThreeJS 实现 3D 动画的创建。

requestAnimationFrame()

现代浏览器通过 requestAnimationFrame() 函数为稳定而连续的渲染场景提供了良好的解决方案。通过 requestAnimationFrame() 函数，你可以向浏览器提供一个回调函数。你无需定义回调间隔，浏览器将自行决定最佳回调时机。你需要做的是在这个回调函数中完成每一帧的需要进行的绘制操作，然后将剩下的工作交由浏览器处理，浏览器将赋值使场景绘制尽量高效和平顺的进行。

使用 requestAnimationFrame() 而不是 setInterval()

在浏览器提供 requestAnimationFrame() API 前，这类工作是通过 setInterval() 函数来进行的，但并不推荐使用 setInterval() 来代替 requestAnimationFrame()，原因如下：

  1. requestAnimationFrame() 能提供更适合的回调间隔，而通过 setInterval() 函数指定的时间间隔并不一定适合所有的场景。

  2. requestAnimationFrame() 能在切换至其他标签页时停止绘制，能够更合理的利用计算机的资源计算机的资源。

立方体旋转动画

// 导入 ThreeJS 模块
import * as three from 'three';

// 常见场景
const scene = new three.Scene();
// 创建透视摄像机
const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new three.WebGLRenderer();
// 将摄像机添加至场景中
scene.add(camera);
// 移动摄像机
camera.position.z = 5;
// 设置画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器创建的画布添加到 HTML 元素中
document.body.appendChild(renderer.domElement);

// 创建各方向长度为 1 的长方体 (即正方体)
const geometry = new three.BoxGeometry();
// 创建一个 水绿色 的基础网格材质
const material = new three.MeshBasicMaterial({ color: '#0ff' });
// 将结构与材质合并以创建需要的几何体
const cube = new three.Mesh(geometry, material);
// 将几何体添加至场景中
scene.add(cube);

// 指定 3D 动画每一帧需要执行的操作
function animate(){
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 渲染
    renderer.render(scene, camera);
}

animate();

执行效果：

效果

轨道控制器

在 ThreeJS 中使用轨道控制器后，你可以通过长按鼠标左键并拖动鼠标来控制摄像头所处的位置。

导入

你可以使用如下代码来对轨道控制器进行导入：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

OrbitControls

OrbitControls( object : Camera, domElement : HTMLDOMElement )

你可以通过使用 OrbitControls() 函数来创建轨道控制器，该函数接受两个实参，具体如下：

项目描述
object需要控制的摄像机。
domElement用于监听事件的 HTML 元素。当鼠标在该元素中触发拖动事件后将影响被控制的摄像机所处的位置。

示例：

使用如下代码后，摄像头将仅监听发生在 Canvas 元素的拖动事件并据此影响被控制的摄像机所处的位置。

const orbitControls = new OrbitControls(camera, renderer.domElement);

代码总汇

// 导入 ThreeJS 模块
import * as three from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// 常见场景
const scene = new three.Scene();
// 创建透视摄像机
const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new three.WebGLRenderer();
// 将摄像机添加至场景中
scene.add(camera);
// 移动摄像机
camera.position.z = 5;
// 设置画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器创建的画布添加到 HTML 元素中
document.body.appendChild(renderer.domElement);

// 创建各方向长度为 1 的长方体 (即正方体)
const geometry = new three.BoxGeometry();
// 创建一个 水绿色 的基础网格材质
const material = new three.MeshBasicMaterial({ color: '#0ff' });
// 将结构与材质合并以创建需要的几何体
const cube = new three.Mesh(geometry, material);
// 将几何体添加至场景中
scene.add(cube);

// 在 ThreeJS 中使用轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);

// 指定 3D 动画每一帧需要执行的操作
function animate(){
    requestAnimationFrame(animate);
    // 渲染
    renderer.render(scene, camera);
}

animate();

执行效果

执行效果

为轨道控制器添加阻尼效果

你可以为轨道控制器添加阻尼效果，这将减缓摄像机随鼠标的移动速度，但将使得摄像机的拍摄到的画面更具美感。你可以观察如下两幅图来感受轨道控制器的阻尼效果。

非阻尼效果

非阻尼效果

阻尼效果

阻尼效果

添加阻尼效果

如果你想为你的轨道控制器添加阻尼效果，请将轨道控制器的实例对象的 enableDamping 属性的值设置为 true。就像这样：

// 部署轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);
// 开启轨道控制器的阻尼效果
orbitControls.enableDamping = true;

为轨道控制器添加惯性效果

你可以为管道控制器添加惯性效果，这将使得鼠标停止控制摄像头后，摄像头将继续运动并缓慢停止。你可以通过对比如下两幅图中来感受轨道控制器的惯性效果。

非惯性效果

非惯性效果

惯性效果

惯性效果

为轨道控制器添加惯性效果

如需为轨道控制器添加惯性效果，请先为其添加阻尼效果并在帧函数中调用轨道控制器实例对象的 update 方法。就像这样：

// 部署轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);
// 开启轨道控制器的阻尼效果
orbitControls.enableDamping = true;


function animate(){
    requestAnimationFrame(animate);
    // 为轨道控制器添加惯性效果
    orbitControls.update();
    renderer.render(scene, camera);
}

animate();

坐标轴辅助器

在 ThreeJS 中，我们可以添加坐标轴辅助器以在场景中显示三维坐标轴。

你可以使用 AxesHelper() 函数来创建三维坐标轴。

AxesHelper( size : Number )

其中：

项目描述
size用于指定三维坐标轴的轴线长度，默认值为 1。

示例：

在本示例中，你可以使用如下代码进行三维坐标轴的创建：

const axesHelper = new three.AxesHelper(5);

注：

在创建坐标辅助器后，你需要将其添加到场景中，否则你将无法在场景中观察到坐标轴。

代码总汇

// 导入 ThreeJS 模块
import * as three from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// 常见场景
const scene = new three.Scene();
// 创建透视摄像机
const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new three.WebGLRenderer();
// 将摄像机添加至场景中
scene.add(camera);
// 移动摄像机
camera.position.z = 5;
// 设置画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器创建的画布添加到 HTML 元素中
document.body.appendChild(renderer.domElement);

// 创建各方向长度为 1 的长方体 (即正方体)
const geometry = new three.BoxGeometry();
// 创建一个 水绿色 的基础网格材质
const material = new three.MeshBasicMaterial({ color: '#0ff' });
// 将结构与材质合并以创建需要的几何体
const cube = new three.Mesh(geometry, material);
// 将几何体添加至场景中
scene.add(cube);

// 在 ThreeJS 中使用轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);

// 在 ThreeJS 中创建坐标辅助器
const axesHelper = new three.AxesHelper(5);
// 将坐标辅助器添加到场景中
scene.add(axesHelper);

// 指定 3D 动画每一帧需要执行的操作
function animate(){
    requestAnimationFrame(animate);
    // 渲染
    renderer.render(scene, camera);
}

animate();

执行效果

效果

注：

在坐标辅助器中，红色代表 X 轴，绿色代表 Y 轴，蓝色代表 Z 轴。

BinaryMoon
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
threejs-StereoscopicEffects:立体显示使用ThreeJS创建的3D场景的效果
05-24
Three.js的StereoscopicEffects 该模块提供了效果，可通过多种方法以立体视觉（真实深度感知）显示用threeJS创建的3D场景。 地位 在职的 它有什么作用？ 用threeJS显示3D场景非常好，但是显示它们以使用户可以真实地查看它们甚至更好。 作为人类，基于我们的眼睛所看到的视差的细微差异，我们具有很强的深度感知能力。 在threeJS中，StereoCamera可以独立地模仿每只眼睛的感知，但是其余的工作要由开发人员来完成。 此外，存在大量显示立体内容的方法。 每个人都有其优点和缺点，显示一个或另一个取决于用户使用或喜欢的设备。 因此，最好的办法是让用户选择他们的显示模式。 该模块允许以多种方法轻松显示。 支持哪些方法？ 单视图[不立体] 左视图 单视图右 并排 平行检视 交叉视图 平行变形视图 交叉变形视图 顶部和底部 上下视图 底视图 上下变形视
使用three.js/webgl开发智慧城市场景的一些总结
凡事有果必有因
05-08 6747
一、城市建筑 二、浮动标注 三、图标告警闪烁 二、城市流光 三、区域轮廓 热力图 五、后期泛光 六、全局扫描效果
Vue项目中使用Three.js开发三维IT机房
u012148903的博客
03-13 1237
为了便于访问和区分模型，需要对模型进行规范命名，如机房中的IT机柜都是按照cabinet-001、cabinet-002、cabinet-003 命名的。假设IT机柜的名称都是唯一的，那我们便可以基于这个名称从后端获取相应机柜的详细信息。GLTF 模型文件包含了整个场景的数据，比如几何体、材质、动画、相机等。在建模软件中，同一类型的模型文件可以放入一个数组里，数组可以多层嵌套。当前的机房模型比较简单，没有使用数组，所有的Mesh对象都是平展开的。简化模型，能用贴图表现的细节，就用贴图。建模和导出gltf。
three3D 模型切换Demo
04-26
three3D 模型切换Demo
three.js地图可视化项目-广州模型
qq_39503511的博客
04-25 900
如有不明白的可以加QQ：2354528292；更多教学视频请访问：https://space.bilibili.com/236087412详细教学请到上方视频链接访问，总共3个多小时的教学~three.js地图可视化项目-广州模型。
three.js实现酷炫散点模型
接着奏乐接着舞的博客
10-14 4673
暂时就想到这些，three.js的使用不想正经写代码，他是有着固定的结构，只需修修改改即可。由于文件大小限制，仅能展示少部分特效，本文中共7中变换，如球体，立方体，管道，波浪，反重力，重力等效果。网上找到three.js源码，放到public目录下，在index.html中引入。项目需求是基于数据库分析出来的离散相关性的散点图，主要是为了追求良好的展示效果。使用了three.js编写的。至此，完成，如果需要three.js源码的可以留言邮箱。将文章末尾的实现以上功能的源码放入项目中（任意位置）
Three 之 three.js （webgl）基础 第一个入门 Web 3D 场景
仙魁XAN
04-28 2237
Three 之 three.js （webgl）基础 第一个入门 Web 3D 场景 目录 Three 之 three.js （webgl）基础 第一个入门 Web 3D 场景 一、简单介绍 二、Three 中构建场景主要的三要素 三、场景（Scene） 四、摄像机（Camera） 五、WebGLRenderer 六、第一个入门 Web 3D 场景 一、简单介绍 Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍， three.js （w
threejs编辑器(3D场景编辑器)
Chou_Junn的博客
06-11 7583
threejs编辑器
ThreeJS入门——场景(scene)、相机(camera)、渲染器(renderer)
xyphf的博客
11-28 4981
ThreeJS官网Three.js – JavaScript 3D Library ThreeJS的三要素——场景(scene)、相机(camera)、渲染器(renderer)。 ThreeJS的灯光。只有有了灯光，我们的东西才能在场景中显现出来。 ThreeJS的坐标系。 ThreeJS 画一个立方体Hello World. 2、场景 在Threejs中场景只有一种，用THREE.Scene来表示，要构建一个场景也很简单，只要new一个对象就可以了，代码如下: var scene =.
threejs+tweenjs实现3D粒子模型切换
weixin_33936401的博客
09-03 1420
前言 之前逛论坛时看到一篇利用 three.js 实现粒子模型切换动画的分享，具体的效果如下： 也可以去预览。 但是作者并没有把源码分享出来，正好最近在学习 threejs，正好抽时间写了一个类似的 demo，希望能帮助一些喜欢 threejs 的初学者。效果如下： 接下来，我们一起来看如何实现这样一个粒子体系切换动画。 获取模型 要实现一个 3D 动画的第一步就是设计出场景中的 3D 模型，...
ThreeJs 基础——画面
挤痘痘
11-29 881
版本：108 非常基础的代码，能了解ThreeJs各个基础参数 代码解释直接看注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一章-画面</title> <style> ...
threejs 切换场景
07-29
threejs切换场景 实现图朴上的切换效果， 而不是相机的视角移动，不浪费性能，非常棒的效果，代码简单，实现思路简单，适合新手开发项目中，遇到当前视角切换到模型内部 等效果 ， threejs scene的切换 ， 视角的移动会导致页面不是很流畅，而且旋转也会有点小bug 直接切换场景，就不会存在这种的问题，值得收藏，学不会找博主 私信 看到了会回复
用Three.js创建你的第一个三维场景
12-13
如今浏览器的功能越来越强大，而且这些功能可以通过 JavaScript 直接调用。你可以用 ...标签轻松地添加视频和音频，而且可以在 ...画布上创建各种交互组件。...这个功能集合里又有了一个新成员，即支持 WebGL 。
使用3D引擎threeJS实现星空粒子移动效果
11-30
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。 下载地址: http://threejs.org/ 首先创建一个HTML文件,引入three.js引擎包. <!DOCTYPE HTML> ...
基于three.js实现的3D粒子动效实例代码
01-19
three.js是用JavaScript编写的WebGL的第三方库，three.js提供了丰富的API帮助我们去实现3D动效，本文主要介绍如何使用three.js实现粒子过渡效果，以及基本的鼠标交互操作。 （注：本文使用的关于three.js的API都是...
three.js从入门到精通系列教程 - 《three.js第一个3D案例-创建3D场景》
01-19
三维场景Scene (opens new window)对象理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界（例如一个房间Scene）。 //2、创建一个长方体几何对象Geometry（例如一个椅子外形Geometry） //3、描述...
threejs案例源码.rar
08-24
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象
2024-2030全球与中国低脂凝乳奶酪市场现状及未来发展趋势.docx
04-30
2024-2030全球与中国低脂凝乳奶酪市场现状及未来发展趋势
毕业设计：vue+springboot乌鲁木齐南山冰雪旅游服务网站（源码 + 数据库 + 说明文档）
最新发布
04-30
毕业设计：vue+springboot乌鲁木齐南山冰雪旅游服务网站（源码 + 数据库 + 说明文档） 2 开发工具及技术 2 2.1 B/S结构的介绍 2 2.2 JSP及SpringBoot技术的介绍 2 2.3 HTML及Vue技术的介绍 2 2.4 MYSQL数据库的介绍 3 2.5 开发环境的介绍 3 3 需求分析 4 3.1 可行性分析 4 3.2 功能需求分析 4 3.3 非功能需求分析 4 4 总体设计 6 4.1 系统总体结构设计 6 4.2 系统的数据库设计 6 5 系统功能实现 6 5.1 注册用户 6 5.2 管理员用户 6 6 系统测试 6 6.1 测试目的 6 6.2 测试内容 6 6.3 测试总结 6
threejs 第三人称
06-06
Three.js是一款开源的JavaScript 3D图形库，广泛应用于Web三维渲染的领域，支持创建3D场景、对象、动画等。它的第三人称指的是在Three.js中创建的3D对象，观察者角度是从场景外看向3D对象，也称为"虚拟摄像机"，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BinaryMoon

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值