three.jsとcolladaローダーを使用してcolladaファイルを読み込もうとしています。three.jsのドキュメントを活用していますが、ファイルを画面に表示できないようです。私が達成したいのは、アニメーションを必要としない、シーンへのcolladaファイルの非常に基本的なインポートです。私が受け取っているエラーは次のとおりです。
未処理のSurfaceprop：format_hint
タイプlookatの変換を変換できません
XHR出力は.daeファイルの100％の負荷を示しており、ブラウザーで保存されたファイルの場所を参照してXMLとして表示できます。現在、IISでmimeタイプをapplication / xmlに設定しています。
これが私の現在のコードです。私は何が欠けていますか？：
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - collada loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="scripts/three.min.js"></script>
<script src="scripts/ColladaLoader.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Box Example</h1>
<p>This example loads an collada file</p>
<div id="webGL-container"></div>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xff0000);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 40;
// instantiate a loader
var loader = new THREE.ColladaLoader();
loader.load(
// resource URL
'models/box.dae',
// Function when resource is loaded
function (collada) {
scene.add(collada.scene);
},
// Function called when download progresses
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}
);
camera.lookAt(scene.position);
renderer.render(scene, camera);
$("#webGL-container").append(renderer.domElement);
</script>
</body>
</html>
提供されたアドバイスによると、ここにバージョン2があります。
var scene;;
var camera;
var renderer;
var loader;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor();
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 40;
// instantiate a loader
loader = new THREE.ColladaLoader();
loader.load(
// resource URL
'models/box.dae',
// Function when resource is loaded
function (collada) {
scene.add(collada.scene);
},
// Function called when download progresses
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}
);
camera.lookAt(scene.position);
$("#webGL-container").append(renderer.domElement);
};
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
init();
animate();
更新3：コアの.DAEファイルをレンダリングすることができましたが、テクスチャがありません（現在、ボックスはすべて黒で表示されています）。
var scene;
var camera;
var renderer;
var box;
// instantiate a loader
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('models//box.dae', function (collada) {
box = collada.scene;
box.traverse(function (child) {
if (child instanceof THREE.SkinnedMesh) {
var animation = new THREE.Animation(child, child.geometry.animation);
animation.play();
}
});
box.scale.x = box.scale.y = box.scale.z = .2;
box.updateMatrix();
init();
animate();
});
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xdddddd);
renderer.setSize(window.innerWidth, window.innerHeight);
scene.add(box);
camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 40;
camera.lookAt(scene.position);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
$("#webGL-container").append(renderer.domElement);
}
javascriptの非同期ロードを実行しています。呼び出すrenderer.render()と、モデルがまだダウンロードされていないため、シーンはまだ空です。持っているコードをinit()関数に入れてから、関数を作成animate()して次のように呼び出します。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
init();
animate();
変数、、sceneはグローバルcameraにrendererする必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加