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

本例演示如何使3D模型以合适的尺寸显示在容器中。

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 11902
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// -------------------------------------------------------------------
// 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()
    // -------------------------------------------------------------------

编译

CSS

HTML

本例演示如何使3D模型以合适的尺寸显示在容器中。

编辑器支持Emmet

快捷键

本例演示如何使3D模型以合适的尺寸显示在容器中。

WebGL Three.js带音效的飞行控制小游戏（gltf模型）

WebGL Three.js海量粒子随机大小立方体模型着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：