網(wǎng)站 www ftp功能fifa最新世界排名
效果:旋轉(zhuǎn)的彩色立方體
效果描述:
- 一個立方體在場景中旋轉(zhuǎn)。
- 立方體的每個面有不同的顏色。
- 使用自定義著色器為立方體添加動態(tài)的光影效果。
代碼實現(xiàn)
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';// 獲取容器元素
const box = document.getElementById('box');// 創(chuàng)建場景、相機和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 1000);
camera.position.set(5, 5, 5);
camera.lookAt(0, 0, 0);const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(box.clientWidth, box.clientHeight);
box.appendChild(renderer.domElement);// 添加軌道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;// 創(chuàng)建立方體幾何體
const geometry = new THREE.BoxGeometry(2, 2, 2);// 定義著色器 uniforms
const uniforms = {time: { value: 0, type: 'float' }, // 時間變量,用于動態(tài)效果color1: { value: new THREE.Color(0xff0000), type: 'vec3' }, // 顏色 1color2: { value: new THREE.Color(0x00ff00), type: 'vec3' }, // 顏色 2color3: { value: new THREE.Color(0x0000ff), type: 'vec3' } // 顏色 3
};// 創(chuàng)建自定義著色器材質(zhì)
const material = new THREE.ShaderMaterial({uniforms: uniforms,vertexShader: `varying vec3 vPosition;void main() {vPosition = position;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`,fragmentShader: `uniform float time;uniform vec3 color1;uniform vec3 color2;uniform vec3 color3;varying vec3 vPosition;void main() {// 根據(jù)位置和時間的動態(tài)顏色vec3 color = mix(color1, color2, sin(vPosition.x + time) * 0.5 + 0.5);color = mix(color, color3, cos(vPosition.y + time) * 0.5 + 0.5);gl_FragColor = vec4(color, 1.0);}`
});// 創(chuàng)建立方體網(wǎng)格并添加到場景中
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);// 添加環(huán)境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);// 添加點光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);// 動畫循環(huán)
function animate() {requestAnimationFrame(animate);// 更新 uniforms 中的時間變量uniforms.time.value += 0.01;// 旋轉(zhuǎn)立方體cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 更新控制器controls.update();// 渲染場景renderer.render(scene, camera);
}animate();// 窗口大小調(diào)整事件
window.onresize = () => {renderer.setSize(box.clientWidth, box.clientHeight);camera.aspect = box.clientWidth / box.clientHeight;camera.updateProjectionMatrix();
};
代碼說明
-
場景和渲染器:
- 創(chuàng)建了一個場景、透視相機和 WebGL 渲染器。
- 渲染器綁定到
box
容器中。
-
立方體幾何體:
- 使用
BoxGeometry
創(chuàng)建立方體。 - 立方體的尺寸為
2x2x2
。
- 使用
-
自定義著色器材質(zhì):
- 使用
ShaderMaterial
創(chuàng)建自定義材質(zhì)。 - 頂點著色器將頂點位置傳遞給片元著色器。
- 片元著色器根據(jù)頂點位置和時間動態(tài)混合顏色。
- 使用
-
動畫循環(huán):
- 在
animate
函數(shù)中,更新time
變量以實現(xiàn)動態(tài)顏色效果。 - 立方體繞 X 軸和 Y 軸旋轉(zhuǎn)。
- 在
-
光源:
- 添加環(huán)境光和點光源,使立方體看起來更立體。
-
窗口大小調(diào)整:
- 當窗口大小變化時,更新渲染器和相機的尺寸。
運行效果
- 你會看到一個旋轉(zhuǎn)的立方體,每個面的顏色會根據(jù)時間和位置動態(tài)變化。
- 立方體的旋轉(zhuǎn)和顏色變化是平滑的。
如何擴展
-
修改顏色:
- 在
uniforms
中修改color1
、color2
和color3
的值,調(diào)整立方體的顏色。
- 在
-
添加紋理:
- 在片元著色器中使用
texture2D
加載紋理,并結(jié)合動態(tài)顏色效果。
- 在片元著色器中使用
-
調(diào)整幾何體:
- 將立方體替換為其他幾何體(如球體、環(huán)面等),觀察不同幾何體的效果。
-
增加交互:
- 通過鼠標或鍵盤事件動態(tài)修改
uniforms
的值,實現(xiàn)交互式效果。
- 通過鼠標或鍵盤事件動態(tài)修改
嘗試用AI輔助編寫代碼!