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. Knative Serving 进阶: Knative Serving SDK 开发实践

    作者 | 阿里云智能事业群技术专家 牛秋霖(冬岛) 导读:通过前面的一系列文章你已经知道如何基于 kubectl 来操作 Knative 的各种资源.但是如果想要在项目中集成 Knative 仅仅使用 ...

  2. Harmonious Army

    Harmonious Army Now, Bob is playing an interesting game in which he is a general of a harmonious arm ...

  3. 『Norma 分治』

    Norma Description Input Format 第1行,一个整数N: 第2~n+1行,每行一个整数表示序列a. Output Format 输出答案对10^9取模后的结果. Sample ...

  4. 【03】Kubernets：K8S 操作入门

    写在前面的话 经过上一节,我们顺利将 K8S 集群搭建了起来,在其中我也简单的谈了一下关于 K8S 的网络.那么这一节我们主要谈谈如何来简单的使用 K8S 的命令.当然这些命令有很多,我们只是通过一个 ...

  5. Blend 多文本控件介绍

    原文:Blend 多文本控件介绍 多文本控件 RichTextBox FlowDocumentScrollViewer FlowDocumentPageViewer FlowDocumentReade ...

  6. WPF 精修篇 获取系统颜色和字体样式

    原文:WPF 精修篇 获取系统颜色和字体样式 看效果 <Grid> <Rectangle Fill="{DynamicResource {x:Static SystemCo ...

  7. MVC+Ninject+三层架构+代码生成 -- 总结（三、實體類）

    一.動軟代碼生成器生成 實體類 2.VS視圖--實體類,其中Condition文件夾是存放 搜索的分頁信息 using System; using System.Collections.Generic ...

  8. .net core启用Swagger

    启用 Swagger 页面    官方文档推荐两种框架:Swashbuckle 和 NSwag,这里使用 Swashbuckle 来生成接口文档. 目录 安装包 添加服务 配置中间件 添加 UI 设置 ...

  9. NoSql的对比以及键值对的存储方式(为什么速度特别快)

    什么是NoSql NoSQL(Not Only SQL),泛指非关系型的数据库,是对不同于传统的关系型数据库的数据库管理系统的统称,强调Key-Value Stores和文档数据库的优点.为了解决大规 ...

  10. .net H5微信，支付宝充值

    using clientpay.Data.AlipayConfig; using clientpay.Data.BLL; using clientpay.Data.Entity; using Aop. ...