当前位置： 首页 > news >正文

threejs学习day02

news 来源：原创 2025/4/28 11:41:26

场景、相机、渲染器

一、创建3D场景

// 引入threejs
import * as THREE from 'three'// 创建一个三维场景scene
const scene = new THREE.Scene();// 给三维场景添加物品
const geometry = new THREE.BoxGeometry(100,100,100)   // 形状
const meterial = new THREE.MeshBasicMaterial({color:0x00ff00})   // 材质const mesh = new THREE.Mesh(geometry, meterial)  // 网格模型(形状，材质)
mesh.position.set(0,10,0)  // 网格模型的位置scene.add(mesh)
// console.log(scene)

二、透视投影相机

// 引入threejs
import * as THREE from 'three'// 创建一个三维场景scene
const scene = new THREE.Scene();// 给三维场景添加物品
const geometry = new THREE.BoxGeometry(100,100,100)   // 形状
const meterial = new THREE.MeshBasicMaterial({color:0x00ff00})   // 材质const mesh = new THREE.Mesh(geometry, meterial)  // 网格模型(形状，材质)
mesh.position.set(0,10,0)  // 网格模型的位置scene.add(mesh)
// console.log(scene)// 定义相机输出画布的尺寸（单位：像素px）
const width = 800
const height = 500// 创建一个透视图投影相机对象
const camera = new THREE.PerspectiveCamera(30,width/height, 0.1,2000)  // 视野角度、宽高比、近端面、远端面
camera.position.set(200,200,200)  // 设置相机位置// 相机的视线，观察目标点的坐标
// camera.lookAt(0,0,0) 
// camera.lookAt(0,10,0)  // y轴上一点
camera.lookAt(mesh.position)  // 指向网格模型mesh

三、渲染

// 引入threejs
import * as THREE from 'three'// 创建一个三维场景scene
const scene = new THREE.Scene();// 给三维场景添加物品
const geometry = new THREE.BoxGeometry(50,50,50)   // 形状
const meterial = new THREE.MeshBasicMaterial({color:0x00ff00})   // 材质const mesh = new THREE.Mesh(geometry, meterial)  // 网格模型(形状，材质)
mesh.position.set(0,10,0)  // 网格模型的位置scene.add(mesh)
// console.log(scene)// 定义相机输出画布的尺寸（单位：像素px）
const width = 800
const height = 500// 创建一个透视图投影相机对象
const camera = new THREE.PerspectiveCamera(30,width/height, 0.1,2000)  // 视野角度、宽高比、近端面、远端面
camera.position.set(200,200,200)  // 设置相机位置// 相机的视线，观察目标点的坐标
// camera.lookAt(0,0,0) 
// camera.lookAt(0,10,0)  // y轴上一点
camera.lookAt(mesh.position)  // 指向网格模型mesh// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height)   // canvas画布的宽度和高度
renderer.render(scene, camera)  // 拍照；执行一个渲染操作// 把渲染结果，添加到网页页面上
document.body.appendChild(renderer.domElement)

四、结果展示

五、三维坐标系

显示x，y，z三个坐标轴

六、光源对物体表面的影响

// 引入threejs
import * as THREE from 'three'// 创建一个三维场景scene
const scene = new THREE.Scene();// 给三维场景添加物品
const geometry = new THREE.BoxGeometry(50,50,50)   // 形状
const meterial = new THREE.MeshLambertMaterial({  // 受光源影响的；→设置光照color:0x00ff00,  // 设置材质颜色transparent:true,  // 开启透明opacity:0.5  // 设置透明度
})   // 设置光源对象  
const pointLight = new THREE.PointLight(0xffffff, 1,0)   // 光源强度、颜色
// pointLight.intensity = 10   // 光源强度
pointLight.decay = 0.0   // 不随着距离的改变而衰减光源
// pointLight.position.set(400,0,0) // 光源设置在x轴上
pointLight.position.set(400,50,200)  // 光源位置设置
scene.add(pointLight)  // 光源添加到场景中const mesh = new THREE.Mesh(geometry, meterial)  // 网格模型(形状，材质)
mesh.position.set(0,0,0)  // 网格模型的位置  x,y,zscene.add(mesh)
// console.log(scene)// 创建一个三维坐标轴
const axesHelper = new THREE.AxesHelper(100)
scene.add(axesHelper)   // 将坐标对象，添加到三维场景中// 定义相机输出画布的尺寸（单位：像素px）
const width = 800
const height = 500// 创建一个透视图投影相机对象
const camera = new THREE.PerspectiveCamera(30,width/height, 0.1,2000)  // 视野角度、宽高比、近端面、远端面
camera.position.set(200,200,200)  // 设置相机位置
// camera.position.set(-1000,0,0)// 相机的视线，观察目标点的坐标
camera.lookAt(0,0,0)   // 指向坐标原点
// camera.lookAt(0,10,0)  // y轴上一点
// camera.lookAt(mesh.position)  // 指向网格模型mesh// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height)   // canvas画布的宽度和高度
renderer.render(scene, camera)  // 拍照；执行一个渲染操作// 把渲染结果，添加到网页页面上
document.body.appendChild(renderer.domElement)

