three.js 之 入门篇1

最新推荐文章于 2024-07-08 09:56:34 发布
最新推荐文章于 2024-07-08 09:56:34 发布
阅读量828 收藏 2
点赞数
分类专栏： three.js 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43845137/article/details/127441153
版权

目录

three.js 之 入门篇

1：使用parcel搭建 three.js 开发环境

parcel

  • 项目之中安装：npm install parcel-bundler --save-dev
  • 安装之中 配置脚本指令 ( 项目根目录下 src / index,html )
    
  "scripts": {
    "dev": "parcel <your entry file>", // eg: "dev": "parcel src/index.html",
    "build": "parcel build <your entry file>",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  • 安装three ： npm install three --save
  • 文件目录
    • 在这里插入图片描述
  • src / index.html
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css">
  <title>Document</title>
</head>
<body>
  <script src="./main/main.js" type="module"></script>
</body>
</html>
  • src / main / main.js
    import * as THREE from "three"
console.log('main.js',THREE);
  • 运行项目 : npm run dev

2：运行一个简单的场景和物体

2.1 main.js

import * as THREE from "three"
// console.log('main.js',THREE);
// 1：创建场景
const scene = new THREE.Scene()

// 2：创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene,camera)

2.2效果

在这里插入图片描述

3：轨道控制器和控制物体 mesh

3.1 main.js

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

// 1：创建场景
const scene = new THREE.Scene()

// 2：创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene,camera)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

3.2效果

在这里插入图片描述

4：添加坐标辅助器 AxesHelper

4.1

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

// 1：创建场景
const scene = new THREE.Scene()

// 2：创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene,camera)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

4.2效果

在这里插入图片描述

5：设置几何体移动

5.1

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

// 1：创建场景
const scene = new THREE.Scene()

// 2：创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
mesh.position.set(5,0,0)
// mesh.position.x = 3

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene,camera)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 06-2设置几何物体 集合体再x轴之中移动，到5的时候，回到原始位置
  mesh.position.x += 0.01
  if ( mesh.position.x > 5 ) {
    mesh.position.x = 0
  }
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

5.2 效果

在这里插入图片描述

6：设置几何体缩放和旋转 mesh下的 rotation

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

// 1：创建场景
const scene = new THREE.Scene()

// 2：创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
// mesh.position.set(5,0,0)
// mesh.position.x = 3

// 07-1 几何体的缩放
// mesh.scale.set(3,2,1)
// mesh.scale.x = 3
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是，先旋转那个轴

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene,camera)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 06-2设置几何物体 集合体再x轴之中移动，到5的时候，回到原始位置
  mesh.position.x += 0.01
  // 07-3 几何体的旋转2
  mesh.rotation.x += 0.01
  if ( mesh.position.x > 5 ) {
    mesh.position.x = 0
  }
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

8：设置基本动画

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

// 1：创建场景
const scene = new THREE.Scene()

// 2：创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
// mesh.position.set(5,0,0)
// mesh.position.x = 3

// 07-1 几何体的缩放
// mesh.scale.set(3,2,1)
// mesh.scale.x = 3
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是，先旋转那个轴

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene,camera)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 渲染函数 - 每一帧渲染一次
function animate(time) {
  // 08-1：动画的时候 
  let t = time / 1000 // time 当前毫秒数
  mesh.position.x = t * 1;
  if ( mesh.position.x > 5 ) {
    mesh.position.x = 0
  }
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

9：通过Clock 跟踪时间处理动画

在这里插入图片描述

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

// 1：创建场景
const scene = new THREE.Scene()

// 2：创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
// mesh.position.set(5,0,0)
// mesh.position.x = 3

// 07-1 几何体的缩放
// mesh.scale.set(3,2,1)
// mesh.scale.x = 3
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是，先旋转那个轴

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene,camera)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 9-1 设置时钟
let clock = new THREE.Clock()

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 9-2 设置时钟
  let time = clock.getElapsedTime() // 获取时钟运行总时长
  // let deltaTime = clock.getDelta() // 两次获取时钟的间隔时间
  let t = time % 5 // time 当前毫秒数
  mesh.position.x = t * 1;

  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()
