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. （三）golang--执行流程分析

    XXX.go--go build XXX.go--XXX.exe XXX.go--go run XXX.go 两种方式的区别:(1)如果我们先编译生成了可执行文件,那么我们可以将该可执行文件拷贝到没g ...

  2. 通过IP获取MAC地址例子（内核层）

    博客地址:http://home.cnblogs.com/u/zengjianrong/ 在内核处理此流程,反而更加简单些,代码如下: #include <net/arp.h> #incl ...

  3. RESTful API 最佳实践（转）

    原文:http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html 阮一峰老师的文章,他的文章把难懂的东西讲的易懂 RE ...

  4. Web应急：网站被批量挂黑页

    作为一个网站管理员,你采用开源CMS做网站,比如dedecms,但是有一天,你忽然发现不知何时,网站的友情链接模块被挂大量垃圾链接,网站出现了很多不该有的目录,里面全是博彩相关的网页.而且,攻击者在挂 ...

  5. gitbub高效查找优秀项目

    in:name example   名字中带有example的项目 in:readme example 在readme文件带有example的项目 in:description example 描述里 ...

  6. MAC安装Node.js

    官网下载Node.js Node.js v10.16.3 to /usr/local/bin/node • npm v6.9.0 to /usr/local/bin/npm Make sure tha ...

  7. 关于ipad设备滚动条无法滚动的解决办法

    天做一个功能在ipad设备上滚动条无法滚动,于是百度了下,在需要产生滚动的div上面加入以下css(-webkit-overflow-scrolling:touch,overfolw:scroll), ...

  8. C# vb .NET读取识别条形码线性条码gs1128

    gs1-128,ean-128是比较常见的条形码编码规则类型的一种.如何在C#,vb等.NET平台语言里实现快速准确读取该类型条形码呢?答案是使用SharpBarcode! SharpBarcode是 ...

  9. 添加wcf服务引用,无法签出当前文件

    写了一些wcf服务接口,使用控制台可以正常启动服务,想要测试一下,新建项目添加服务引用,提示:“无法签出当前文件.该文件可能为只读或已锁定,或者您需要手动签出它.” 在网上找了找,有说可能是因为源代码 ...

  10. Python - 基础语法 - 第一天

    编码 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 标识符 第一个字符必须是字母表中字母或下划线 _ . 标识符的其他的部分由字母.数字和下划线 ...