Three.js无渲染输出求助：无报错但内容完全不显示

相关代码 #

Three.js核心代码：

import * as THREE from "three";
import images from "./images.js";
const container = document.querySelector(".three_bg");
const loader = new THREE.TextureLoader();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.1, 1000);

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

//responsive
window.addEventListener("resize", ()=> {
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});


const geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
const material = new THREE.MeshBasicMaterial({//color: 0xff0000,
     map:loader.load(images.bg1)});

const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);
camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

animate();

HTML脚本引入：

<script type="module" src="/src/assets/js/threeBg.js"></script>

问题描述 #

按课程步骤操作（npm安装Three.js、package.json添加"browserslist": ["defaults"]配置），但Three.js内容完全不显示，连黑屏都看不到；控制台无红色报错，仅存在无关黄色警告，推测并非相机距离问题。

• 调整相机位置：你创建的TorusKnotGeometry参数是(10, 3, 100, 16)，其中第一个参数是圆环半径，第二个是管半径，整个物体的最大尺寸为10+3=13，但相机position.z设为5，意味着相机完全处于物体内部，超出了透视相机近裁剪面（0.1）的范围，物体被完全裁剪。将相机z轴位置调整到至少15以上，比如camera.position.z = 30再测试。

• 验证容器元素状态：确认页面中存在.three_bg元素，且该元素未被设置为display: none或visibility: hidden，同时需设置明确宽高（比如width: 100vw; height: 100vh;），否则渲染画布可能被压缩为0尺寸，导致无法显示。

• 替换渲染器类型：将WebGL1Renderer替换为THREE.WebGLRenderer，部分现代浏览器对WebGL1的兼容性支持不如WebGL2，使用默认渲染器可避免这类兼容问题。

• 排查纹理加载问题：当前MeshBasicMaterial仅设置纹理、注释了color属性，若纹理加载失败（如images.bg1路径错误、资源不存在），材质会变为透明状态，物体无法显示。可先取消color: 0xff0000的注释、去掉纹理map，测试是否能显示红色 torus knot，以此排除纹理加载问题。

• 确认模块路径正确性：尽管控制台无报错，仍需核对/src/assets/js/threeBg.js的路径是否与实际文件位置匹配，模块路径错误会导致脚本未加载，自然不会有渲染内容。

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