代码：

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

效果：

three.js 打包为一个组-几个单独的模型的更多相关文章

  1. requirejs 多页面，多js 打包代码，requirejs多对多打包【收藏】

    这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...

  2. requirejs 多页面，多js 打包代码，requirejs多对多打包

    这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...

  3. js进阶正则表达式10-分组-多行匹配-正则对象的属性（小括号作用：分组，将小括号里面的东西看成一个整体，因为量词只对前一个字符有效）（多行匹配：m）（属性使用：reg.global）

    js进阶正则表达式10-分组-多行匹配-正则对象的属性(小括号作用:分组,将小括号里面的东西看成一个整体,因为量词只对前一个字符有效)(多行匹配:m)(属性使用:reg.global) 一.总结 1. ...

  4. 转载 r.js打包经验

    例子1 先是HTML页面 <!DOCTYPE html> <html>     <head>         <title>My App</tit ...

  5. js系列教程1-数组操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...

  6. 从parcel.js打包出错，到拥抱nvm

    去年年底发布的parcel.js在年底可谓是火了一把,短短一个多月的时间在GitHub热门排行榜上名列前茅.因其几乎零配置的易用性,相比Webpack的复杂配置收获了大量关注及好评,甚至有人预言未来大 ...

  7. requirejs 使用实例r.js打包

    在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...

  8. r.js打包

    久闻r.js的大名,但实际没有用它做过任何东西.今天用它时,发现网上许多教程都不对.研究一下,把我的实际经验分享给大家. 例子1 先是HTML页面 <!DOCTYPE html> < ...

  9. Vue.js：安装node js到构建一个vue并启动它

    ylbtech-Vue.js:从安装node js到构建一个vue并启动它 1.返回顶部 1. 1.安装node js 下载地址:http://nodejs.cn/download/2.安装完成后运行 ...

随机推荐

  1. （十五）golang--init函数

    每一个源文件都会包含一个init函数,这个函数会在执行main()执行之前被调用,相当于python中的__init__ 注意细节:(1)如果一个文件同时包含全局变量定义,init函数和main函数, ...

  2. W5500封装

    W5500是韩国一款集成全硬件 TCP/IP 协议栈的嵌入式以太网控制器,W5500同时也是一颗工业级以太网控制芯片,最近发现我们国内也有和W5500 芯片一样芯片 介绍给大家 如下图:

  3. 【MySQL】Mariadb字符集

    Mariadb字符集 如果不设置字符集,可以查看mariadb的字符集的默认设置是latin1. 如下命令,查看Mariadb的默认配置: [root@oradb ~]# /usr/local/mys ...

  4. 通过IP获取MAC地址例子（应用层）

    博客地址:http://home.cnblogs.com/u/zengjianrong/ 由于某种需求,需要获取某个ip的mac地址,在应用层实现例子如下代码. 流程:1. 先遍历arp表,若存在对应 ...

  5. 使用spring jpa hibernate框架时报错：javax.validation.UnexpectedTypeException: HV000030

    错误信息: [#%&*^]20190521121942:497.!react:all.,RctJobExecutor-1#D9AA5167921A464CA9DDA14943545426%NA ...

  6. Sitecore 十大优秀功能

    为客户的需求创建最佳解决方案是我们的主要目标.良好的设计不仅仅是视觉吸引力,还要确保用户体验简单直观.在设计Sitecore网站时,我们始终牢记这一点  . 以下是一些我最喜欢的功能,可以帮助我们使用 ...

  7. .NET设计模式-观察者模式

    Observer(观察者模式) 定义对象间的一种一对多的依赖关系,以便当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动刷新. 说白了就是事件. using System; namespa ...

  8. DevExpress的下拉框控件LookUpEdit的使用、添加item选项值、修改默认显示值

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  9. kindedit,uedit 上传跨域返回

    1.kindedit 跨域上传图片的时候,a.com 上传到b.com接收图片服务器,然后返回图片地址. 2.一般如果不做任何处理是获取不到返回的信息的.原因是跨域了 3.所以一般在上传成功后,在跳转 ...

  10. Extjs 树菜单的自动展开数据的请求

    今天在做extjs开发的时候,在树菜单上遇到了一个坑,也许是我刚接触extjs 不熟的缘故 问题描述:后台设置的树自动展开,但是在前端总是只显示一条数据,但是数据确实都请求到了. 经过几个小时不屑的努 ...