vue.js - 为什么threeJS中导入BoxBufferGeometry模块报错？

Question

threeJS中找不到BoxBufferGeometry类
版本"three": "^0.160.0"
vite+vue环境

将BoxBufferGeometry改为BufferGeometry之后没有报错，但是图形出不来

<template>  <div id="scene-container"></div></template><script>import {   BoxBufferGeometry,   Color,   Mesh,   MeshBasicMaterial,   PerspectiveCamera,   Scene,   WebGLRenderer } from 'three';export default {  mounted() {    // Get a reference to the container element that will hold our scene    const container = document.querySelector('#scene-container');    // 创建场景    const scene = new Scene();    // 设置场景颜色    scene.background = new Color('skyblue');    // 创建摄像机    const fov = 35; // 角度    const aspect = container.clientWidth / container.clientHeight;// 长宽比    const near = 0.1; // 近截面    const far = 100; // 远截面    // 透视摄像机    const camera = new PerspectiveCamera(fov, aspect, near, far);    // every object is initially created at ( 0, 0, 0 )    // move the camera back so we can view the scene - 移动相机以便查看场景    camera.position.set(0, 0, 10);    // 创建几何图    const geometry = new BufferGeometry(2, 2, 2);    // 创建白色基本材料 - 材料Material    const material = new MeshBasicMaterial({ color: 0x0000ff });    console.log(material);    // 创建一个包含几何材料的网格    const cube = new Mesh(geometry, material);    // 将网格添加到场景中    scene.add(cube);    // 创建渲染器    const renderer = new WebGLRenderer();    // 将渲染器设置为容器元素相同的大小    renderer.setSize(container.clientWidth, container.clientHeight);    // 设置像素比例    renderer.setPixelRatio(window.devicePixelRatio);    // 添加到元素上    container.appendChild(renderer.domElement);    // 渲染到页面中    renderer.render(scene, camera);  },};</script><style scoped>#scene-container {  width: 100%;  height: 100vh;}</style>

three源代码中也找不到相关的类

Answer 1

对于你遇到的问题，原因可能有以下几点：

1. 版本问题：你使用的three.js版本是"three": "^0.160.0"，这个版本可能并不支持BoxBufferGeometry。从three.js r120版本开始，BufferGeometry被用作几何体基类，而BoxGeometry等被作为BufferGeometry的实例化对象。因此，你可能会需要升级你的three.js版本，或者使用正确的几何体类型（如BoxGeometry）。
2. 导入问题：你尝试导入BoxBufferGeometry，但是可能由于某种原因（如路径问题、大小写问题等）没有正确导入。你应该确保你的导入语句是正确的。

基于以上分析，我建议你修改代码，使用正确的几何体类型和正确的导入语句。以下是修改后的代码：

<template>  <div id="scene-container"></div></template><script>import {   BoxGeometry,   Color,   Mesh,   MeshBasicMaterial,   PerspectiveCamera,   Scene,   WebGLRenderer } from 'three';export default {  mounted() {    // Get a reference to the container element that will hold our scene    const container = document.querySelector('#scene-container');    // 创建场景    const scene = new Scene();    // 设置场景颜色    scene.background = new Color('skyblue');    // 创建摄像机    const fov = 35; // 角度    const aspect = container.clientWidth / container.clientHeight;// 长宽比    const near = 0.1; // 近截面    const far = 100; // 远截面    // 透视摄像机    const camera = new PerspectiveCamera(fov, aspect, near, far);    // every object is initially created at ( 0, 0, 0 )    // move the camera back so we can view the scene - 移动相机以便查看场景    camera.position.set(0, 0, 10);    // 创建几何图 - 使用BoxGeometry代替BufferGeometry    const geometry = new BoxGeometry(2, 2, 2);    // 创建白色基本材料 - 材料Material    const material = new MeshBasicMaterial({ color: 0x0000ff });    console.log(material);    // 创建一个包含几何材料的网格    const cube = new Mesh(geometry, material);    // 将网格添加到场景中    scene.add(cube);    // 创建渲染器    const renderer = new WebGLRenderer();    // 将渲染器设置为容器元素相同的大小    renderer.setSize(container.clientWidth, container.clientHeight);    // 设置像素比例    renderer.setPixelRatio(window.devicePixelRatio);    // 添加到元素上    container.appendChild(renderer.domElement);    // 渲染到页面中    renderer.render(scene, camera);  },};</script>