七、相机轨道控件

// 引入threejs
import * as THREE from 'three'
// 引入轨道控制器扩展库
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'// 创建一个三维场景scene
const scene = new THREE.Scene();// 给三维场景添加物品
const geometry = new THREE.BoxGeometry(50,50,50)   // 形状
const meterial = new THREE.MeshLambertMaterial({  // 受光源影响的；→设置光照color:0x00ff00,  // 设置材质颜色transparent:true,  // 开启透明opacity:0.5  // 设置透明度
})   // 设置光源对象  
const pointLight = new THREE.PointLight(0xffffff, 1,0)   // 光源强度、颜色
// pointLight.intensity = 10   // 光源强度
pointLight.decay = 0.0   // 不随着距离的改变而衰减光源
// pointLight.position.set(400,0,0) // 光源设置在x轴上
pointLight.position.set(400,50,200)  // 光源位置设置
scene.add(pointLight)  // 光源添加到场景中const mesh = new THREE.Mesh(geometry, meterial)  // 网格模型(形状，材质)
mesh.position.set(0,0,0)  // 网格模型的位置  x,y,zscene.add(mesh)
// console.log(scene)// 创建一个三维坐标轴
const axesHelper = new THREE.AxesHelper(100)
scene.add(axesHelper)   // 将坐标对象，添加到三维场景中// 定义相机输出画布的尺寸（单位：像素px）
const width = 800
const height = 500// 创建一个透视图投影相机对象
const camera = new THREE.PerspectiveCamera(30,width/height, 0.1,2000)  // 视野角度、宽高比、近端面、远端面
camera.position.set(200,200,200)  // 设置相机位置
// camera.position.set(-1000,0,0)// 相机的视线，观察目标点的坐标
camera.lookAt(0,0,0)   // 指向坐标原点
// camera.lookAt(0,10,0)  // y轴上一点
// camera.lookAt(mesh.position)  // 指向网格模型mesh// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height)   // canvas画布的宽度和高度
renderer.render(scene, camera)  // 拍照；执行一个渲染操作// 把渲染结果，添加到网页页面上
document.body.appendChild(renderer.domElement)// 设置相机空间轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)   // 参数：相机  参数2：监控范围
controls.addEventListener('change',function(){renderer.render(scene, camera)  // 执行渲染操作
})

八、光源

// 引入threejs
import * as THREE from 'three'
// 引入轨道控制器扩展库
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'// 创建一个三维场景scene
const scene = new THREE.Scene();// 给三维场景添加物品
const geometry = new THREE.BoxGeometry(100,100,100)   // 形状
const meterial = new THREE.MeshLambertMaterial({  // 受光源影响的；→设置光照color:0x00ff00,  // 设置材质颜色transparent:true,  // 开启透明opacity:0.5  // 设置透明度
})   /*** 光源设置*/
// 设置光源对象  
const pointLight = new THREE.PointLight(0xffffff, 1,0)   // 光源强度、颜色
// pointLight.intensity = 10   // 光源强度
pointLight.decay = 0.0   // 不随着距离的改变而衰减光源
// pointLight.position.set(400,0,0) // 光源设置在x轴上
pointLight.position.set(400,50,200)  // 光源位置设置
scene.add(pointLight)  // 光源添加到场景中/*** 可视化点光源* */
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10)
scene.add(pointLightHelper)/**** 添加环境光*/
const ambient = new THREE.AmbientLight(0xffffff, 0.4)
scene.add(ambient)/*** 添加一个平行光*/
const directionLight = new THREE.DirectionalLight(0xffffff, 1.0)
directionLight.position.set(50,100,60)  // 平行线光源位置
// directionLight.target = mesh;  // 目标光源位置   ，（不设置，默认是坐标原点）
scene.add(directionLight)const mesh = new THREE.Mesh(geometry, meterial)  // 网格模型(形状，材质)
mesh.position.set(0,0,0)  // 网格模型的位置  x,y,zscene.add(mesh)
// console.log(scene)// 创建一个三维坐标轴
const axesHelper = new THREE.AxesHelper(100)
scene.add(axesHelper)   // 将坐标对象，添加到三维场景中// 定义相机输出画布的尺寸（单位：像素px）
const width = 800
const height = 500// 创建一个透视图投影相机对象
const camera = new THREE.PerspectiveCamera(30,width/height, 0.1,2000)  // 视野角度、宽高比、近端面、远端面
camera.position.set(200,200,200)  // 设置相机位置
// camera.position.set(-1000,0,0)// 相机的视线，观察目标点的坐标
camera.lookAt(0,0,0)   // 指向坐标原点
// camera.lookAt(0,10,0)  // y轴上一点
// camera.lookAt(mesh.position)  // 指向网格模型mesh// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height)   // canvas画布的宽度和高度
renderer.render(scene, camera)  // 拍照；执行一个渲染操作// 把渲染结果，添加到网页页面上
document.body.appendChild(renderer.domElement)// 设置相机空间轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)   // 参数：相机  参数2：监控范围
controls.addEventListener('change',function(){renderer.render(scene, camera)  // 执行渲染操作
})

