js实现线路流动_three.js实现建筑物纹理流动

要实现线路流动和建筑物纹理流动，需要使用Three.js中的ShaderMaterial和自定义的着色器代码。下面是一个简单的示例代码：

HTML：

<div id="container"></div>

JavaScript：

// 创建场景和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);

// 添加灯光
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
var pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

// 创建建筑物和线路材质
var buildingGeometry = new THREE.BoxGeometry(1, 1, 1);
var buildingMaterial = new THREE.MeshPhongMaterial({ color: 0xCCCCCC, shininess: 10 });
var lineMaterial = new THREE.LineBasicMaterial({ color: 0x00FF00 });
var time = 0;

// 自定义着色器代码
var vertexShader = `
    uniform float time;
    varying vec2 vUv;
    void main() {
        vUv = uv;
        vec3 position = position;
        position.x += sin(position.z * 10.0 + time) * 0.1;
        position.y += sin(position.z * 20.0 + time) * 0.1;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;
var fragmentShader = `
    uniform float time;
    uniform sampler2D texture;
    varying vec2 vUv;
    void main() {
        vec2 uv = vUv;
        uv.x += sin(uv.y * 10.0 + time) * 0.1;
        uv.y += sin(uv.x * 20.0 + time) * 0.1;
        gl_FragColor = texture2D(texture, uv);
    }
`;

// 创建着色器材质
var shaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        texture: { value: new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg') }
    },
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

// 添加建筑物和线路
for (var i = 0; i < 10; i++) {
    var building = new THREE.Mesh(buildingGeometry, buildingMaterial);
    building.position.set(i - 5, 0, 0);
    scene.add(building);

    var lineGeometry = new THREE.Geometry();
    lineGeometry.vertices.push(new THREE.Vector3(i - 5, -0.5, 0), new THREE.Vector3(i - 5, -0.5, -5));
    var line = new THREE.Line(lineGeometry, lineMaterial);
    scene.add(line);
}

// 渲染循环
function render() {
    requestAnimationFrame(render);
    time += 0.1;
    shaderMaterial.uniforms.time.value = time;
    renderer.render(scene, camera);
}
render();

这个示例代码中，我们创建了一个包含10个方块和10条线路的场景。我们使用了一个自定义的着色器代码来实现建筑物和线路的流动效果。建筑物使用了Phong材质，线路使用了LineBasicMaterial。

在自定义的着色器代码中，我们使用了一个uniform变量time来控制时间流逝。在顶点着色器中，我们根据时间调整建筑物的位置。在片元着色器中，我们根据时间调整纹理的UV坐标来实现纹理的流动效果。

如果你需要进一步了解ShaderMaterial和自定义着色器代码的使用，可以参考Three.js的官方文档。