Question

我在Blender上完成了几个项目，并决定使用threejs显示其中一个，但是对象不显示。使用关键帧动画加载JSON文件的正确方法是什么？

Here is the specific JSON file that I want to load

以及我正在使用的代码的摘录：

var mesh;
function initMesh() {
var loader = new THREE.JSONLoader();
loader.load('./ocean.json', function(geometry, materials) {
    mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
    mesh.scale.x = 0.75;
    mesh.scale.y = 1;
    mesh.scale.z = 0.75;
    scene.add(mesh);
}, undefined, function (e) {console.log('ERROR: ',e )});

Answer 1

我建议从他们的编辑开始： https://threejs.org/editor/

这里有GUI，你可以导入.json，.obj等。这是一个快速查看你做了什么，你可以添加灯光，玩材料，添加自定义脚本等的方法。例如，你可以加载一些例子，删除默认对象，导入模型，按播放，如果你喜欢你看到的只是点击发布。它将下载整个项目，您可以上传到您的服务器，这可以作为未来工作的基础。

快速启动它是完美的，因为它有效，并会激励您进一步调查和学习。

我知道这不是问题的直接答案，但我一直在那里，看到所有这些加载器不工作是令人沮丧的，因为你没有选择所有正确的复选框从搅拌机出口或出于任何原因（可能有很多）。

首先尝试编辑，弄清楚它是如何工作的并继续前进。只是一个建议

Answer 2

您需要渲染它。

var scene, camera, renderer, controls;

// create the stats
stats = createStats();
//document.body.appendChild(stats.domElement);

scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
camera = new THREE.PerspectiveCamera(2.5, window.innerWidth / 
window.innerHeight, 1, 1000);


renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//EventListener method Starts...
document.addEventListener('message', function(e) {
    let message = JSON.parse(e.data);
      if(message.type === 'xyz.json' || message.type === 'abc.json' || message.type === 'mno.json') {
        let modelName = `model/${message.type}`
        var objectLoader = new THREE.ObjectLoader();
        objectLoader.load(modelName, function(obj) {
          scene.add(obj);
          render();
          /* if you are using react-native below code is to send even to react-native code else it is not required.
          awaitPostMessage();
          window.postMessage(JSON.stringify({
            type: 'READY_TO_RENDER'
          }), "*");
          */
        });
      }
 });//EventListener method Ends Here...


function render() {
  renderer.render(scene, camera);
}

如何在Threejs

2 个答案: