api：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <title>three.js webgl - loaders - 3DS loader</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <link type="text/css" rel="stylesheet" href="/three.js/main.css">

</head>

<body>

    <script type="module">

        //注意：

        //TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js，特别注意引用的路径

        import * as THREE from '/three.js/build/three.module.js';

        import { TrackballControls } from '/three.js/jsm/controls/TrackballControls.js';

        var container, controls;

        var camera, scene, renderer;

        init();

        animate();

        function resize() {

            camera.aspect = window.innerWidth / window.innerHeight;

            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function animate() {

            controls.update();

            renderer.render(scene, camera);

            requestAnimationFrame(animate);

        }

        function init() {

            container = document.createElement('div');

            document.body.appendChild(container);

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//

            camera.position.z = 20;

            camera.position.x = 20;

            scene = new THREE.Scene();

            var axis = new THREE.AxisHelper(3);//显示三维坐标系

            scene.add(axis);

            var ambient = new THREE.AmbientLight(0xffffff);//环境光

            scene.add(ambient);

            var geometry = new THREE.BoxBufferGeometry(1, 1, 1);//形状

            var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });//材质

            var mesh = new THREE.Mesh(geometry, material);//创建网格：网格 = 形状 + 材质

            mesh.position.set(2, -2, 2);//设置网格的位置

            scene.add(mesh);//将网格添加到场景

            //模型居中

            alert('3秒后模型自动居中！');

            setTimeout(function () {

                mesh.geometry.computeBoundingBox();

                var box = mesh.geometry.boundingBox.clone();

                var mdlen = box.max.x - box.min.x;

                var mdwid = box.max.z - box.min.z;

                var mdhei = box.max.y - box.min.y;

                var centerpoint = new THREE.Vector3();

                var x1 = box.min.x + mdlen / 2;

                var y1 = box.min.y + mdhei / 2;

                var z1 = box.min.z + mdwid / 2;

                mesh.position.set(-x1, -y1, -z1);

            }, 3000);

            renderer = new THREE.WebGLRenderer();

            renderer.setPixelRatio(window.devicePixelRatio);

            renderer.setSize(window.innerWidth, window.innerHeight);

            container.appendChild(renderer.domElement);

            controls = new TrackballControls(camera, renderer.domElement);

            window.addEventListener('resize', resize, false);

        }

    </script>

</body>

</html>

居中前：

居中后：

three.js 居中-模型的更多相关文章

  1. JS线程模型&Web Worker

    js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...

  2. js盒子模型

    1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElem ...

  3. JS盒模型

    JS盒模型 ***** 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue('width')) parseIn ...

  4. Tensoflw.js - 02 - 模型与内存管理（易懂）

    Tensoflw.js - 02 - 模型与内存管理(易懂) 参考 W3Cschool 文档:https://www.w3cschool.cn/tensorflowjs/ 本文主要翻译一些英文注释,添 ...

  5. 深入浅析Node.js单线程模型

    Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这 ...

  6. Node.js事件驱动模型

    一.传统线程网络模型 在了解Node.js事件驱动模型之前,我们先了解一下传统的线程网络模型,请求进入web服务器(IIS.Apache)之后,会在线程池中分配一个线程来线性同步完成请求处理,直到请求 ...

  7. 关于js盒子模型的知识梳理

    盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...

  8. js 盒子模型与盒子偏移量

    js 盒子模型: 通过js中提供的一系列属性和方法获取页面中元素的样式信息值. 一.client系类—>只读属性不可设置 (当前元素的私有属性,和内容溢出没关系,如果给容器设置了高度,就采用设置 ...

  9. three.js 居中-组

    原文:https://blog.csdn.net/qq_30100043/article/details/78921224 代码: <!DOCTYPE html> <html lan ...

随机推荐

  1. lombok的使用以及其中的坑

    1.lombok踩坑与思考 https://www.cnblogs.com/heyonggang/p/8638374.html 2.Lombok介绍.使用方法和总结 https://www.cnblo ...

  2. 动手学深度学习1- pytorch初学

    pytorch 初学 Tensors 创建空的tensor 创建随机的一个随机数矩阵 创建0元素的矩阵 直接从已经数据创建tensor 创建新的矩阵 计算操作 加法操作 转化形状 tensor 与nu ...

  3. SpringBoot第二篇：配置文件详解一

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/10837594.html 版权声明:本文为博主原创文章,转载请附上博文链接! 前言   Sprin ...

  4. 如何定时查询某线程的CPU执行时间

    #!/bin/bash pid=$(ps -T -p $(pgrep xxx) | grep xxx | gawk -F" " '{print $2}') if [ -z $pid ...

  5. MySQL 中获取用户表、用户视图、用户表中列信息

    直接贴代码了: /// <summary> /// MySql 数据库维护中心 /// </summary> public class MySqlDbMaintenance:D ...

  6. WPF 精修篇 WPF嵌入Winfrom控件

    原文:WPF 精修篇 WPF嵌入Winfrom控件 先增加DLL 支持 使用  WindowsFormsHost 来加载Forms的控件 引用命名空间 xmlns:forms="clr-na ...

  7. Message "'OFFSET' 附近有语法错误。\r\n在 FETCH 语句中选项 NEXT 的用法无效。" 解决办法 EntityFrameworkCore

    由于新版的EntityFrameworkCore默认使用的是SqlServer2012或以上版本的Sql语法分页,来提高性能. 所以使用数据库的版本如果低于2012(如Sqlserver2008)需要 ...

  8. 使用vue导出excel文件

    今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是 ...

  9. tomcat采坑

    1. tomcat采坑 1.1. 采坑 今天又踩了个以前踩过的坑,运维系统迁移到docker,使用的tomcat版本是tomcat8,而原来的版本是tomcat7.0.53,导致的结果就是系统间请求一 ...

  10. JavaWeb 过滤敏感词汇

    提交的表单数据,常常要检查有没有敏感词汇,如果有,需要给出提示,或者替换为*. 检查.替换敏感词汇有3种常用的方式 (1)在Servlet中操作. (2)在Filter中先检查.如果要替换敏感词汇,r ...