未捕获的类型错误：无法读取 Three.js 中未定义的属性“地图”

Question

我正在尝试使用 Three.js 在图像上创建波浪效果，我正在按照 youtube 上的本教程进行操作：-

Tutorial That I Followed

完成代码后，我收到 Uncaught TypeError: Cannot read property 'map' of undefined error in my console 并且线框也不可见。 也许这是由于新的 Three.js 更新引入了 BufferGeometry 而不是普通的。

我的Js代码如下：-

const section = document.querySelector('#wrapper');

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer({
    alpha: true, 
    antialias: true
});
renderer.setSize( window.innerWidth, window.innerHeight );
section.appendChild( renderer.domElement );

const texture = new THREE.TextureLoader().load( 'Wrapper2 Central.jpg' );

const geometry = new THREE.PlaneGeometry(7.5, 4 , 50, 30);
const material = new THREE.MeshBasicMaterial({ 
    
    map: texture 
});
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

cube.rotation.set(0, 0, 0)

camera.position.z = 5;

const clock = new THREE.Clock()

function animate() {
    const t = clock.getElapsedTime()

    cube.geometry.vertices.map( v => {
        const wavex1 = 0.5 * Math.sin(v.x * 2 * t)
        const wavex2 = 0.25 * Math.sin(v.x * 3 * t * 2)
        const wavex3 = 0.5 * Math.sin(v.y * t)

        v.z = wavex1 + wavex2 + wavex3
    })

    cube.geometry.verticesNeedUpdate()

    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

Answer 1

不再有geometry.vertices，因为THREE.Geometry()自r125以来已被弃用，以及所有几何构造函数如何返回THREE.BufferGeometry，其中顶点存储在geometry.attributes.position中：

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.module.js";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer({
    alpha: true, 
    antialias: true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const texture = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );

const geometry = new THREE.PlaneGeometry(7.5, 4 , 50, 30);
const material = new THREE.MeshBasicMaterial({ 
    
    map: texture 
});
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

cube.rotation.set(0, 0, 0)

camera.position.z = 5;

const clock = new THREE.Clock()
let v = new THREE.Vector3();
let pos = cube.geometry.attributes.position;

function animate() {
    const t = clock.getElapsedTime()
    
    for (let i = 0; i < pos.count; i++){
      v.fromBufferAttribute(pos, i);
      const wavex1 = 0.5 * Math.sin(v.x * 2 * t)
      const wavex2 = 0.25 * Math.sin(v.x * 3 * t * 2)
      const wavex3 = 0.5 * Math.sin(v.y * t)

      pos.setZ(i, wavex1 + wavex2 + wavex3)
      
    }
    pos.needsUpdate = true;

    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();
</script>