九、动画渲染 循环

// 引入threejs
import * as THREE from 'three'
// 引入轨道控制器扩展库
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'// 创建一个三维场景scene
const scene = new THREE.Scene();// 给三维场景添加物品
const geometry = new THREE.BoxGeometry(100,100,100)   // 形状
const meterial = new THREE.MeshLambertMaterial({  // 受光源影响的；→设置光照color:0x00ff00,  // 设置材质颜色transparent:true,  // 开启透明opacity:0.5  // 设置透明度
})   /*** 光源设置*/
// 设置光源对象  
const pointLight = new THREE.PointLight(0xffffff, 1,0)   // 光源强度、颜色
// pointLight.intensity = 10   // 光源强度
pointLight.decay = 0.0   // 不随着距离的改变而衰减光源
// pointLight.position.set(400,0,0) // 光源设置在x轴上
pointLight.position.set(400,50,200)  // 光源位置设置
scene.add(pointLight)  // 光源添加到场景中/*** 可视化点光源* */
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10)
scene.add(pointLightHelper)/**** 添加环境光*/
const ambient = new THREE.AmbientLight(0xffffff, 0.4)
scene.add(ambient)/*** 添加一个平行光*/
const directionLight = new THREE.DirectionalLight(0xffffff, 1.0)
directionLight.position.set(50,100,60)  // 平行线光源位置
// directionLight.target = mesh;  // 目标光源位置   ，（不设置，默认是坐标原点）
scene.add(directionLight)const mesh = new THREE.Mesh(geometry, meterial)  // 网格模型(形状，材质)
mesh.position.set(0,0,0)  // 网格模型的位置  x,y,zscene.add(mesh)
// console.log(scene)// 创建一个三维坐标轴
const axesHelper = new THREE.AxesHelper(100)
scene.add(axesHelper)   // 将坐标对象，添加到三维场景中// 定义相机输出画布的尺寸（单位：像素px）
const width = 800
const height = 500// 创建一个透视图投影相机对象
const camera = new THREE.PerspectiveCamera(30,width/height, 0.1,2000)  // 视野角度、宽高比、近端面、远端面
camera.position.set(200,200,200)  // 设置相机位置
// camera.position.set(-1000,0,0)// 相机的视线，观察目标点的坐标
camera.lookAt(0,0,0)   // 指向坐标原点
// camera.lookAt(0,10,0)  // y轴上一点
// camera.lookAt(mesh.position)  // 指向网格模型mesh// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height)   // canvas画布的宽度和高度
// renderer.render(scene, camera)  // 拍照；执行一个渲染操作// 把渲染结果，添加到网页页面上
document.body.appendChild(renderer.domElement)// 设置相机空间轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)   // 参数：相机  参数2：监控范围
controls.addEventListener('change',function(){renderer.render(scene, camera)  // 执行渲染操作
})// 周期性执行，默认理想状态下 （渲染循环）
function render(){mesh.rotateY(0.01)  // 周期性旋转，每次旋转一定度数renderer.render(scene, camera)  // 周期性执行相机的渲染功能，更新canvas画布上的内容requestAnimationFrame(render);  // 默认每秒调用60次 
}
render()

