Question

出于某种原因，我的精灵似乎没有加载Three.JS。有人可以帮我修改我的代码吗？

我不确定它到底出了什么问题...这可能是我忽略的一些简单问题。代码工作正常，但精灵没有出现。

<!DOCTYPE HTML>
<html>
<head>
<title>Sprite</title>
</head>
<style>

</style>
<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<body>
<div id="container" style = "text-align: center;width: 100%;">
</div>
<script>

 // this function is executed on each animation frame
  function animate(){
    // render
    renderer.render(scene, camera);

    // request new frame
    requestAnimationFrame(function(){
        animate();
    });
  }


  // renderer
  var renderer = new THREE.WebGLRenderer({ antialias: true }); //antialiasing on! :)
  renderer.setClearColorHex( 0xADD8E6, 1 ); //made the colour for the sky blue
  renderer.setSize(720, 600);
  document.body.appendChild(renderer.domElement);

  // camera
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 800);
  camera.position.z = 200;
  camera.position.y =160;
  camera.position.x = 30;
      camera.rotation.x = -0.5;


  // scene
  var scene = new THREE.Scene();

     //CODE HERE

            var ashTexture = new THREE.MeshBasicMaterial(
        {
        map: THREE.ImageUtils.loadTexture('http://www.mediafire.com/convkey/7344/ra2l3kgscpvjflafg.jpg')
        });

        var ashMaterial = new THREE.SpriteMaterial({ 
        map: ashTexture
        })

        var Ash = new THREE.Sprite( ashMaterial );
        Ash.scale.set( 64, 64, 1.0 );
        Ash.position.set( 0, 0, 0);
        scene.add(Ash);                 

     //CODE ENDS HERE

     // add subtle ambient lighting
  var ambientLight = new THREE.AmbientLight(0xbbbbbb);
  scene.add(ambientLight);

  // directional lighting
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);

  // start animation
  animate();


</script>   
</div>
</body>
</html>

Answer 1

<head>
<title>Sprite</title>
</head>
<style>

</style>
<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<body>
<div id="container" style = "text-align: center;width: 100%;">
</div>
<script>

// this function is executed on each animation frame
function animate() {
    // render
    renderer.render(scene, camera);

    // request new frame
    requestAnimationFrame(function() {
        animate();
    });
}


// renderer
var renderer = new THREE.WebGLRenderer({antialias: true}); //antialiasing on! :)
renderer.setClearColorHex(0xADD8E6, 1); //made the colour for the sky blue
renderer.setSize(720, 600);
document.body.appendChild(renderer.domElement);

// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 800);
camera.position.z = 200;
camera.position.y = 160;
camera.position.x = 30;
camera.rotation.x = -0.5;


// scene
var scene = new THREE.Scene();

//CODE HERE

/*var ashTexture = new THREE.MeshBasicMaterial(
 {
 map: THREE.ImageUtils.loadTexture('http://www.mediafire.com/convkey/7344/ra2l3kgscpvjflafg.jpg')
 });*/
var ashTexture = THREE.ImageUtils.loadTexture('http://www.mediafire.com/convkey/7344/ra2l3kgscpvjflafg.jpg');
var ashMaterial = new THREE.SpriteMaterial({
    map: ashTexture
});
var imageWidth = ashMaterial.map.image.width;
var imageHeight = ashMaterial.map.image.height;
var Ash = new THREE.Sprite(ashMaterial);
Ash.scale.set(2 * imageWidth, 2 * imageHeight, 1.0);
Ash.position.set(0, 0, 0);
scene.add(Ash);

//CODE ENDS HERE

// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0xbbbbbb);
scene.add(ambientLight);

// directional lighting
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

// start animation
animate();


</script>   
</div>
</body>
</html>

代码中的小变化..

精灵没有加载 - Three.JS

1 个答案: