在 Three.js 中显示管几何形状时出现问题

Question

我是 Three.js 新手，无法在屏幕上显示管子。我使用基本材质来保持照明简单，但它不起作用。有人可以帮我弄清楚为什么它没有出现吗？

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   = new THREE.CatmullRomCurve3(points)

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

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

// Create a mesh based on tubeGeometry and tubeMaterial
var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
console.log(tube)
// Add the tube into the scene
scene.add(tube);

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

var light = new THREE.HemisphereLight( 0xffffbb, 0x887979, 0.9);
scene.add( light );

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.set(0, 0, 10);
scene.add(camera)

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})

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

renderer.render(scene, camera)

最初我尝试在标准材质上使用纹理，但为了简化我改用基本材质。

Answer 1

您的代码中有几个问题：

1.您没有创建

canvas

元素：

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);

2.你有错字：

var   = new THREE.CatmullRomCurve3(points)

3.您在

TubeGeometry

上错误地创建了几何体，请尝试这个：

const points = [];

for (let i = 0; i < 5; i++) {
  points.push(new THREE.Vector3(0, 0, 2.5 * (i / 4)));
}
const curve = new THREE.CatmullRomCurve3(points);

const tubeRadius = 0.5;
const radiusSegments = 10;
const closed = true;

const tubeGeometry = new THREE.TubeGeometry(
  curve,
  70,
  tubeRadius,
  radiusSegments,
  closed
);

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

const tube = new THREE.Mesh(tubeGeometry, tubeMaterial);

tube.rotation.x = 2;
tube.position.y = 1;

scene.add(tube);

4.调试等

如果我了解你，我会安装

OrbitControls

或

GUI

，那么你将通过调试等变得更轻松。

npm 安装 lil-gui

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import GUI from 'lil-gui'