Three.js中Tube Geometry无法显示的问题求助

你的Tube无法显示主要有几个明确的错误，逐个解决就能正常显示：

1. 曲线变量名缺失（致命错误）
代码里定义CatmullRomCurve3时，变量名是空的，导致后续TubeGeometry引用的curve未定义，直接报错：

// 错误代码
var   = new THREE.CatmullRomCurve3(points)
// 修复后
var curve = new THREE.CatmullRomCurve3(points)

这个错误会让TubeGeometry根本无法创建，自然看不到任何内容。

2. 相机视角与Tube方向的问题
你生成的所有点都在Z轴上（(0,0,2.5*(i/4))），所以Tube是沿着Z轴延伸的，而相机也在Z轴上（(0,0,10)），此时相机正对着Tube的端面，即使Tube创建成功，你看到的也只是一个很小的圆（甚至可能因为视角问题被忽略）。

可以调整相机位置，让它从侧面观察Tube：

// 调整相机到X轴方向，就能看到Tube的完整形态
camera.position.set(20, 0, 10);
// 让相机看向Tube的中间位置
camera.lookAt(0, 0, 1.25);

3. 渲染器的canvas元素问题
代码里renderer = new THREE.WebGLRenderer({canvas: canvas})，如果你的HTML页面中没有id为canvas的元素，渲染器无法绑定到DOM，也不会显示任何内容。确保页面里有对应的canvas：

<canvas id="canvas"></canvas>

或者如果不需要指定现有canvas，也可以省略canvas参数，让Three.js自动创建一个canvas并添加到页面。

修复后的完整代码 #

const scene = new THREE.Scene()

var points = []
for (var i = 0; i<5; i++){
    points.push(new THREE.Vector3(0,0,2.5*(i/4)))
}
// 修复变量名
var curve = new THREE.CatmullRomCurve3(points)

var tubeGeometry = new THREE.TubeGeometry(curve, 70, 10, 50, false);

var tubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });

var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
scene.add(tube);

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

// MeshBasicMaterial不受光照影响，可移除该代码
// var light = new THREE.HemisphereLight( 0xffffbb, 0x887979, 0.9);
// scene.add( light );

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
// 调整相机位置，从侧面看Tube
camera.position.set(20, 0, 10);
camera.lookAt(0, 0, 1.25);
scene.add(camera)

// 绑定页面中的canvas元素
const renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('canvas')
})

renderer.setSize(sizes.width, sizes.height)
renderer.setClearColor(0x8FBCD4);

renderer.render(scene, camera)

额外提示 #

• MeshBasicMaterial不受光照影响，你添加的HemisphereLight对它没有作用，可以直接移除，减少不必要的代码。
• 如果后续要换回MeshStandardMaterial，记得保留光照，否则材质会显示全黑。

内容的提问来源于stack exchange，提问作者An Adhikari