让Three.js相机使用Sketchup Collada导出中的位置

Question

我在Sketchup中创建了一个非常简单的模型，并将其导出为collada文件。然后，我尝试使用three.js来显示具有从Sketchup导出的相同视图的模型。Sketchup中的视图已经平移和旋转。如果我将模型加载到tree.js编辑器中，并选择skp_camera_Last_Saved_SketchUp_View摄影机，则它将显示为SketchUp中的样子。

编辑器图像

当我使用我的代码加载模型时，相机位置是不正确的

我的结果

很明显，我的相机正在观察0,0,0，我感觉到答案是在这里得到collada模型在three.js中的位置，但我无法使其工作。我也尝试过通过编辑器的源代码工作，但没有成功。

以下是我的代码和型号

<script type="module">
import * as THREE from '../build/three.module.js';
import { ColladaLoader } from '../examples/jsm/loaders/ColladaLoader.js';
let container
let camera, scene, renderer, model;
init(window.innerWidth, window.innerHeight);
function init(imageWidth, imageHeight) {
scene = new THREE.Scene();
var grid1 = new THREE.GridHelper(30, 30, 0x888888);
grid1.material.color.setHex(0x888888);
grid1.material.vertexColors = false;
scene.add(grid1);
const loadingManager = new THREE.LoadingManager(function () { });
const loader = new ColladaLoader(loadingManager);
loader.load('./model.dae', function (collada) {
model = collada.scene;
scene.add(model);
var cameras = [];
for (var i = 0; i < model.children[0].children.length; i++) {
var child = model.children[0].children[i];
if (child.type == "PerspectiveCamera") {
cameras.push(child);
}
}
camera = cameras[0];
camera.aspect = imageWidth / imageHeight;
const axesHelper = new THREE.AxesHelper(115);
scene.add(axesHelper);
const pointlight = new THREE.PointLight(0xffffff, 1);
pointlight.position.set(5, 10, 7.5);
scene.add(pointlight);
renderer = new THREE.WebGLRenderer({ antialias: true,alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(imageWidth, imageHeight);
container = document.getElementById('container');
container.appendChild(renderer.domElement);
var vector = new THREE.Vector3();
camera.lookAt(vector);
camera.updateProjectionMatrix()
var vector = new THREE.Vector3();
//vector.setFromMatrixPosition( model.matrixWorld );
camera.lookAt( vector );                
renderer.render(scene, camera);
});
}
</script>
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.1">
<asset>
<contributor>
<authoring_tool>SketchUp 21.1.332</authoring_tool>
</contributor>
<created>2021-11-18T10:42:11Z</created>
<modified>2021-11-18T10:42:11Z</modified>
<unit meter="0.0254" name="inch" />
<up_axis>Z_UP</up_axis>
</asset>
<library_cameras>
<camera id="ID1" name="skp_camera_Last_Saved_SketchUp_View">
<optics>
<technique_common>
<perspective>
<yfov>35</yfov>
<aspect_ratio>0</aspect_ratio>
<znear>1</znear>
<zfar>1000</zfar>
</perspective>
</technique_common>
</optics>
</camera>
</library_cameras>
<library_visual_scenes>
<visual_scene id="ID2">
<node name="SketchUp">
<instance_geometry url="#ID3">
<bind_material>
<technique_common>
<instance_material symbol="Material2" target="#ID5">
<bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
</instance_material>
</technique_common>
</bind_material>
</instance_geometry>
<node name="skp_camera_Last_Saved_SketchUp_View">
<matrix>0.9163804 -0.1783003 0.3584076 217.3235 0.4003086 0.4081623 -0.8204612 -203.3304 -1.110223e-16 0.8953282 0.445407 171.1284 0 0 0 1</matrix>
<instance_camera url="#ID1" />
</node>
</node>
</visual_scene>
</library_visual_scenes>
<library_geometries>
<geometry id="ID3">
<mesh>
<source id="ID6">
<float_array id="ID9" count="72">109.5625 0 0 0 0 0 0 118.5 0 109.5625 118.5 0 0 0 0 109.5625 0 0 109.5625 0 34.6875 0 0 34.6875 0 118.5 0 0 0 0 0 0 34.6875 0 118.5 34.6875 109.5625 118.5 0 0 118.5 0 0 118.5 34.6875 109.5625 118.5 34.6875 109.5625 0 0 109.5625 118.5 0 109.5625 118.5 34.6875 109.5625 0 34.6875 0 0 34.6875 109.5625 0 34.6875 109.5625 118.5 34.6875 0 118.5 34.6875</float_array>
<technique_common>
<accessor count="24" source="#ID9" stride="3">
<param name="X" type="float" />
<param name="Y" type="float" />
<param name="Z" type="float" />
</accessor>
</technique_common>
</source>
<source id="ID7">
<float_array id="ID10" count="72">0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 -1 0 0 -1 0 0 -1 0 0 -1 0 -1 -0 -0 -1 -0 -0 -1 -0 -0 -1 -0 -0 0 1 0 0 1 0 0 1 0 0 1 0 1 -0 0 1 -0 0 1 -0 0 1 -0 0 0 0 1 0 0 1 0 0 1 0 0 1</float_array>
<technique_common>
<accessor count="24" source="#ID10" stride="3">
<param name="X" type="float" />
<param name="Y" type="float" />
<param name="Z" type="float" />
</accessor>
</technique_common>
</source>
<vertices id="ID8">
<input semantic="POSITION" source="#ID6" />
<input semantic="NORMAL" source="#ID7" />
</vertices>
<polylist count="6" material="Material2">
<input offset="0" semantic="VERTEX" source="#ID8" />
<vcount>4 4 4 4 4 4</vcount>
<p>0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23</p>
</polylist>
</mesh>
</geometry>
</library_geometries>
<library_materials>
<material id="ID5" name="material">
<instance_effect url="#ID4" />
</material>
</library_materials>
<library_effects>
<effect id="ID4">
<profile_COMMON>
<technique sid="COMMON">
<lambert>
<diffuse>
<color>1 1 1 1</color>
</diffuse>
</lambert>
</technique>
</profile_COMMON>
</effect>
</library_effects>
<scene>
<instance_visual_scene url="#ID2" />
</scene>
</COLLADA>

Answer 1

我正面临着完全相同的问题。我是三个.js的初学者。我做了两件事来解决这个问题：

1. 将相机位置转换为米。尽管我的SketchUp模型是以米为单位定义的，但导出的collada文件是以英寸为单位的(请查看文件顶部的<asset>部分(。看起来three.js很好地转换了以米为单位的几何图形(我可能错了(，但保持了以英寸为单位的相机位置。因此，将camera添加到场景中时，首先缩放坐标以获得米。(https://stackoverflow.com/a/16947400/2887058)
2. 从collada文件中删除/注释<up_axis>。我不知道为什么(再说一遍，我是3D建模的新手(，但它解决了我的问题

如果能理解three.js编辑器在默认情况下是如何做到一切正常的，那就太好了。

Answer 2

您不需要使用camera.lookAt((，相机已经从Collada模型中继承了必要的设置。如果只调用camera.updateProjectionMatrix((，则视图将与SketchUp场景的视图相匹配。

如果您更改代码的以下部分：

var vector = new THREE.Vector3();
camera.lookAt(vector);
camera.updateProjectionMatrix()
var vector = new THREE.Vector3();
//vector.setFromMatrixPosition( model.matrixWorld );
camera.lookAt( vector );                
renderer.render(scene, camera);

收件人：

camera.updateProjectionMatrix()             
renderer.render(scene, camera);

相机应与SketchUp匹配。