未捕获（承诺）TypeError：无法读取 three.js 顶点的未定义属性（读取“长度”）

Question

所以我正在将 html 项目转换为 laravel/vue 项目。 html 文件有一个 three.min.js 文件，我不知道它的版本。 以及一些自定义脚本文件。

我已经为我的 vue 组件导入了所有这些。 我遇到了 three.min.js 文件的不同错误，所以我 npm 安装了 three.js 的 r69 版本，因为我在最近的版本中读到，几何已经改变。 其中一个自定义文件 test.js 使用的是 three.js。我在 console.log 中遇到了以下错误

未捕获（承诺）类型错误：无法在 test.js 读取未定义的属性（读取“长度”）？t=1674045010699:37:39

test.js文件代码：

import * as THREE from "three";

// import ('../../assets/js/three.min.js')
// import "../js/anime.js"
// import "../js/three.js"

var canvas = document.querySelector("#scene");
var width = canvas.offsetWidth,
    height = canvas.offsetHeight;
var renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true,
});
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(width, height);
renderer.setClearColor(0x161d31);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(100, width / height, 0.1, 10000);
camera.position.set(120, 0, 300);
var light = new THREE.HemisphereLight(0xffffff, 0x0c056d, 0.6);
scene.add(light);
var light = new THREE.DirectionalLight(0x590d82, 0.5);
light.position.set(100, 300, 400);
scene.add(light);
var light2 = light.clone();
light2.position.set(-100, 300, 400);
scene.add(light2);

var material = new THREE.MeshPhongMaterial({
    emissive: 0x23f660,
    emissiveIntensity: 0.4,
    shininess: 0,
});

var geometry = new THREE.IcosahedronGeometry(120, 4);

for (var i = 0; i < geometry.vertices.length; i++) {
    var vector = geometry.vertices[i];
    vector._o = vector.clone();
}

var shape = new THREE.Mesh(geometry, material);
scene.add(shape);

function updateVertices(a) {
    for (var i = 0; i < geometry.vertices.length; i++) {
        var vector = geometry.vertices[i];
        vector.copy(vector._o);
        var perlin = noise.simplex3(
            vector.x * 0.006 + a * 0.0002,
            vector.y * 0.006 + a * 0.0003,
            vector.z * 0.006
        );
        var ratio = perlin * 0.4 * (mouse.y + 0.3) + 0.9;
        vector.multiplyScalar(ratio);
    }
    geometry.verticesNeedUpdate = true;
}

function render(a) {
    requestAnimationFrame(render);
    updateVertices(a);
    renderer.render(scene, camera);
}

function onResize() {
    canvas.style.width = "";
    canvas.style.height = "";
    width = canvas.offsetWidth;
    height = canvas.offsetHeight;
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);
}

var mouse = new THREE.Vector2(0.8, 0.5);
function onMouseMove(e) {
    TweenMax.to(mouse, 0.8, {
        y: e.clientY / height,
        x: e.clientX / width,
        ease: Power1.easeOut,
    });
}

requestAnimationFrame(render);
window.addEventListener("mousemove", onMouseMove);
var resizeTm;
window.addEventListener("resize", function () {
    resizeTm = clearTimeout(resizeTm);
    resizeTm = setTimeout(onResize, 200);
});

我对three.js一无所知，我这里的主要任务是将整个项目转换成vue/laravel所以我还有其他事情要担心。 有谁知道如何解决这个问题？

Answer 1

我已将代码迁移到更新版本的three.js 。 代码现在使用BufferGeometry （新的几何格式），因此原来的运行时错误消失了。

 const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); window.addEventListener('resize', onWindowResize); const scene = new THREE.Scene(); scene.background = new THREE.Color(0x161d31); const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(120, 0, 300); const light = new THREE.HemisphereLight(0xffffff, 0x0c056d, 0.6); scene.add(light); const light1 = new THREE.DirectionalLight(0x590d82, 0.5); light1.position.set(100, 300, 400); scene.add(light1); const light2 = light1.clone(); light2.position.set(-100, 300, 400); scene.add(light2); const material = new THREE.MeshLambertMaterial({ emissive: 0x23f660, emissiveIntensity: 0.4 }); const geometry = new THREE.IcosahedronGeometry(120, 12); const positionAttributeBase = geometry.getAttribute( 'position' ).clone(); const shape = new THREE.Mesh(geometry, material); scene.add(shape); const simplex = new THREE.SimplexNoise(); const vector = new THREE.Vector3(); function updateVertices(time) { const positionAttribute = geometry.getAttribute('position'); for (let i = 0; i < positionAttributeBase.count; i++) { vector.fromBufferAttribute(positionAttributeBase, i); const noise = simplex.noise3d( vector.x * 0.006 + time * 0.0002, vector.y * 0.006 + time * 0.0003, vector.z * 0.006 ); const ratio = noise * 0.4 + 0.9; vector.multiplyScalar(ratio); positionAttribute.setXYZ(i, vector.x, vector.y, vector.z) } positionAttribute.needsUpdate = true; } function animate(time=0) { requestAnimationFrame(animate); updateVertices(time); renderer.render(scene, camera); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } animate();

 body { margin: 0px; }

 <script src="https://cdn.jsdelivr.net/npm/three@0.147/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.147/examples/js/math/SimplexNoise.js"></script>