代码:

<!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. pandas的使用(6)离散化和合并

    pandas的使用(6)离散化和合并

  2. xunsearch强制刷新

    $index = $xs->index; $index->flushLogging(); 等价于 util/Indexer.php --flush-log demo

  3. Aladdin and the Flying Carpet LightOJ 1341 唯一分解定理

    题意:给出a,b,问有多少种长方形满足面积为a,最短边>=b? 首先简单讲一下唯一分解定理. 唯一分解定理:任何一个自然数N,都可以满足:,pi是质数. 且N的正因子个数为(1+a1)*(1+a ...

  4. 彩虹表(rainbow table)

    前记 MD5的全称是Message-Digest Algorithm 5(信息-摘要算法): 特点是不可逆的,一般解密不了:那有没有想过,为什么各种工具网站都可以进行MD5解密呢?https://ww ...

  5. 脱离 WebView 的通信 JavaScriptCore

    JavascriptCore JavascriptCore 一直作为 WebKit 中内置的 JS 引擎使用,在 iOS7 之后,Apple 对原有的 C/C++ 代码进行了 OC 封装,成为系统级的 ...

  6. 【07】Kubernets:资源清单(控制器 - DaemonSet)

    写在前面的话 前面讲解了 Pod / ReplicaSet / Deployment 的资源清单,我们这里谈一下 DaemonSet 的资源清单. 之前说过,DaemonSet 控制器能够保证资源在每 ...

  7. 《 .NET并发编程实战》实战习题集 - 2 - 替换算法

    先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.

  8. 如何在windows 7 上使用docker

    在window7上面本来是支持使用docker的, 但是我们可以通过安装docker toolbox来实现在windows7上使用docker. 参考网址: https://docs.docker.c ...

  9. 使用xdebug对php做性能分析调优

    作为PHP程序员我们或多或少都了解或使用过xdebug.此文章记录安装和配置xdebug,以及如何使用它来分析php程序. 我的机器环境: mac, php 安装 xdebug 推荐使用 pecl 安 ...

  10. Laravel处理session(会话)的方法详解

    在Web应用程序中,有必要识别跨越请求的用户并为每个用户保存数据,为此,像Laravel这样的框架提供了一种称为会话的机制.本篇文章就来为大家介绍关于Laravel处理session(会话)的方法. ...