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

threejs学习day02

news 2025/7/3 14:16:09

场景、相机、渲染器

一、创建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()

http://www.dtcms.com/a/160408.html

相关文章：

  • 图解模型并行框架
  • 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 对数据进行正序排列
  • 仿微信上传头像，实现拍摄、相册选择、手动缩放、裁剪、蒙版、撤回、还原、上传微信本地文件功能
  • 使用Open Compass进行模型评估，完成AI模型选择
  • DeepSeek接入企业知识库，如何识别手写文档与扫描件？
  • pikachu靶场-敏感信息泄露
  • mac 设置飞书默认浏览器（解决系统设置默认浏览器无效）
  • 土壤有机质含量
  • 使用 Doxygen 生成类似官网的专业文档
  • ESP32-S3 入门学习笔记（四）：LED实验
  • 数据库查询艺术：从单表操作到多表联查的全面指南
  • C语言(3)—分支和循环