代码:



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