Three.js 中 HTML 中數據的紋理

Question

我試圖在 HTML 中獲取 URL 圖像以在場景中創建多個斑點。 這是一個小提琴的例子。 HTML 中數據的紋理

在控制台中我得到： Uncaught ReferenceError: sphere is not defined有人對為什么不工作有任何提示嗎？

謝謝

Answer 1

我已將您的代碼更新到最新版本的three.js ( R115 ) 並且還刪除了引入一些運行時錯誤的范圍問題。

 const v = new THREE.Vector3(); // 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) camera.position.z = 10 const sceneElements = []; const spheres = []; // 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); sphere.position.x = i * 3; scene.add(sphere); spheres.push(sphere) } } makeBlob(sceneElements) function animate() { requestAnimationFrame(animate) let time = performance.now() * 0.0005; for (var i = 0; i < spheres.length; i++) { var sphere = spheres[i] let k = 1; var positionAttribute = sphere.geometry.getAttribute('position') for (var j = 0; j < positionAttribute.count; j++) { v.fromBufferAttribute(positionAttribute, j); v.normalize().multiplyScalar(1 + 0.3 * noise.perlin3(vx * k + time, vy * k, vz * k)) positionAttribute.setXYZ(j, vx, vy, vz) } positionAttribute.needsUpdate = true } renderer.render(scene, camera) } animate()

 #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> <p> <span data-diagram="https://i.picsum.photos/id/1002/200/300.jpg" class="left"></span> </p> <p> <span data-diagram="https://i.picsum.photos/id/376/200/300.jpg" class="right"></span> </p>