What’s on our mind?

Collection of articles, design, site, and resources made by designers and publisher @Menu View

index91
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
    camera.position.set(1.5, -0.5, 6);
let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true});
    renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

new OrbitControls(camera, renderer.domElement);

let sphereGeometry = new THREE.SphereGeometry(1.5, 100, 100);
    sphereGeometry.positionData = [];
let v3 = new THREE.Vector3();
for (let i = 0; i < sphereGeometry.attributes.position.count; i++) {
    v3.fromBufferAttribute(sphereGeometry.attributes.position, i);
    sphereGeometry.positionData.push(v3.clone());
}
let sphereMesh = new THREE.ShaderMaterial({
    uniforms: {
        colorA: {
            type: 'vec3',
            value: new THREE.Vector3(0.5, 0.5, 0.5)
        },
    },
    vertexShader: document.getElementById('vertex').textContent,
    fragmentShader: document.getElementById('fragment').textContent,
});
let sphere = new THREE.Mesh(sphereGeometry, sphereMesh);
scene.add(sphere);

let planeGeometry = new THREE.BoxGeometry(7, 7, 2, 10, 10, 2)
    planeGeometry.translate(0, 0, -3);
    planeGeometry.positionData = [];
for (let i = 0; i < planeGeometry.attributes.position.count; i++) {
    v3.fromBufferAttribute(planeGeometry.attributes.position, i);
    planeGeometry.positionData.push(v3.clone());
}
let planeMesh = new THREE.MeshBasicMaterial({
    color: 0x898989,
    wireframe: true
});
let plane = new THREE.Mesh(planeGeometry, planeMesh);
// scene.add(plane);

let noise = openSimplexNoise.makeNoise4D(Date.now());
let clock = new THREE.Clock();

window.addEventListener("resize", () => {
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(innerWidth, innerHeight)
});

renderer.setAnimationLoop(() => {
    let t = clock.getElapsedTime() / 1.;
    sphereGeometry.positionData.forEach((p, idx) => {
        let setNoise = noise(p.x, p.y, p.z, t * 1.05);
        v3.copy(p).addScaledVector(p, setNoise);
        sphereGeometry.attributes.position.setXYZ(idx, v3.x, v3.y, v3.z);
    })
    sphereGeometry.computeVertexNormals();
    sphereGeometry.attributes.position.needsUpdate = true;

    planeGeometry.positionData.forEach((p, idx) => {
        let sineWave = (Math.sin(t) * Math.PI / 100) + 1;
        let setNoise = noise(p.x, p.y, p.z, t / 3);
        v3.copy(p).addScaledVector(p, setNoise);
        planeGeometry.attributes.position.setXYZ(idx, v3.x, v3.y, v3.z);
    })
    planeGeometry.attributes.position.needsUpdate = true;
    renderer.render(scene, camera);
})