Three.js STL模型自适应大小

本例演示如何加载一个STL文件并使调整3D模型相机的视觉位置，以合适的尺寸显示在容器中。

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//model container
var container = document.createElement('div');
document.body.appendChild(container);

//scene
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15);
camera.position.set(3.5, 0.25, 0.6);
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x72645b, 2, 15);

//ground
var plane = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(40, 40),
    new THREE.MeshPhongMaterial({
        color: 0x999999,
        specular: 0x777777,
        shininess: 200
    })
);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -0.5;
scene.add(plane);

plane.receiveShadow = true;

// ASCII file
var loader = new THREE.STLLoader();
loader.load('/uploads/models/150201/Hotel_style.stl', function(geometry) {
    var material = new THREE.MeshPhongMaterial({
        color: 0x565656,
        specular: 0xaa2266,
        shininess: 200
    });

var mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.set(-Math.PI / 2, Math.PI / 2, 0);
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add(mesh);

// 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));
    mesh.position.set(-1.5, -0.25, 0.6);
    mesh.scale.set(0.5 / dist, 0.5 / dist * 1.5, 0.5 / dist);
});

// -------------------------------------------------------------------

// Lights
scene.add(new THREE.AmbientLight(0x777777));

// renderer
renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setClearColor(scene.fog.color, 1);

container.appendChild(renderer.domElement);

//start the animation
animate();

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    cameraTarget = new THREE.Vector3(0, 0, 0);
    var timer = Date.now() * 0.0005;
    //camera.position.x = Math.cos(timer)*3;
    //camera.position.z = Math.sin(timer)*3;
    camera.lookAt(cameraTarget);
    renderer.render(scene, camera);
}

function addShadowedLight(x, y, z, color, intensity) {
    var directionalLight = new THREE.DirectionalLight(color, intensity);
    directionalLight.position.set(x, y, z)
    scene.add(directionalLight);

directionalLight.castShadow = true;
    // directionalLight.shadowCameraVisible = true;

var d = 1;
    directionalLight.shadowCameraLeft = -d;
    directionalLight.shadowCameraRight = d;
    directionalLight.shadowCameraTop = d;
    directionalLight.shadowCameraBottom = -d;

directionalLight.shadowCameraNear = 1;
    directionalLight.shadowCameraFar = 4;

directionalLight.shadowMapWidth = 1024;
    directionalLight.shadowMapHeight = 1024;

directionalLight.shadowBias = -0.005;
    directionalLight.shadowDarkness = 0.15;

}

编译

CSS

HTML

本例演示如何加载一个STL文件并使调整3D模型相机的视觉位置，以合适的尺寸显示在容器中。

编辑器支持Emmet

快捷键

本例演示如何加载一个STL文件并使调整3D模型相机的视觉位置，以合适的尺寸显示在容器中。

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

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：