threejs学习day02

场景、相机、渲染器

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