原文：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. 手写bind函数

    实现bind函数 参考MDN提供的Polyfill方案 Function.prototype.myBind = function(context){ //这里对调用者做一个判断,如果不是函数类型,直接 ...

  2. ACM 常用 OJ 网址

    ACM 常用 OJ 网址 浙江大学: https://pintia.cn/ 北京大学: http://poj.org/ 杭州电子科技大学: http://acm.hdu.edu.cn/ 中国科技大学: ...

  3. sql server锁表、查询被锁表、解锁被锁表的相关语句

    MSSQL(SQL Server)在我的印象中很容易锁表,大致原因就是你在一个窗口中执行的DML语句没有提交,然后又打开了一个窗口对相同的表进行CRUD操作,这样就会导致锁表.锁表是一种保持数据一致性 ...

  4. 解决SpringBoot无法读取js/css静态资源的新方法

    前言 作为依赖使用的SpringBoot工程很容易出现自身静态资源被主工程忽略的情况.但是作为依赖而存在的Controller方法却不会失效,我们知道,Spring MVC对于静态资源的处理也不外乎是 ...

  5. 【华为云实战开发】8.如何快速搭建C#网站并实现持续集成？【华为云技术分享】

    1 概述 1.1 文章目的 本文通过一个实例介绍如何使用软件开发服务DevCloud完成一个C#Web项目的开发. 1.2 项目详情 1. 项目名称:超级冷笑话网站 2. 项目简介:一个Web网站,包 ...

  6. Qt 的两个许可证区别分析：LGPL 和商业协议

    Qt 的两个许可证区别分析:LGPL 和商业协议 Qt 有两个许可证:LGPL 和商业协议.这两个协议在现在的 Qt 版本中的代码是完全一致的(潜在含义是,Qt 的早期版本,商业版的 Qt 通常包含有 ...

  7. Filebeat与Logstash配置SSL加密通信

    为了保证应用日志数据的传输安全,我们可以使用SSL相互身份验证来保护Filebeat和Logstash之间的连接. 这可以确保Filebeat仅将加密数据发送到受信任的Logstash服务器,并确保L ...

  8. mysql启动时出现ERROR 2003问题的解决方法

    目录 写在前面 问题描述 分析原因 问题解决 写在前面 今天,在打开Navicat Permium 链接MySQL 的时候出现Error 2003 的错误. 遂记录产生的原因以及解决方法. 问题描述 ...

  9. 用友U9 基础使用文件所在目录

    元数据存主位置 D:\yonyou\UBFV50\U9.VOB.Product.Metadata 日志文件位置 D:\yonyou\U9V50\Portal\log UI热插支持文件 D:\yonyo ...

  10. mvc视图双下拉框联动

    html部分的代码 <tr class="trs"> <td class="item1"><div class="ite ...