Three.js

已于 2023-03-29 17:19:11 修改
阅读量441 收藏 1
点赞数
文章标签： javascript 开发语言 ecmascript
于 2023-03-28 21:30:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61927991/article/details/129821989
版权

安装：

npm i three -S

一、渲染第一个场景和物体

import * as THREE from "three";

//目标：了解three.js最基本的内容

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

//2.创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

//3.设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera)

//4.设置物体
//创建几何体
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color:new THREE.Color(0xffff00,1,0)})
//创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
//将几何体添加到场景
scene.add(cube)

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

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

二、轨道控制器查看物体

import * as THREE from "three";

//目标：了解轨道控制器的最基本的内容

//1.导入轨道控制器
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
);
camera.position.set(0, 0, 10);
scene.add(camera)
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color:new THREE.Color(0xffff00,1,0)})
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
scene.add(cube)
const render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(render.domElement);

// render.render(scene,camera)

//2.创建轨道控制器  因为每一帧都要渲染一下，所以书写一个渲染函数
const controls = new OrbitControls(camera,render.domElement)

//3.渲染函数
function renderfun(){
  render.render(scene,camera);
  //渲染下一帧的时候就会调用render函数
  requestAnimationFrame(renderfun)
}

renderfun()

 三、坐标辅助器

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
);
camera.position.set(0, 0, 10);
scene.add(camera)
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color:new THREE.Color(0xffff00,1,0)})
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
scene.add(cube)

//1.创建坐标轴
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

const render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(render.domElement);

const controls = new OrbitControls(camera,render.domElement)

function renderfun(){
  render.render(scene,camera);
  requestAnimationFrame(renderfun)
}

renderfun()

 四、3D物体的移动

import * as THREE from "three";