十、canvas画布布局和全屏

// 引入threejs
import * as THREE from 'three'
// 引入轨道控制器扩展库
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'// 创建一个三维场景scene
const scene = new THREE.Scene();// 给三维场景添加物品
const geometry = new THREE.BoxGeometry(100,100,100)   // 形状
const meterial = new THREE.MeshLambertMaterial({  // 受光源影响的；→设置光照color:0x00ff00,  // 设置材质颜色transparent:true,  // 开启透明opacity:0.5  // 设置透明度
})   /*** 光源设置*/
// 设置光源对象  
const pointLight = new THREE.PointLight(0xffffff, 1,0)   // 光源强度、颜色
// pointLight.intensity = 10   // 光源强度
pointLight.decay = 0.0   // 不随着距离的改变而衰减光源
// pointLight.position.set(400,0,0) // 光源设置在x轴上
pointLight.position.set(400,50,200)  // 光源位置设置
scene.add(pointLight)  // 光源添加到场景中/*** 可视化点光源* */
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10)
scene.add(pointLightHelper)/**** 添加环境光*/
const ambient = new THREE.AmbientLight(0xffffff, 0.4)
scene.add(ambient)/*** 添加一个平行光*/
const directionLight = new THREE.DirectionalLight(0xffffff, 1.0)
directionLight.position.set(50,100,60)  // 平行线光源位置
// directionLight.target = mesh;  // 目标光源位置   ，（不设置，默认是坐标原点）
scene.add(directionLight)const mesh = new THREE.Mesh(geometry, meterial)  // 网格模型(形状，材质)
mesh.position.set(0,0,0)  // 网格模型的位置  x,y,zscene.add(mesh)
// console.log(scene)// 创建一个三维坐标轴
const axesHelper = new THREE.AxesHelper(100)
scene.add(axesHelper)   // 将坐标对象，添加到三维场景中// 定义相机输出画布的尺寸（单位：像素px）
const width = window.innerWidth
const height = window.innerHeight// 浏览器窗口被调整
window.onresize = function(){// 重置渲染器输出画布canvas尺寸renderer.setSize(window.innerWidth, window.innerHeight)// 全屏情况下，设置宽高比camera.aspect = window.innerWidth / window.innerHeight // 更新投影矩阵camera.updateProjectionMatrix()
}// 创建一个透视图投影相机对象
const camera = new THREE.PerspectiveCamera(30,width/height, 0.1,2000)  // 视野角度、宽高比、近端面、远端面
camera.position.set(200,200,200)  // 设置相机位置
// camera.position.set(-1000,0,0)// 相机的视线，观察目标点的坐标
camera.lookAt(0,0,0)   // 指向坐标原点
// camera.lookAt(0,10,0)  // y轴上一点
// camera.lookAt(mesh.position)  // 指向网格模型mesh// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height)   // canvas画布的宽度和高度
// renderer.render(scene, camera)  // 拍照；执行一个渲染操作// 把渲染结果，添加到网页页面上
document.body.appendChild(renderer.domElement)// 设置相机空间轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)   // 参数：相机  参数2：监控范围
controls.addEventListener('change',function(){renderer.render(scene, camera)  // 执行渲染操作
})// 周期性执行，默认理想状态下 （渲染循环）
function render(){mesh.rotateY(0.01)  // 周期性旋转，每次旋转一定度数renderer.render(scene, camera)  // 周期性执行相机的渲染功能，更新canvas画布上的内容requestAnimationFrame(render);  // 默认每秒调用60次 
}
render()

十一、Stats查看渲染帧率

