I have created a very simple model in Sketchup and exported it as a collada file. I am then trying to get three.js to display the model with the same view that was exported from Sketchup. The view in Sketchup had been panned and rotated. If I load the model into the tree.js editor and select the skp_camera_Last_Saved_SketchUp_View camera then it appears as it did in Sketchup.
When I load the model using my code the camera position is incorrect
It is obvious that my camera is looking at 0,0,0 and I sense that the answer is here getting position of collada model in three.js but I can't make it work. I have also tried to work through the editor source code to no avail.
Below is my code and model
<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>
