原文：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. [数据结构 - 第8章] 查找之哈希表（C语言实现）

    首先是需要定义一个哈希表的结构以及一些相关的常数.其中 HashTable 就是哈希表结构.结构当中的 elem 为一个动态数组. #define HASHSIZE 12 // 定义哈希表长为数组的长 ...

  2. Python连载28-logging设置&logger解析

    一.logging模块讲解 1.函数:logging.basicConfig() 参数讲解: (1)level代表高于或者等于这个值时,那么我们才会记录这条日志 (2)filename代表日志会写在这 ...

  3. torch_09_GAN

    1.生成对抗网络 让两个网络相互竞争,通过生成网络来生成假的数据,对抗网络通过判别器判别真伪,最后希望生成网络生成的数据能够以假乱真骗过判别器 2.生成模型 就是‘生成’样本和‘真实’的样本尽可能的相 ...

  4. linux 开机mount nfs

    mount -t nfs 10.208.1.235:/home/gis/bigrasterdata/mxds/uploads  /usr/local/website/upload/pythonmxds ...

  5. MD5加密实现方法

    在这里给大家分享一个超级简单的md5加密实现方法 如下: 引用命名空间 using System.Security.Cryptography; using System.Text; C#代码 publ ...

  6. Android Studio出现Wait for build to finish解决办法

    公司用钉钉打卡,我作弊哈哈,买了个大牛助手. 刚续费包年,开发商竟然跑路了.服务器连不上,不能用了,心血来潮想说能否自己破解了.好家伙需要学的还真不少,首先还要从安卓开发学起... 刚装了Androi ...

  7. 解决：The web application [] registered the JDBC driver [] but failed to unregister it when the web application was stopped. To prevent a memory leak, the JDBC Driver has been forcibly unregistered.

    问题描述 在将Spring Boot程序打包生成的war包部署到Tomcat后,启动Tomcat时总是报错,但是直接在IDEA中启动Application或者用"java -jar" ...

  8. delphi实现窗体闪烁功能

    delphi实现窗体闪烁功能 以前做窗口闪动时都没有考虑到让任务栏上的按钮闪动的问题, 现在一个客户需要任务栏按钮闪动,发现以前使用的flashwindow不能达到要求了, 查找了一下,找到flash ...

  9. 10. Javascript 前后端数据加密

    为了加强项目的接口安全程度,需求如下 var options = { // 前端需要传送的数据加密 data: { abc: 123, bcd: 123, cds: '撒旦教付货款12313', }, ...

  10. android studio学习----构建（gradle ）依赖时使用动态依赖的问题

    今天在看Dan Lew大神的博客发现最新的文章就是 “Don't use dynamic versions for your dependencies” Everyone, please, to st ...