原文：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. 你知道Object中有哪些方法及其作用吗？

    一.引言二.Object方法详解1.1.registerNatives()1.2.getClass()1.2.1.反射三种方式:1.3.hashCode()1.4.equals()1.4.clone( ...

  2. Redis-2-五种基本类型及相关命令

    目录 1.字符串类型:string 1.1 命令 1.2 实践 2.散列类型:hash 2.1命令 2.2 实践 3.列表类型:list 3.1 命令 3.2 实践 4.集合类型:set 4.1 命令 ...

  3. java -- Set 用法及特点

    分类专栏: java学习   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/firearr ...

  4. .NET[C#]使用LINQ从List<T>集合中获取最后N条数据记录的方法有哪些？

    https://codedefault.com/2018/using-linq-to-get-the-last-n-elements-of-a-collection-in-csharp-applica ...

  5. thread stack size not set; configure via D:\Program Files\elasticsearch-5.0.0\config\jvm.options or ES_JAVA_OPTS

    抄自:http://blog.csdn.net/leo063/article/details/52994786 thread stack size not set; configure via D:\ ...

  6. C# 通过反射获取winform上的控件

    比如获取Button按钮: System.Reflection.FieldInfo[] fieldInfo = form.GetType().GetFields(System.Reflection.B ...

  7. PIE SDK创建金字塔算法

    1.算法功能简介 为栅格影像建立了金字塔,这些影像便能快速进行显示.除了在屏幕上显示外,金字塔还包含了很多其他信息.如果没有金字塔,那么在显示时就要访问整理栅格数据集,然后进行大量计算来选择哪些栅格像 ...

  8. 记一次CSS反爬

    目标网址:猫眼电影 主要流程 爬取每一个电影所对应的url 爬取具体电影所对应的源码 解析源码,并下载所对应的字体 使用 fontTools 绘制所对应的数字 运用机器学习的方法识别对应的数字 在源码 ...

  9. javascript获取url中的参数值

    javascript的实现代码如下: function QueryString(fieldName) { var urlString = document.location.search; if(ur ...

  10. js中数组的迭代方法

    1.forEach 让数组的每一项做一件事 var arr = [1,2,3,4,5] arr.forEach(function(item,index){ console.log(item) }) 2 ...