3.js -- 着色器加工材质（基础-1）

---

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

const scene = new THREE.Scene()

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

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

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

const standardMaterial = new THREE.MeshStandardMaterial({
	color: '#52ff00'
})

const basicMaterial = new THREE.MeshBasicMaterial({
	color: '#00ff00',
	side: THREE.DoubleSide
})

const myBasicUniform = {
  uTime: {
    value: 0
  }
}

basicMaterial.onBeforeCompile = (shader, renderer) => {
	// console.log('renderer=', renderer) // 暂时用不着
	// console.log('shader=', shader)
	console.log('shader.vertexShader=', '\n', shader.vertexShader)
	// console.log('shader.fragmentShader=', '\n', shader.fragmentShader)
	
	shader.uniforms.uTime = myBasicUniform.uTime
	shader.vertexShader = shader.vertexShader.replace(
	  '#include <common>',
	  `
	    #include <common>
	    uniform float uTime;
	  `
	)
	
	【这个效果是，floor围绕着y轴旋转】
	shader.vertexShader = shader.vertexShader.replace(
	  '#include <begin_vertex>',
	  `
	    #include <begin_vertex>
	    transformed.x += sin(uTime) * 2.0;
	    transformed.z += cos(uTime) * 2.0;
	  `
	)
	
	【这个效果是，floor围绕着z轴旋转】
	shader.vertexShader = shader.vertexShader.replace(
	  '#include <begin_vertex>',
	  `
	    #include <begin_vertex>
	    transformed.x += sin(uTime) * 2.0;
	    transformed.y += cos(uTime) * 2.0;
	  `
	)
}

const floor = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 64, 64), basicMaterial)
// const floor = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 64, 64), standardMaterial)
scene.add(floor)

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

const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(5, 5, 5)
scene.add(light)

//#region

// 渲染器
const renderer = new THREE.WebGLRenderer()
renderer.toneMapping = THREE.ReinhardToneMapping
renderer.toneMappingExposure = 1
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

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

//
const clock = new THREE.Clock()
const render = () => {
	let elapsedTime = clock.getElapsedTime()
	myBasicUniform.uTime.value = elapsedTime
	
	controls.update()
	requestAnimationFrame(render)
	renderer.render(scene, camera)
}
render()

window.addEventListener('resize', () => {
	// 重置相机的宽高比
	camera.aspect = window.innerWidth / window.innerHeight
	// 更新相机的投影矩阵
	camera.updateProjectionMatrix()
	// 重置渲染器的宽高比
	renderer.setSize(window.innerWidth, window.innerHeight)
	// 更新渲染器的像素比
	renderer.setPixelRatio(window.devicePixelRatio)
})
//#endregion