我做错了什么,ReferenceError:在开始之后没有定义sphereMaterial

时间:2016-01-02 16:25:16

标签: three.js

我正在阅读这个开始https://aerotwist.com/tutorials/getting-started-with-three-js/

我收到以下错误消息,

ReferenceError:未定义sphereMaterial

而是应该出现一个球体。

我所拥有的是来自http://threejs.org/build/three.min.js

的三份副本
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Try</title>
    </head>
    <body>
       <div id="scene"><p>yo</p></div>

<script src="three.min.js"></script>
<script src="main.js"></script>
    </body>
</html>

main.js

// set the scene size
var WIDTH = 400,
  HEIGHT = 300;

// set some camera attributes
var VIEW_ANGLE = 45,
  ASPECT = WIDTH / HEIGHT,
  NEAR = 0.1,
  FAR = 10000;


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

var scene = new THREE.Scene();

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

// the camera starts at 0,0,0
// so pull it back
camera.position.z = 300;

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

// attach the render-supplied DOM element
document.getElementById("scene").appendChild(renderer.domElement);

// set up the sphere vars
var radius = 50,
    segments = 16,
    rings = 16;

// create a new mesh with
// sphere geometry - we will cover
// the sphereMaterial next!
var sphere = new THREE.Mesh(

  new THREE.SphereGeometry(
    radius,
    segments,
    rings),

  sphereMaterial);

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

1 个答案:

答案 0 :(得分:3)

好吧,你似乎没有注意到这个教程。您的JS显然缺少任何名为sphereMaterial的变量,并且您已经在教程中搜索了该变量,您已经看到了这段代码没有复制到您的脚本中:

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