原文：https://blog.csdn.net/qq_30100043/article/details/78921224

代码：

<!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>

    <div id="info">

        <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 3DS loader

    </div>

    <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 cubeA = new THREE.Mesh(geometry, material);//网格1

            cubeA.position.set(10, 1, 0);

            var cubeB = new THREE.Mesh(geometry, material);//网格2

            cubeB.position.set(10, -1, 0);

            var group = new THREE.Group();

            group.add(cubeA);

            group.add(cubeB);

            scene.add(group);

            //组 居中

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

            setTimeout(function () {

                var box = new THREE.Box3();

                //通过传入的object3D对象来返回当前模型的最小大小，值可以使一个mesh也可以使group

                box.expandByObject(group);

                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;

                group.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. bootstrap-modal.js 居中问题

    上下居中 引用 bootstrap-modalmanager.js   左右居中 修改 bootstrap-modal.js 中 this.$element.css('margin-left', '' ...

  2. three.js 居中-模型

    api: 代码: <!DOCTYPE html> <html lang="en"> <head> <title>three.js w ...

  3. js的基本分类（0.1）

    js分内嵌,内联,外部样式表三种, js的组成分,ES(变量,函数,对象,数组,判断,循环),BOM(浏览器对象模型),DOM(文档对象模型), js的五种输出语句,alert(警告框),confir ...

  4. Bootstrap--常用及实例合集

    栅格系统 1. row必须放到container和container-fluid里面        2. 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row ...

  5. ThoughtWorks 2017技术雷达

    前言: ThoughtWorks人酷爱技术.我们对技术进行构建.研究. 测试.开源.记述,并始终致力于对其进行改进-以求造福 大众.我们的使命是支持卓越软件并掀起IT革命.我们创建 并分享Though ...

  6. 使用react全家桶制作博客后台管理系统

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...

  7. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  8. 前端HTML基础之form表单

    目录 一:form表单 1.form表单功能 2.表单元素 二:form表单搭建(注册页面) 1.编写input会出现黄色阴影问题 三:完整版,前端代码(注册页面) 四:type属性介绍 1.inpu ...

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

随机推荐

  1. Windwos Server 2016 远程桌面授权

    https://blog.csdn.net/hanzheng260561728/article/details/80443135 第二步激活客户的的时候,注意事项

  2. Java学习清单

    转自: csdn/zuochao_2013/article/details/76795164   ·   Java基础部分 *Java基础才是重中之重,只有基础打牢了,学习各种框架才能游刃有余. 1, ...

  3. python__系统 : 线程池

    参考文档: https://www.jianshu.com/p/b9b3d66aa0be 使用  ThreadPoolExecutor  类,  as_completed 是迭代器, 如果有任务执行完 ...

  4. navicat for mongodb12破解

    网上搜了一圈,都不管用.大多都有病毒,最后还是通过搜索github解决问题. 破解文件:https://github.com/DoubleLabyrinth/navicat-keygen/releas ...

  5. dotnet学习系列

    这里整理下之前关于dotnet方面的文章索引. 一.dotnet core 系列 dotnet core 微服务教程 asp.net core 系列之并发冲突 asp.net core 系列之中间件进 ...

  6. MailKit/MimeKit 发送邮件

    MimeKit / MailKit 支持最新的国际化的电子邮件标准,是.NET 中为一个支持完整支持这些标准电子邮件库,最近正式发布了1.0版本.如果你想做所有与的电子邮件相关的事情,看看 MimeK ...

  7. 在 Windows 上的 Visual Studio 中使用 Python

    地址:https://docs.microsoft.com/zh-cn/visualstudio/python/tutorial-working-with-python-in-visual-studi ...

  8. codeforces #577(Div.2)

    codeforces #577(Div.2) A  Important Exam A class of students wrote a multiple-choice test. There are ...

  9. 强化Linux 服务器的7个步骤

    这篇入门文章将向你介绍基本的 Linux 服务器安全知识.虽然主要针对 Debian/Ubuntu,但是你可以将此处介绍的所有内容应用于其他 Linux 发行版.我也鼓励你研究这份材料,并在适用的情况 ...

  10. EF自动创建数据库步骤之四(启用数据库初始器)

    在创建完DBIfNotExistsInitializer数据库初始化器类后,需要在程序每一次访问数据库前,告诉EF使用该初始化器进行初始化. 代码如下 : Database.SetInitialize ...