Three.js, Macintosh 디스플레이 3D 모델

나는 블렌더에서 3D 모델을 만들었습니다. 나는 수출업자와 convert_obj_three.py (둘 다 잘 수출했지만 아래 코드와 함께 브라우저에 표시되지 않았다)와 함께 수출했다. Three.js, Macintosh 디스플레이 3D 모델

내가 여기에서 HTML/JS 아래의 코드를 사용 :

http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/

원래 데모/사이트에서 다른 three.js를 예를 들어 파이어 폭스에서 잘 작동 (맥 OS X 10.6.8, AMD Radeon HD 6490M).

다른 모든 브라우저에 문제가있는 것 같습니다. 나는 간단한을 실행 흥미롭게 경우

파이썬 -m SimpleHTTPServer 8888

어떤 예를 들어 디렉토리에서

와 파이어 폭스를 통해 그것을보고 싶어, 그것은 작동하지 않습니다/중 렌더링합니다.

항상 배경색과 텍스트는 표시되지만 렌더링되지 않습니다.

그리고 필요한 모든 .js는 같은 디렉토리에 있습니다.

나는 뭔가를 놓치고 있습니까? 아니면 그냥 무작위입니까?

사용자가 회전시킬 수있는 간단한 3D 모델을 표시하려면 어떻게해야합니까? 이 코드가 맞습니까?

Thx.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>WebGL made easy</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       background:#fff; 
       padding:0; 
       margin:0; 
       overflow:hidden; 
       font-family:'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; 
       text-align:center; 
      } 
      canvas { pointer-events:none; z-index:10; } 

      p { font-size: small;} 

     </style> 
    </head> 

<body> 
    <script src="Three.js"></script> 
    <script src="Detector.js"></script> 
    <script src="RequestAnimationFrame.js"></script> 

      <script> 
      if (! Detector.webgl) Detector.addGetWebGLMessage(); 

      var SCREEN_WIDTH = window.innerWidth; 
      var SCREEN_HEIGHT = window.innerHeight; 
      var FLOOR = 0; 

      var container; 

      var camera, scene; 
      var webglRenderer; 

      var zmesh, geometry; 

      var mouseX = 0, mouseY = 0; 

      var windowHalfX = window.innerWidth/2; 
      var windowHalfY = window.innerHeight/2; 

      document.addEventListener('mousemove', onDocumentMouseMove, false); 

      init(); 
      animate(); 

      function init() { 

       container = document.createElement('div'); 
       document.body.appendChild(container); 

       // camera 
       camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH/SCREEN_HEIGHT, 1, 100000); 
       camera.position.z = 75; 

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

       // lights 
       var ambient = new THREE.AmbientLight(0xffffff); 
       scene.add(ambient); 

       // more lights 
       var directionalLight = new THREE.DirectionalLight(0xffeedd); 
       directionalLight.position.set(0, -70, 100).normalize(); 
       scene.add(directionalLight); 

       // renderer 
       webglRenderer = new THREE.WebGLRenderer(); 
       webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
       webglRenderer.domElement.style.position = "relative"; 
       container.appendChild(webglRenderer.domElement); 

       // loader 
       var loader = new THREE.JSONLoader(), 
       callbackModel = function(geometry) { createScene(geometry, 90, FLOOR, -50, 105) }; 
       loader.load({ model: "mymodel.js", callback: callbackModel }); 
      } 

      function createScene(geometry, x, y, z, b) { 

       zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial()); 
       zmesh.position.set(0, 16, 0); 
       zmesh.scale.set(1, 1, 1); 
       scene.add(zmesh); 
      } 

      function onDocumentMouseMove(event) { 

       mouseX = (event.clientX - windowHalfX); 
       mouseY = (event.clientY - windowHalfY); 
      } 

      function animate() { 

       requestAnimationFrame(animate); 
       render(); 
      } 

      function render() { 

       zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0); 

       webglRenderer.render(scene, camera); 
      } 
</script> 


</body> 
</html>

출처

2012-11-20 digit

Firefox의 오류 콘솔에서 오류 : TypeError : url.split이 함수가 아닙니다. – digit

코드를 테스트 한 결과 문제가 로더 콜백 기능에 있습니다.

var loader = new THREE.JSONLoader(), 
    callbackModel = function(geometry, materials) { createScene(geometry, materials, 90, FLOOR, -50, 105) }; 
loader.load("cubeHelper.js", callbackModel);

을 주목 materials 매개 변수의 추가, 그리고 물론과 같이 createScene의 함수 매개 변수에 materials를 추가 : 대신이 시도 내가 MeshFaceMaterialMeshBasicMaterial로 변경

function createScene(geometry, materials, x, y, z, b) { 
    zmesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 0xff0000 })); 
    zmesh.position.set(0, 16, 0); 
    zmesh.scale.set(1, 1, 1); 
    scene.add(zmesh); 
}

공지 사항이 있기 때문입니다 MeshFaceMaterial과 createScene에 들어오는 것과 같은 머티리얼의 배열이 있습니다. 준비가되면 들어오는 materials에서 머티리얼을 만들고 그 시점에서 적용 할 수 있습니다. 그러나 그것은 당신을 가게 할 것입니다.

출처

2013-08-29 13:51:23

Three.js, Macintosh 디스플레이 3D 모델

답변

관련 문제