3.js - 裁剪场景（多个scence）

不给newScence添加background、environment时

在这里插入图片描述

给newScence添加background、environment时

在这里插入图片描述

源码

// @ts-nocheck

// 引入three.js
import * as THREE from 'three'

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

// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'

// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'

// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

// 导入draco解码器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

//#region
const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 5) // 设置相机位置
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer({
  antialias: true // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//#endregion

//#region
// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05

//#endregion

// --------------------------------------------------------------
// --------------------------------------------------------------

let rgbeLoader = new RGBELoader()
rgbeLoader.load('../public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', envMap => {
  envMap.mapping = THREE.EquirectangularRefractionMapping
  `第一个场景`
  scence.background = envMap
  scence.environment = envMap
  `第二个场景`【可以注掉newScence的background、environment试试，newScence的背景就成了黑色的了】
  newScence.background = envMap
  newScence.environment = envMap
})

`创建环形结的几何体`
new THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments)
	radius：环形（Torus）的半径，即：环形中心到环形表面的距离；这个值越大，环形就越大。
	tube(管半径): 环形上的管道的半径，这个值决定了环形表面的厚度。
	radialSegments(径向分段数)：环形沿着其半径的分段数。这个值越大，环形的边缘就越平滑。
	tubularSegments(管分段数)：管道沿着其长度的分段数。这个值也影响表面的平滑度，但它是沿着环形的周长方向。

const geometry = new THREE.TorusKnotGeometry(5, 1, 100, 16)
const material = new THREE.MeshPhysicalMaterial({
  side: THREE.DoubleSide
})
const torusKnot = new THREE.Mesh(geometry, material)
scence.add(torusKnot)

// 创建场景
const newScence = new THREE.Scene()
const geometry_1 = new THREE.TorusKnotGeometry(5, 1, 100, 16)
const material_1 = new THREE.MeshBasicMaterial({
  wireframe: true
})
const torusKnot_1 = new THREE.Mesh(geometry_1, material_1)
newScence.add(torusKnot_1)

let params = {
  scissorWidth: window.innerWidth / 2
}

// 每一帧根据控制器更新画面
function animate() {
  // 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`
  controls.update()
  // `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染
  requestAnimationFrame(animate)

  // 渲染
  `启用或禁用裁剪检测，若启用，则，只有在裁剪区域的像色才会受影响`
  renderer.setScissorTest(true)
  
  `
    设置裁剪区域
      0,0：代表的是，裁剪区域的左上角坐标，这意着裁剪区域的起点与渲染目标（通常是canvas）的左上角对齐。
      params.scissorWidth：是裁剪区域的宽度，它决定了裁剪区域在水平方向上的大小。
      window.innerHeight：是裁剪区域的高度，这里使用浏览器窗口的内部高度。
                          意味着，裁剪区域的高度将随浏览器窗口高度的变化而变化，
                          这样能确保，渲染内容能够覆盖整个视窗的垂直高度。
  `
  renderer.setScissor(0, 0, params.scissorWidth, window.innerHeight)
  renderer.render(scence, camera)

  renderer.setScissor(params.scissorWidth, 0, window.innerWidth - params.scissorWidth, window.innerHeight)
  renderer.render(newScence, camera)
  
  renderer.setScissorTest(false)

  // 更新tween
  TWEEN.update()
}
animate()

const gui = new GUI()
gui.add(params, 'scissorWidth', 0, window.innerWidth)