//目标：3d物体的移动

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
);
camera.position.set(0, 0, 10);
scene.add(camera);
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({
  color: new THREE.Color(0xffff00, 1, 0),
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

//直接设置位置（方法）
// cube.position.set(0,0,5)  设置在z轴5
//直接设置位置X
// cube.position.x = 5

scene.add(cube);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);

const controls = new OrbitControls(camera, render.domElement);

function renderfun() {
  //设置物体在x轴来回移动
  cube.position.x += 0.1;
  if (cube.position.x >= 5) cube.position.x = 0;

  render.render(scene, camera);
  requestAnimationFrame(renderfun);
}

renderfun();

五、物体缩放和旋转

import * as THREE from "three";

//目标：3d物体的移动、缩放、旋转

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
);
camera.position.set(0, 0, 10);
scene.add(camera);
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({
  color: new THREE.Color(0xffff00, 1, 0),
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

//直接设置位置（方法）
// cube.position.set(0,0,5)  设置在z轴5
//直接设置位置X
// cube.position.x = 5

//放大和缩小
// cube.scale.set(1,2,1)
// cube.scale.x = 2

// 旋转
cube.rotation.set(Math.PI / 4 , 0 , 0)

scene.add(cube);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);

const controls = new OrbitControls(camera, render.domElement);

function renderfun() {
  //设置物体在x轴来回移动
  cube.position.x += 0.01
  cube.rotation.x += 0.01
  if (cube.position.x >= 5) cube.position.x = 0

  render.render(scene, camera);
  requestAnimationFrame(renderfun);
}

renderfun();

 六、Gsap动画库的基本使用

安装:

npm i gsap

import * as THREE from "three";

//目标：了解gsap的基本使用
// 1.导入gsap
import gsap from "gsap";

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
);
camera.position.set(0, 0, 10);
scene.add(camera);
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({
  color: new THREE.Color(0xffff00, 1, 0),
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.rotation.set(Math.PI / 4, 0, 0);

scene.add(cube);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);

const controls = new OrbitControls(camera, render.domElement);

//2.设置动画
var animate =  gsap.to(cube.position, { x: 5, duration: 5 ,onComplete:()=>{
  console.log("动画完成");
},onStart:()=>{
  console.log("动画开始");
},
// 无限次循环为-1
repeat:-1,
// 往返运动
yoyo:true,
// 延时运动
delay:2
});

window.addEventListener("click",()=>{
  //暂停
  animate.pause()
})

window.addEventListener("dblclick",()=>{
  //恢复
  animate.resume()
})

function renderfun() {
  render.render(scene, camera);
  requestAnimationFrame(renderfun);
}

renderfun();

 七、实现尺寸变化自适应画面

import * as THREE from "three";

import gsap from "gsap";

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
);
camera.position.set(0, 0, 10);
scene.add(camera);
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({
  color: new THREE.Color(0xffff00, 1, 0),
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.rotation.set(Math.PI / 4, 0, 0);

scene.add(cube);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);

const controls = new OrbitControls(camera, render.domElement);

//设置控制器阻尼，让控制器具有惯性，必须在循环里调用.update()
controls.enableDamping = true

gsap.to(cube.position, { x: 5, duration: 5 ,repeat:-1,yoyo:true,delay:2});

function renderfun() {
  // 在这里调用update()方法
  controls.update()
  render.render(scene, camera);
  requestAnimationFrame(renderfun);
}

renderfun();

//监听画面变化，渲染画面
window.addEventListener("reset",()=>{
  //更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  //更新投影矩阵
  camera.updateProjectionMatrix()
  //跟新渲染器
  render.setSize(window.innerWidth,window.innerHeight)
  //设置渲染像素比
  render.setPixelRatio(window.devicePixelRatio)
})

八、调用js画布全屏退出全屏

import * as THREE from "three";

import gsap from "gsap";

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
);
camera.position.set(0, 0, 10);
scene.add(camera);
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({
  color: new THREE.Color(0xffff00, 1, 0),
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.rotation.set(Math.PI / 4, 0, 0);

scene.add(cube);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);

const controls = new OrbitControls(camera, render.domElement);

controls.enableDamping = true

gsap.to(cube.position, { x: 5, duration: 5 ,repeat:-1,yoyo:true,delay:2});

function renderfun() {
  // 在这里调用update()方法
  controls.update()
  render.render(scene, camera);
  requestAnimationFrame(renderfun);
}

renderfun();

window.addEventListener("reset",()=>{
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  render.setSize(window.innerWidth,window.innerHeight)
  render.setPixelRatio(window.devicePixelRatio)
})

//设置全屏与退出全屏
window.addEventListener("dblclick",()=>{
  if(!document.fullscreenElement){
    // 全屏
    render.domElement.requestFullscreen()
  }else{
    // 退出全屏
    document.exitFullscreen()
  }
})

九、应用图形界面改变变量

安装：

npm i dat.gui -S 

import * as THREE from "three";

import gsap from "gsap";

//导入dat.gui
import * as dat from "dat.gui";

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
);
camera.position.set(0, 0, 10);
scene.add(camera);
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({
  color: new THREE.Color(0xffff00, 1, 0),
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.rotation.set(Math.PI / 4, 0, 0);
scene.add(cube);

//创建gui实例
const gui = new dat.GUI();

//修改x轴位置
gui
  .add(cube.position, "x")
  .min(0)
  .max(5)
  .step(0.01)
  .name("x轴移动")
  .onChange((value) => {
    console.log("值修改了");
  })
  .onFinishChange((value) => {
    console.log("完全修改了，才执行");
  });

//修改物体颜色
const params = {
  color: "#ff0",
  fn: () => {
    //让立方体动起来
    gsap.to(cube.position, { x: 5, duration: 5 ,repeat:-1,yoyo:true,delay:2});
  },
};
gui.addColor(params, "color").onChange((value) => {
  console.log(value);
  cube.material.color.set(value);
});

var folder = gui.addFolder("设置立方体")
folder.add(cube.material,"wireframe")

//是否显示
gui.add(cube, "visible").name("是否显示");

//设置触发某个函数
gui.add(params,"fn").name("是否开启动画");

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);

const controls = new OrbitControls(camera, render.domElement);

controls.enableDamping = true;

function renderfun() {
  controls.update();
  render.render(scene, camera);
  requestAnimationFrame(renderfun);
}

renderfun();

window.addEventListener("reset", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  render.setSize(window.innerWidth, window.innerHeight);
  render.setPixelRatio(window.devicePixelRatio);
});

