Position camera from Collada file

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.

Editor result

My Result

I am currently making the camera look at 0,0,0 which I am guessing is wrong but I can’t figure out what it should look at. I have tried many times to work through the editor source code to see what it is doing correctly but I must be missing something.

My model
model.dae (4.7 KB)

My code (container is simply a full window DIV)

<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()
                renderer.render(scene, camera);

            });
        }
    </script>

Hi,
I am facing exactly the same issue. I am a beginner with three.js. I did two things to solve the problem:

  1. convert camera position to meters. Although my SketchUp model was defined in meters, the exported collada file was in inches (look at the <asset> section at the top of your file). It seems that the three.js converts well the geometry in meters (I may be wrong) but keeps the camera position in inches. So when you add the camera to your scene, first scale the coordinates to obtain meters.
  2. remove/comment the <up_axis> from your collada file. I don’t know why (again, I am a novice in 3D modelling), but it fixed my problem

It would be great to understand how the three.js editor does everything fine by default.