Fatal编程技术网
  • google-chrome/
  • Google chrome Three.js不在球体上显示纹理

Google chrome Three.js不在球体上显示纹理

google-chrome webgl three.js

Google chrome Three.js不在球体上显示纹理,google-chrome,textures,webgl,three.js,Google Chrome,Textures,Webgl,Three.js,有一些关于纹理的线索没有显示出来。我都试过了，但都没用 我已经花了几个小时在这上面了。每次我看到一个黑色的球体 我正在使用ChromeV18和Windows7。我也试过Firefox，但这个浏览器并不真正支持Three.js 这是脚本的主体： <body> <script src="../build/Three.js"></script> <script src="js/Stats.js"></script>

有一些关于纹理的线索没有显示出来。我都试过了，但都没用

我已经花了几个小时在这上面了。每次我看到一个黑色的球体

我正在使用ChromeV18和Windows7。我也试过Firefox，但这个浏览器并不真正支持Three.js

这是脚本的主体：

<body>

    <script src="../build/Three.js"></script>

    <script src="js/Stats.js"></script>
    <script src="../build/jquery-1.7.2.min.js"></script>
您需要等待，直到用作纹理的图像完全下载

我已将您的代码放到web上：并刚刚添加了一个经典的“渲染循环”：

requestAnimationFrame
函数的工作原理类似于计时器，每次浏览器准备更新网页时都调用
render
函数

顺便说一句，Three.js可以与Firefox配合使用。

您需要等待用作纹理的图像完全下载

我已将您的代码放到web上：并刚刚添加了一个经典的“渲染循环”：

requestAnimationFrame
函数的工作原理类似于计时器，每次浏览器准备更新网页时都调用
render
函数

顺便说一句，Three.js在Firefox上运行良好

// stap1) camera, 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;

    var camera = new THREE.PerspectiveCamera(  
                VIEW_ANGLE,
          ASPECT,
          NEAR,
          FAR  );
// stap2) scene:                
    var scene = new THREE.Scene();
    // the camera starts at 0,0,0 so pull it back
   scene.add(camera);
     camera.position.z = +300;
    // get the DOM element to attach to
    // - assume we've got jQuery to hand
    var container = $('#container');

    // stap3)create a WebGL renderer:
    var renderer = new THREE.WebGLRenderer();
    // start the renderer
    renderer.setSize(WIDTH, HEIGHT);
    // attach the render-supplied DOM element
    container.append(renderer.domElement);

    // bol maken:
    // create the sphere's material
    // b.v: THREE.MeshBasicMaterial
    var sphereMaterial = new THREE.MeshLambertMaterial(
    {
        map: THREE.ImageUtils.loadTexture("http://dev.root.nl/tree/examples/textures/ash_uvgrid01.jpg")
    });

    // set up the sphere vars
    var radius = 50, segments = 16, rings = 16;
    var sphereGeometry = new THREE.SphereGeometry(radius, segments, rings); 
    // create a new mesh with sphere geometry -
    var sphere = new THREE.Mesh(
       sphereGeometry,
       sphereMaterial
         );

    sphere.position.x=0;
    var s=1;
    sphere.scale.set(s, s, s);  

    // add the sphere to the scene
    scene.add(sphere);
    // create a point light
    var pointLight = new THREE.PointLight( 0xFFFFFF );
    // set its position
    pointLight.position.x = 10;
    pointLight.position.y = 50;
    pointLight.position.z = 130;
    // add to the scene
    scene.add(pointLight);
    // draw!
    renderer.render(scene, camera);

requestAnimationFrame(render);

function render(){
  requestAnimationFrame(render);

  sphere.rotation.y += 0.005; //rotation stuff, just for fun

  renderer.render(scene, camera);
};