Three-js-3D模型的自适应大小

wallhaven-423evm.jpg

// -------------------------------------------------------------------
// Boilerplate
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 1, 0);
scene.add(directionalLight);

var geometry = new THREE.BoxGeometry(10, 10, 20);
var material = new THREE.MeshLambertMaterial({
    color: 0x00ff00
});
var obj = new THREE.Mesh(geometry, material);
obj.rotation.x += 0.5;
obj.rotation.y += 0.5;
scene.add(obj);
// -------------------------------------------------------------------

// fit camera to object
var bBox = new THREE.Box3().setFromObject(scene);
var height = bBox.size().y;
var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
var pos = scene.position;

// fudge factor so the object doesn't take up the whole view
camera.position.set(pos.x, pos.y, dist * 1.5);
camera.lookAt(pos);


// -------------------------------------------------------------------
var render = function() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
};
render()
    // -------------------------------------------------------------------
posted @ 2023-02-02 11:01  过好每一天2022  阅读(591)  评论(0)    收藏  举报