Несколько холст на три. js - PullRequest
Новая
       6

Несколько холст на три. js

0 голосов
/ 22 апреля 2020

Я хотел бы поместить каждую из сфер в разные холсты, чтобы я мог легко манипулировать их положениями с помощью CSS. Затем наведите указатель мыши на каждый элемент h2, чтобы отобразить их один за другим

. Мне посоветовали реорганизовать код с помощью классов ES6 для создания каждого холста со сферой внутри.

как мне этого добиться?

https://jsfiddle.net/zhampu/q5j42pu9/9/

const v = new THREE.Vector3()
        const sceneElements = []
        const spheres = []
// Renderer
        const renderer = new THREE.WebGLRenderer({
            canvas: document.querySelector('#c'),
            antialias: true,
            alpha: true
        })
        renderer.setClearColor(0x000000, 0)
        renderer.setPixelRatio(window.devicePixelRatio)
// renderer.setSize(window.innerWidth, window.innerHeight)

// Scene & Camera
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
// const camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
        camera.position.z = 10

// Data Diagram
        document.querySelectorAll('[data-diagram]').forEach((elem) => {
            const sceneTexture = elem.dataset.diagram
            const eachTexture = new THREE.TextureLoader().load(sceneTexture)
            sceneElements.push(eachTexture)
            return sceneElements
        })

        function makeBlob(sceneElements) {
            for (var i = 0; i < sceneElements.length; i++) {
                const sphere_geometry = new THREE.SphereBufferGeometry(1, 32, 16).toNonIndexed()
                let material = new THREE.MeshBasicMaterial({
                    map: sceneElements[i]
                })
                const sphere = new THREE.Mesh(sphere_geometry, material)
                const positionOfPiece = document.querySelectorAll('[data-diagram]')
                sphere.position.x =  3 * i -3
                // sphere.position.y = positionOfPiece.top
                scene.add(sphere)
                spheres.push(sphere)
            }
        }

        makeBlob(sceneElements)

        function animate() {
            requestAnimationFrame(animate)

            let time = performance.now() * 0.0005
            resizeCanvasToDisplaySize()
            for (let i = 0; i < spheres.length; i++) {
                var sphere = spheres[i]
                let k = 1
                var positionAttribute = sphere.geometry.getAttribute('position')
                for (let j = 0; j < positionAttribute.count; j++) {
                    v.fromBufferAttribute(positionAttribute, j)
                    v.normalize().multiplyScalar(1 + 0.3 * noise.perlin3(v.x * k + time, v.y * k, v.z * k))
                    positionAttribute.setXYZ(j, v.x, v.y, v.z)
                }
                positionAttribute.needsUpdate = true
                sphere.rotation.y += 0.003
            }
            renderer.render(scene, camera)
        }

        animate()

        function resizeCanvasToDisplaySize() {
            const canvas = renderer.domElement
            const width = canvas.clientWidth
            const height = canvas.clientHeight
            if (canvas.width !== width || canvas.height !== height) {
                // you must pass false here or three.js sadly fights the browser
                renderer.setSize(width, height, false)
                camera.aspect = width / height
                camera.updateProjectionMatrix()

                // set render target sizes here
            }
        }
#c {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: -1;
}

*[data-diagram] {
  display: inline-block;
  width: 5em;
  height: 3em;
}

body {
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>
<script src="https://www.fariskassim.com/stage/rebel9/teaf/blob/v4/js/perlin.js"></script>
<canvas id="c"></canvas>
<a class="pieces-list" href="" target="_self">
  <h2>Publications</h2>
  <span data-diagram="https://i.picsum.photos/id/1002/600/300.jpg"></span>
</a>

<a class="pieces-list" href="" target="_self">
  <h2>Fashion</h2>
  <span data-diagram="https://i.picsum.photos/id/1002/200/300.jpg"></span>
</a>
...