Three.js가 구체의 텍스처를 표시하지 않습니다.

텍스처에 표시되지 않는 스레드가 있습니다. 나는 그들을 다 해봤지만 아무것도 도움이되지 않았다.Three.js가 구체의 텍스처를 표시하지 않습니다.

나는 이것에 지금 몇 시간을 보냈다. 내가 검은 구를 볼 때마다.

Chrome v18 및 Windows 7에서 작업하고 있습니다. Firefox를 사용해 보았지만이 브라우저는 Three.js를 실제로 지원하지 않습니다.

// 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);

출처

2012-04-18 Proto

당신은 텍스처로 사용되는 이미지가 완전히 다운로드 될 때까지 기다릴 필요가 :

<body> 

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

    <script src="js/Stats.js"></script> 
    <script src="../build/jquery-1.7.2.min.js"></script>

이 스크립트 자체는 다음과 같습니다

이

스크립트의 기관이다. http://jsfiddle.net/4Qg7K/을 단지 고전 "렌더링 루프"추가 :

나는 웹에 코드를 삽입 한 render 기능 브라우저가 준비 될 때마다 호출

requestAnimationFrame(render); 

function render(){ 
    requestAnimationFrame(render); 

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

    renderer.render(scene, camera); 
};

requestAnimationFrame 기능은 타이머처럼 작동을 웹 페이지를 업데이트하십시오.

BTW, Three.js는 Firefox에서 잘 작동합니다.

출처

2012-04-18 14:57:42

Three.js가 구체의 텍스처를 표시하지 않습니다.

답변

관련 문제