Question

按照以下两个教程开始玩three.js：

http://blog.thematicmapping.org/2014/01/photo-spheres-with-threejs.html

和

http://threejs.org/docs/#Manual/Introduction/Creating_a_scene

到目前为止，我已经提出了这个代码：

var camera, scene, renderer;
var geometry, material, mesh;

init();

function init() {

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 1000;

  scene = new THREE.Scene();

  var sphere = new THREE.Mesh(
    new THREE.SphereGeometry(100, 32, 32),
    new THREE.MeshBasicMaterial({
      map: THREE.ImageUtils.loadTexture('photos.jpg')
    })
  );

  sphere.scale.x = -1;

  scene.add(sphere);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(400, 400);
  renderer.render(scene,camera);

  document.body.appendChild(renderer.domElement);
}

真的只是试着按照指南进行操作，然而当我在浏览器（Chrome）中运行时，我得到的只是一个黑屏。没有错误可言，除了这个警告：

THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead.

请注意，我使用的照片是我用手机拍摄的一张照片照片（因为它应该是我跟随的第一个指南）。

预期结果与第一本指南的结果类似。

知道我做错了吗？

提前致谢

修改

通过替换

更正了警告

  var sphere = new THREE.Mesh(
    new THREE.SphereGeometry(100, 32, 32),
    new THREE.MeshBasicMaterial({
      map: THREE.ImageUtils.loadTexture('photos.jpg')
    })
  );

与

  var loader = new THREE.TextureLoader();
  var texture = loader.load('photos.jpg');
  var sphere = new THREE.Mesh(
    new THREE.SphereGeometry(100, 32, 32),
    new THREE.MeshBasicMaterial({
      map: texture
    })
  );

仍然是黑屏

Answer 1

跨越原始问题。必须从服务器运行该文件。去图。

Answer 2

sphere.material.side = THREE.BackSide;

三个js简单项目显示黑屏

2 个答案: