如何在three.js中实现此着色玩具？

在three.js中实现一个着色玩具通常涉及到几个关键步骤，包括场景设置、模型加载、着色器编写和应用以及交互逻辑。以下是一个基本的指南，帮助你在three.js中实现一个简单的着色玩具。

基础概念

1. 场景（Scene）：three.js中的所有对象都放置在一个场景中。 2. 相机（Camera）：用于观察场景。 3. 渲染器（Renderer）：负责将场景和相机视图渲染到屏幕上。 4. 着色器（Shader）：用于自定义物体的渲染方式，包括顶点着色器和片元着色器。

实现步骤

1. 初始化场景、相机和渲染器

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2. 加载模型

假设我们使用一个简单的几何体，如立方体：

const geometry = new THREE.BoxGeometry();

3. 编写着色器

创建顶点着色器和片元着色器：

顶点着色器 (vertexShader.glsl):

attribute vec3 position;
attribute vec3 color;

varying vec3 vColor;

void main() {
    vColor = color;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片元着色器 (fragmentShader.glsl):

varying vec3 vColor;

void main() {
    gl_FragColor = vec4(vColor, 1.0);
}

4. 创建着色器材质并应用到模型

const material = new THREE.ShaderMaterial({
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    uniforms: {
        color: { value: new THREE.Color(0xff0000) }
    }
});

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

5. 添加交互逻辑

例如，通过鼠标移动改变颜色：

const mouse = new THREE.Vector2();

window.addEventListener('mousemove', (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

function animate() {
    requestAnimationFrame(animate);

    // 根据鼠标位置改变颜色
    material.uniforms.color.value.setRGB(mouse.x + 1, mouse.y + 1, 0.5);

    renderer.render(scene, camera);
}

animate();