window.addEventListener("dblclick", () => {
  if (!document.fullscreenElement) {
    render.domElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

 十、集合体法相——UV--顶点算法

代码界小菜鸟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Three.js 笔记
王扬扬的博客
07-03 251
1、三大组建在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。var scene = new THREE.Scene(); // 场景 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window....
三维模型-three.js-PCD模型文件，用于three.js显示pcd文件
07-25
在三维可视化领域，Three.js是一个非常流行的JavaScript库，它允许开发者在Web浏览器中创建和展示复杂的3D模型。本资源是关于使用Three.js处理PCD（Point Cloud Data）模型文件的，这是一种常见的3D点云数据格式。在...
three.js 入门 初识
killerdoubie的博客
09-15 164
75是相机的投影物体的张角；是照相机水平方向和竖直方向长度的比值；0.1照相机到视景体最近的距离；1000照相机到视景体最远的距离；
three.js学习(一)
zhoulib__的博客
04-13 1856
这里是使用vite创建的项目，所以可以直接使用import引入 1、安装three.js npm i three 2、引入three import * as THREE from 'three' 3、three使用时的逻辑 three是通过canvas这个标签调用webgl的一些方法 使用three.js时要知道场景、灯光、骨架、材质、摄像头 场景中包含灯光和物体 物体由骨架和材质组成 灯光决定了物体在场景中表现的形式（比如投影方向之类的） 摄像头就相当于观察场景的眼睛，不然光有场景没眼看的话不就啥都看
threejs导入import报错
最新发布
helloyangkl的博客
06-14 223
【代码】threejs导入import报错。
three.js 颜色color的几种设置方式
helloyangkl的博客
02-11 8058
three.js 颜色color的几种设置方式
Three.js - THREE.Color颜色对象详解 （方法介绍）
jdk137的专栏
03-14 6961
转载来源： http://www.hangge.com/blog/cache/detail_1808.html 1，基本介绍 （1）在 Three.js 中，使用 THREE.Color 对象来表示颜色。 （2）在构造 Color 对象时，可以使用十六进制字符串（"#c0c0c0"）或者十六进制值（0xc0c0c0）来指定颜色，还可以使用 RGB 颜色值（0.3,0.5,0.6）。 ...
three.js添加3d模型
xi1213的博客
03-03 9136
three官方的几何体也就那么几个，想要生成各种各样的模型，其难度十分之大，这时引入外部模型也不失为一种选择。具体引入办法如下。 初始化场景 this.scene = new THREE.Scene(); //新建场景 let width = window.innerWidth; //窗口宽度 let height = window.innerHeight; //窗口高度 let k = width / height; //窗口宽高比 this.c
Three.js - THREE.Color颜色对象详解 （方法介绍）
热门推荐
dxyzhbb的博客
07-02 1万+
1，基本介绍 （1）在 Three.js 中，使用 THREE.Color 对象来表示颜色。 （2）在构造 Color 对象时，可以使用十六进制字符串（"#c0c0c0"）或者十六进制值（0xc0c0c0）来指定颜色，还可以使用 RGB 颜色值（0.3,0.5,0.6）。 //推荐使用十六进制值 new THREE.Color(0x00000, 1.0) 2，THREE.Color 对象的方法 ...
Three.js渲染GeoJSON.zip
07-13
在IT领域，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。它利用WebGL技术，使得开发者可以构建丰富的交互式三维场景。本项目“Three.js渲染GeoJSON”聚焦于如何使用Three.js将地理数据...
three.js. 3D机房项目
09-06
【描述】"使用three.js开发的3D机房项目"意味着项目的核心是three.js，这是一个开源的JavaScript库，专门用于创建和展示3D计算机图形。通过这个项目，开发者可以构建交互式的、高细节度的机房模型，包括服务器、空调...
Three.js + Mapbox 实现泛光效果
04-13
Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + ...
three.js的室内地图展示
05-21
three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得更加简单。通过这个项目，我们可以学习到以下几个关键知识点： 1. **WebGL基础**：WebGL是一种在浏览器中渲染3D图形的标准，它是OpenGL的一...
three.js 智慧城市模型
07-06
Three.js 是一款基于 WebGL 的 JavaScript 库，用于在浏览器中创建三维图形和动画，它在构建智慧城市模型中扮演了核心角色。本文将深入探讨如何利用 three.js 来创建智慧城市的虚拟表示，并介绍与之相关的技术知识点...
Three.js实战常用技巧
04-27
分享课程——Three.js实战常用技巧视频教程，课程一共12章，140多节，结合了很多实战案例，课程主要针对three.js实际开发中常用的一些技巧进行讲解，提供有配套的源码和文档资料下载！希望对那些想提升Three.js技能...
three. js的人体解剖图.zip
07-14
Three.js 是一个基于 WebGL 的 JavaScript 库，它为Web开发人员提供了一个在浏览器中创建3D图形的强大工具。这个“three.js的人体解剖图”压缩包，很显然是一个利用Three.js库来展示人体结构的3D可视化项目。下面...
threejs 学习三
weixin_45730243的博客
02-06 429
BufferGeometry ：是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。MeshBasicMaterial：基础网格材质。一个以简单着色（平面或线框）方式来绘制几何体的材质。这种材质不受光照的影响。textureLoader：纹理加载器 可设置纹理的偏移、旋转、重复等。
three.js 实现简单立方体
刘振兴的博客
10-23 1852
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个three.js文件_WebGL三维场景</title> <style> body { marg
threejs 学习四
weixin_45730243的博客
02-07 703
threejs 学习四

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值