Question

我正在使用以下代码开始学习three.js。这段代码应该在黑色容器内显示一个红色的球体，但它不适合我。在这里是否有人熟悉three.js以指出代码有什么问题？

// Set the scene size.
const WIDTH = 400;
const HEIGHT = 300;

// Set some camera attributes.
const VIEW_ANGLE = 45;
const ASPECT = WIDTH / HEIGHT;
const NEAR = 0.1;
const FAR = 10000;

// Get the DOM element to attach to
const container =
    document.querySelector('#container');

// Create a WebGL renderer, camera
// and a scene
const renderer = new THREE.WebGLRenderer();
const camera =
    new THREE.PerspectiveCamera(
        VIEW_ANGLE,
        ASPECT,
        NEAR,
        FAR
    );

const scene = new THREE.Scene();

// Add the camera to the scene.
scene.add(camera);

// Start the renderer.
renderer.setSize(WIDTH, HEIGHT);

// Attach the renderer-supplied
// DOM element.
container.appendChild(renderer.domElement);

// Set up the sphere vars
const RADIUS = 50;
const SEGMENTS = 16;
const RINGS = 16;

// create the sphere's material
const sphereMaterial = 
  new THREE.MeshLambertMaterial(
    {
        color: 0xCC0000
    });

// Create a new mesh with
// sphere geometry
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(
    RADIUS,
    SEGMENTS,
    RINGS),
  sphereMaterial);

// Move the Sphere back in Z so we
// can see it.
sphere.position.z = -300;

// Finally, add the sphere to the scene.
scene.add(sphere);

Answer 1

当您使用THREE.MeshLambertMaterial()时，在您将光源添加到场景中之前，您将无法使用此材料查看对象。

例如，THREE.DirectionalLight()：

var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(100, 100, 100);
scene.add(dirLight);

jsfiddle示例r86

three.js容器内没有显示任何对象

1 个答案: