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>