3.js - 材质组

今天小雪，二十四节气之一

案例1

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

const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 0, 10)
camera.lookAt(0, 0, 0)

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

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.dampingFactor = 0.01

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

const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

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

const geometry = new THREE.BufferGeometry()

// 创建顶点数据，顶点是有序的，每3个数据确定一个顶点，逆时针为正面
const vertices = new Float32Array([-1.0, -1.0, 0,   1.0, -1.0, 0,   1.0, 1.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))

`【创建顶点组】`
`从，索引数组indices下标为0(参数1)的位置开始，包含3(参数2)个顶点，用的是第一个(参数3：0的意思是下标0，即：第一个)材质`
geometry.addGroup(0, 3, 0) 
`从，索引数组indices下标为3(参数1)的位置开始，包含3(参数2)个顶点，用的是第二个(参数3：1的意思是下标1，即：第二个)材质`
geometry.addGroup(3, 3, 1) 

const material = new THREE.MeshBasicMaterial({ color: 0x31f609 })
const material_1 = new THREE.MeshBasicMaterial({ color: 0xe2100f })

const plane = new THREE.Mesh(geometry, [material, material_1])
scence.add(plane)

---

---

---

案例2

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

const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 0, 10)
camera.lookAt(0, 0, 0)

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

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.dampingFactor = 0.01

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

const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

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

const geometry = new THREE.BoxGeometry(1, 1, 1)

const material_1 = new THREE.MeshBasicMaterial({
	color: 0x31f609
})
const material_2 = new THREE.MeshBasicMaterial({
	color: 0xf63911
})
const material_3 = new THREE.MeshBasicMaterial({
	color: 0xf3f724
})
const material_4 = new THREE.MeshBasicMaterial({
	color: 0x69f3fa
})
const material_5 = new THREE.MeshBasicMaterial({
	color: 0x1b08db
})
const material_6 = new THREE.MeshBasicMaterial({
	color: 0xfa80e9
})

'6个面颜色不同的立方体'
const cube = new THREE.Mesh(geometry, [material_1,  material_2, material_3, material_4, material_5, material_6])

scence.add(cube)