// 引入threejs
import * as THREE from 'three'
// 引入轨道控制器扩展库
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'
// 引入Stats性能监视器
import Stats from 'three/addons/libs/stats.module.js'
// 创建stats对象
const stats = new Stats()
document.body.appendChild(stats.domElement)  // stats.domElement： web页面上输出计算结果，一个div元素// 创建一个三维场景scene
const scene = new THREE.Scene();// 给三维场景添加物品
const geometry = new THREE.BoxGeometry(100,100,100)   // 形状
const meterial = new THREE.MeshLambertMaterial({  // 受光源影响的；→设置光照color:0x00ff00,  // 设置材质颜色transparent:true,  // 开启透明opacity:0.5  // 设置透明度
})   /*** 光源设置*/
// 设置光源对象  
const pointLight = new THREE.PointLight(0xffffff, 1,0)   // 光源强度、颜色
// pointLight.intensity = 10   // 光源强度
pointLight.decay = 0.0   // 不随着距离的改变而衰减光源
// pointLight.position.set(400,0,0) // 光源设置在x轴上
pointLight.position.set(400,50,200)  // 光源位置设置
scene.add(pointLight)  // 光源添加到场景中/*** 可视化点光源* */
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10)
scene.add(pointLightHelper)/**** 添加环境光*/
const ambient = new THREE.AmbientLight(0xffffff, 0.4)
scene.add(ambient)/*** 添加一个平行光*/
const directionLight = new THREE.DirectionalLight(0xffffff, 1.0)
directionLight.position.set(50,100,60)  // 平行线光源位置
// directionLight.target = mesh;  // 目标光源位置   ，（不设置，默认是坐标原点）
scene.add(directionLight)const mesh = new THREE.Mesh(geometry, meterial)  // 网格模型(形状，材质)
mesh.position.set(0,0,0)  // 网格模型的位置  x,y,zscene.add(mesh)
// console.log(scene)// 创建一个三维坐标轴
const axesHelper = new THREE.AxesHelper(100)
scene.add(axesHelper)   // 将坐标对象，添加到三维场景中// 定义相机输出画布的尺寸（单位：像素px）
const width = window.innerWidth
const height = window.innerHeight// 浏览器窗口被调整
window.onresize = function(){// 重置渲染器输出画布canvas尺寸renderer.setSize(window.innerWidth, window.innerHeight)// 全屏情况下，设置宽高比camera.aspect = window.innerWidth / window.innerHeight // 更新投影矩阵camera.updateProjectionMatrix()
}// 创建一个透视图投影相机对象
const camera = new THREE.PerspectiveCamera(30,width/height, 0.1,2000)  // 视野角度、宽高比、近端面、远端面
camera.position.set(200,200,200)  // 设置相机位置
// camera.position.set(-1000,0,0)// 相机的视线，观察目标点的坐标
camera.lookAt(0,0,0)   // 指向坐标原点
// camera.lookAt(0,10,0)  // y轴上一点
// camera.lookAt(mesh.position)  // 指向网格模型mesh// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height)   // canvas画布的宽度和高度
// renderer.render(scene, camera)  // 拍照；执行一个渲染操作// 把渲染结果，添加到网页页面上
document.body.appendChild(renderer.domElement)// 设置相机空间轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)   // 参数：相机  参数2：监控范围
controls.addEventListener('change',function(){renderer.render(scene, camera)  // 执行渲染操作
})// 周期性执行，默认理想状态下 （渲染循环）
function render(){// mesh.rotateY(0.01)  // 周期性旋转，每次旋转一定度数stats.update();  // 刷新时间renderer.render(scene, camera)  // 周期性执行相机的渲染功能，更新canvas画布上的内容requestAnimationFrame(render);  // 默认每秒调用60次 
}
render()

相关文章：

  • 图解模型并行框架
  • LTE-M（eMTC）与其他低功耗广域网技术相比有何优势？
  • windows10系统：如何把文件夹里的图片直接显示出来？
  • 安卓的Launcher 在哪个环节进行启动
  • Linux电源管理(2)_常规的电源管理的基本概念和软件架构
  • 影楼精修-皮肤瑕疵祛除算法解析
  • 8.0 西门子PLC的S7通讯解析
  • 前端高频面试题day3
  • 【项目中的流程管理（十）】
  • 深入理解 Linux 用户管理：从基础到实践
  • 基于STM32、HAL库的HX711模数转换器ADC驱动程序设计
  • MIME 类型是个什么东西？
  • setup和hold互卡问题剖析
  • CDA Edit 的设计
  • vscode本地化显示远程图形化界面
  • 生成式人工智能认证（GAI认证）有什么用？
  • 谷歌提示词工程白皮书 第一部分
  • 从零构建云原生秒杀系统——后端架构与实战
  • disruptor-spring-boot-start版本优化升级
  • 【前端】jQuery 对数据进行正序排列
  • QFII一季度现身超300家公司：持有南京银行市值最高，5家青睐立航科技
  • 单位被裁定补缴12年社保，滞纳金该谁出？
  • 证监会发布上市公司信披豁免规定：明确两类豁免范围、规定三种豁免方式
  • 上海2025年普通高等学校招生志愿填报与投档录取实施办法公布
  • 石磊当选河北秦皇岛市市长
  • 高糖高脂食物可能让你 “迷路”