three实现三维跟随鼠标多足蜘蛛爬行动画交互效果代码-html代码-BFW代码库

three实现三维跟随鼠标多足蜘蛛爬行动画交互效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维跟随鼠标多足蜘蛛爬行动画交互效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
<script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js"
     
    }
  }
</script>
</head>
<body style="margin: 0;overflow: hidden">
<script type="module">

    import {
        Scene, WebGLRenderer, PerspectiveCamera, GridHelper, Vector2, InstancedMesh,
        Mesh, MeshNormalMaterial, SphereGeometry, PlaneGeometry, DirectionalLight, CameraHelper,
        Vector3, Raycaster, Object3D, DynamicDrawUsage, MeshStandardMaterial, PCFSoftShadowMap
    } from "three";



    let noise = new SimplexNoise()

    const sphereGeometry = new SphereGeometry(1, 16, 16)


    const scene = new Scene();
    const light = new DirectionalLight();
    light.position.set(1, 10, 10);
    light.castShadow = true;
    light.shadow.mapSize.width = 2048; // default
    light.shadow.mapSize.height = 2048; // default
    light.shadow.camera.near = 0.5; // default
    light.shadow.camera.far = 500; // default
    scene.add(light)
    // scene.add(new CameraHelper(light.shadow.camera));

    // scene.add(new GridHelper())

    let sz = 55;
    const planeGeometry = new PlaneGeometry(sz, sz, 333, 333)
    for (let i = 0; i < planeGeometry.attributes.position.array.length; i+=3) {
        let x = planeGeometry.attributes.position.array[i+0]
        let z = planeGeometry.attributes.position.array[i+1]
        planeGeometry.attributes.position.array[i+2] -= noise.noise2D(x,z)/10
        // debugger
    }

    for (let i = 0; i < planeGeometry.attributes.normal.array.length; i++)
        planeGeometry.attributes.normal.array[i] += Math.random()*0.4
    planeGeometry.verticesNeedUpdate = true;

    const planeMaterial = new MeshStandardMaterial({color: 0xf0f0f0});
    const plane = new Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true
    plane.rotation.x = -Math.PI / 2;
    scene.add(plane)

    const agentMaterial = new MeshStandardMaterial({color: 0xf0f0e0});
    const agent = new Mesh(sphereGeometry, agentMaterial);
    agent.scale.multiplyScalar(0.1);
    agent.position.set(0, 1, 0)
    scene.add(agent)

    const o = new Object3D();

    for (let i = 0; i < 100; i++) {
        const mesh = new Mesh(sphereGeometry, agentMaterial);
        const gap = 0.2;
        const rnd = 1 - gap * 2;
        mesh.scale.multiplyScalar(0.1);
        let x = i % 10 - 5 + Math.random() * rnd + gap;
        let z = Math.floor(i / 10) - 5 + Math.random() * rnd + gap;
        mesh.position.set(
            x,
            -noise.noise2D(x,-z)/10,
            z
        );
        o.add(mesh);
    }
    // scene.add(o)

    const im = new InstancedMesh(sphereGeometry, agentMaterial, 20000)
    im.castShadow = true
    im.receiveShadow = true
    im.instanceMatrix.setUsage(DynamicDrawUsage);
    scene.add(im);

    const camera = new PerspectiveCamera();
    camera.position.set(5, 5, 5);
    camera.lookAt(new Vector3(1, 0, 1));

    const renderer = new WebGLRenderer({antialias: true});
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = PCFSoftShadowMap;
    document.body.appendChild(renderer.domElement);

    const rc = new Raycaster();
    const pt = new Vector2();
    const c = renderer.domElement;
    const tmp = new Object3D();

    requestAnimationFrame(function render(t) {
        if (renderer.width !== innerWidth || renderer.height !== innerHeight) {
            renderer.setSize(innerWidth, innerHeight);
            camera.aspect = innerWidth / innerHeight;
            camera.updateProjectionMatrix();
        }

        rc.setFromCamera(pt, camera);

        const intersects = rc.intersectObjects([plane]);

        for (let i = 0; i < intersects.length; i++) {

            let x = intersects[0].uv.x * sz - sz / 2
            let z = sz / 2 - i.........完整代码请登录后点击上方下载按钮下载查看