几何体划分顶点组设置不同材质

代码

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)

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

const cubegeometry = new THREE.BoxGeometry(1, 1, 1)
const cubematerial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }) // 绿色
const cubematerial2 = new THREE.MeshBasicMaterial({ color: 0xff0000 }) // 红色
const cubematerial3 = new THREE.MeshBasicMaterial({ color: 0x0000ff }) // 蓝色
const cubematerial4 = new THREE.MeshBasicMaterial({ color: 0xffff00 }) // 黄色
const cubematerial5 = new THREE.MeshBasicMaterial({ color: 0x00ffff }) // 浅蓝
const cubematerial6 = new THREE.MeshBasicMaterial({ color: 0xff00ff }) // 紫色

const cube = new THREE.Mesh(
  cubegeometry,
  [cubematerial,
   cubematerial2,
   cubematerial3,
   cubematerial4,
   cubematerial5,
   cubematerial6
  ]
)

cube.position.x = 2

scene.add(cube)

const geometry = new THREE.BufferGeometry()


const vertices = new Float32Array([
  -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0
])

geometry.setAttribute(
  'position',
  new THREE.BufferAttribute(vertices, 3),
)

const indices = new Uint16Array([0, 1, 2, 2, 3, 0])

geometry.setIndex(new THREE.BufferAttribute(indices, 1))

// 设置2个顶点组：形成2个材质
geometry.addGroup(0, 3, 0);
geometry.addGroup(3, 3, 1);

// 创建材质：绿色材质
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  // side: THREE.DoubleSide, // 双面显示
  wireframe: true, // 线框模式
})

// 红色材质
const material1 = new THREE.MeshBasicMaterial({
  color: 0xff0000,
})

const plane = new THREE.Mesh(geometry, [material, material1])

scene.add(plane)

camera.position.z = 5;
camera.position.y = 2;
camera.position.x = 2;
camera.lookAt(0, 0, 0)


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


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

controls.enableDamping = true;

controls.dampingFactor = 0.05;

function animate() {
  requestAnimationFrame(animate)
  controls.update()
  renderer.render(scene, camera)
}

animate()

window.addEventListener('resize', () => {

  renderer.setSize(window.innerWidth, innerHeight)

  camera.aspect = window.innerWidth / window.innerHeight

  camera.updateProjectionMatrix()
})

let eventObj = {
  Fullscreen: function () {
    document.body.requestFullscreen()
  },
  ExitFullscreen: function () {
    document.exitFullscreen()
  }
}

// 创建GUI
const gui = new GUI()
// 添加按钮
gui.add(eventObj, 'Fullscreen').name('全屏')
gui.add(eventObj, 'ExitFullscreen').name('退出全屏')