js没有显示任何东西

Three.js not displaying anything

本文关键字：任何东 显示 js      更新时间：2023-09-26

我一直在用three.js做一些实验。然而，当我尝试做一个简单的测试时，我无法让它显示任何内容。这是我的代码。如果有人能告诉我我错过了什么，那就太有帮助了。

//Constant declaration
var RENDER_DIST = 1000,
    FOV = 75;
var WIDTH = window.innerWidth,
    HEIGHT= window.innerHeight;
//Create the scene
var scene = new THREE.Scene();
//Create the camera
var camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, 0.1, RENDER_DIST);
//Pull the camera back a bit
camera.z = 100;
//Then add it to the scene
scene.add(camera);
//Create a renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH,HEIGHT);
renderer.domElement.className = "glMain";
//Container is a div
$("#container").html(renderer.domElement);
//Boilerplate done! Celebrate!
(function init() {
    var geometry = new THREE.SphereGeometry(50); 
    var material = new THREE.MeshBasicMaterial({color: 0xff0000}); 
    var sphere = new THREE.Mesh(geometry, material); 
    scene.add(sphere);
    //debugging
    console.log("Sphere at " + sphere.position.x + " " + sphere.position.y + " " + sphere.position.z);

})();
//Our main function
(function loopRun() {
    requestAnimationFrame(loopRun);
    console.log("rendered");
    renderer.render(scene, camera);
})();

在控制台日志中，我得到了所有的"rendered"消息，但没有显示任何内容。我检查过帆布的尺寸是正确的，它是正确的，所以我不知道什么是错误的。我试过几种不同的几何图形。

编辑:我使用Chrome，和在线三个。js的例子工作得很好。控制台日志中没有错误

//Pull the camera back a bit
camera.position.z = 100;
//Container is a div
document.body.appendChild(renderer.domElement);

您也可以尝试:

$("#container").append(renderer.viewElement);
相关文章：