ColladaLoader Three.js 未在 canvas 上呈现任何内容

Question

我目前正在处理一个项目，我可以看到一切都在按应有的方式加载，并且我一直在阅读 Three.js 文档以了解出了什么问题，但是我尝试过的任何事情都没有奏效。

通过查看控制台，我可以看到 Collada 文件加载正常，进度显示“100% 已加载”。

我可以看到 canvas 本身已经加载，canvas 的颜色也已加载。

我还可以通过添加 console.log()

看到 canvas 动画正在运行

请看下面的代码，希望你们能对我的黑暗情况有所了解。

jQuery(window).load(function($){
var w = jQuery('.topSection .design').width();
var h = jQuery('.topSection .design').height();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, w/h, 1, 1000);
var renderer = new THREE.WebGLRenderer();
var loader = new THREE.ColladaLoader();
var box; 

function init() {
    loader.load('definition3D.dae', function (result) {
            scene.add(result.scene);
            camera.lookAt(scene.position);
        }, function (xhr) {
            console.log( Math.ceil(xhr.loaded / xhr.total * 100) + '% loaded' );
        }
    );

    renderer.setClearColor(0xdddddd);
    renderer.setSize(w, h);

    jQuery('.topSection .design').append(renderer.domElement);
    console.log(loader);
}

var animate = function () {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
};
init();
animate();

});

提前致谢

Answer 1

如果您没有指定相机位置并且您的模型的中心位于 0,0,0，那么您的两个元素都在同一位置，如果 collada material 不是双面的，您可能看不到任何东西。

首先尝试将相机移离模型其次，您可以使用助手 BoundingBoxHelper 查看网格（或比例）的真实位置。

var bbox = new THREE.BoundingBoxHelper( result.scene, 0xff0000);
   bbox.update();
scene.add( bbox );

所以你可以看看你的模型是否有错误的中心或非常小的尺寸。

ColladaLoader Three.js 未在 canvas 上呈现任何内容

ColladaLoader Three.js not rendering anything on the canvas

3d

jquery

rendering

collada

three.js