three.js 打包为一个组-几个单独的模型

代码:

<!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(0, 1, 0);

            var cubeB = new THREE.Mesh(geometry, material);//网格2
            cubeB.position.set(0, -1, 0);

            var group = new THREE.Group();
            group.add(cubeA);
            group.add(cubeB);

            scene.add(group);



            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>

效果:

原文地址:https://www.cnblogs.com/guxingy/p/11956390.html