小小亮01
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js 基础入门--第16课：实战篇之人物操作案例
liuhao9999的博客
04-11 435
下图是本文所分享实例最后的展示效果。本案例实现了人物跟随操作杆移动并跑步的动作，右边按钮可以实现攻击，短时间内连按可以实现不同的攻击动作。接下来我将带大家一步步实现这个案例。
Three.js入门（三）
unirrrrr的博客
06-03 1054
摘自Three.js入门指南 张雯莉 (作者) 6、网格 在学习了几何形状和材质之后，我们就能使用他们来创建物体了。最常用的一种物体就是网格（Mesh），网格是由顶点、边、面等组成的物体；其他物体包括线段（Line）、骨骼（Bone）、粒子系统（ParticleSystem）等。创建物体需要指定几何形状和材质，其中，几何形状决定了物体的顶点位置等信息，材质决定了物体的颜色、纹理等信息。 网格...
ThreeJs 基础入门
weixin_33738555的博客
09-27 628
本文来自网易云社区作者：唐钊Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它在 web 中创建各种三维场景，包括了摄影机、光影、材质等各种对象。使用它可以让我们更加直观的了解 webgl 的世界。3D 场景前置知识1.场景(Scene)：是物体、光源等元素的容器，可以配合 chrome 插件使用，抛出 window.scene即可实时调整 obj 的信息和材质信息。2.相机（Cam...
three.js入门学习
最新发布
m0_73847536的博客
07-08 722
vscode,webpack/vite/其他,Live Server项目开发环境引入：尽量加上版本号。
Three.js入门（一）
Meskjei的博客
09-18 182
Creating the secne 想要Three.js显示任何东西，我们都需要三个东西： scene（场景） camera（摄像机） renderer（渲染器 我们来分析以下代码 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / windo...
Three.js入门
hanne_lovegood的博客
11-07 1524
Three.js官网：http://threejs.org/，左边菜单栏第一个documentation可以阅读使用指南和参考手册，在https://www.techbrood.com/threejs/docs/可以阅读汉化版教程。 Three.js是一款开源的主流 3D绘图JS引擎 （名字Three就是3D的含义），原作者为Mr.Doob，项目地...
three.js 入门案例详解
10-18
本篇文章将通过一个简单的入门案例，帮助初学者理解three.js 的基本使用方法。 1. **下载与引入three.js** three.js 的最新版本可以从其GitHub仓库（https://github.com/mrdoob/three.js）获取。下载后，将其引用...
JS库之Three.js 简易入门教程(详解之一)
12-12
本篇是系列教程的第一篇：入门篇。在这篇文章中，我将以一个简单的demo为例，阐述three.js的基本配置方法。学完这篇文章，你将学会如何在浏览器中绘制一个立体图形！ 准备工作 在写代码之前，你首先要去下最新的...
three.js.examples:三.js 例子
06-20
本篇文章将深入剖析“three.js.examples”这一资源，帮助你掌握Three.js的基础和高级应用。 一、Three.js入门基础 Three.js库的核心理念是提供一个易于使用的接口，用于在浏览器中创建和操纵3D对象。其基本元素包括...
Three.js 基础入门--第13课：进阶篇之 Three.js 场景交互
liuhao9999的博客
04-11 376
浏览器是一个 2D 视口，而 Three.js 展示的是 3D 场景。场景交互时，需要在二维平面中控制三维场景的模型，那如何将 2D 视口的 x 和 y 坐标转换成 Three.js 场景中的 3D 坐标呢？好在 Three.js 已经有了解决相关问题的方案，那就是射线，用于鼠标拾取（计算出鼠标移过的三维空间中的对象）等。我们看下面这张图片：我们一般都会设置三维场景的显示区域，如果指明当前显示的 2D 坐标给，它将生成一条从显示起点到终点的射线，也就是射线与近视面交点和射线与远视面交点连成的这一条直线。
Three.js入门指南-中文基础教程
12-25
适合初学者 three.js webgl three.js入门 three.js教程 webgl开发
three.js 入门指南
weixin_38399829的博客
11-11 242
three.js 入门指南
three.js 入门 初识
killerdoubie的博客
09-15 201
75是相机的投影物体的张角；是照相机水平方向和竖直方向长度的比值；0.1照相机到视景体最近的距离；1000照相机到视景体最远的距离；
threeJs 入门篇
热门推荐
好川的博客
08-08 1万+
1.什么是threeJs 简单的说 ，就是一门 绘制 3D 的 javaScript 轻量级框架； 主要采用 ，HTML5 Canvas提供硬件3D加速渲染； 于是web 端 ，就能制作出 3D 系统 ，访问就能操作 ，十分方便。 文章目录1.什么是threeJsⅠ.为什么要学这门前沿技术Ⅱ.应用场景2. 学习Three .js 入门篇 （一）Ⅰ.安装下载Ⅱ. 创建场景、摄像机、渲染器（画布）Ⅲ. 创建坐标系Ⅳ.平面、立方体、球 的创建Ⅴ. 光源的创建Ⅵ.添加投影Ⅶ.鼠标操控三维场景3. 整合代码 Ⅰ
Three.js入门-介绍及创建场景
lijincheng2022的博客
02-02 886
这一章通过对Three.js基础组件的讲解，让读者掌握Three.js中场景、相机和渲染器的概念，并以样例代码讲解如何创建一个场景，实现快速入门
ThreeJS快速入门指南
dfc_dfc的博客
01-22 2292
ThreeJs快速入门指南
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值