three.js中文文档学习之通过模块导入

前言

本文主要给大家介绍了关于three.js通过模块导入的相关内容，通过 script 标签导入 three.js 是很好的入门并快速运行的方式，对于长期更新的项目有些不足，比如：

  • 你需要手动调用和引入库里的副本，作为你项目源码的一部分。
  • 更新库的版本是手动的过程
  • 当引入新版本库，你的版本管理差异会与源文件混乱

使用像 NPM 这样的依赖管理能避免这些版本问题的不足。

通过 NPM 安装

three.js 已作为 npm 模块发布，详见：npm。关于npm的卸载与安装大家可以参考这篇文章：http://www.jb51.net/article/90518.htm，这里就不过多介绍了，安装成功后，只需要运行 npm install three， three.js 便会包含在你项目之中。

导入模块

假定你使用Webpack或者 Browserify的打包工具，会允许你在代码中使用 require('modules')引用打包的所有依赖项。

你现在应该能在源码中导入模块并且能按常进行。

var THREE = require('three');
var scene = new THREE.Scene();

你也能运用 ES6导入语法

import * as THREE from 'three';

const scene = new THREE.Scene();

或者你想要导入 three.js 库中的部分，比如导入 Scene:

import {Scene} from 'three';
const scene = new Scene();

警告

目前不能通过在 "examples/js"目录下导入所有文件。这是由于有些文件依赖全局命名空间 THREE 而导致污染。详询 Transform examples/js to support modules #9562.

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • three.js快速入门【推荐】

    Three.js的核心五步就是: 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染. 一般来说我们都把进行渲染操作的软件叫做渲染器. 具体来说要进行下面这些处理. var renderer; function initThree(){ width = document.getElementById("box").clie

  • three.js中文文档学习之创建场景

    什么是Three.js? 如果你正在读这篇文章,你可能对Three.js有一定的了解,那我们来简单地介绍下Three.js是什么. Three.js是一个库,使得WebGL的3D效果在浏览器中运用很容易.而在原始的WebGL中一个简单的立方体会变成数百Javascript和着色器代码的行,而一个Three.js只需要一点点代码. 本节目标是为 three.js 做简介.我们从使用旋转立方体来搭建场景开始.如果遇到困难需要帮助,页面底部有可参考的源码. 一个场景至少需要的三种类型组件 相机/决定哪

  • three.js中文文档学习之如何本地运行详解

    前言 本文属于系列问题,需要的朋友们开始之前可以参考以下的两篇文章: 1.three.js中文文档学习之创建场景 2.three.js中文文档学习之通过模块导入 如果你只是使用程序化的几何体,不需要加载任何材质,网页应该直接从文件系统加载,只需要双击文件管理器中 HTML 文件,应该在你的浏览器能够运行(地址栏长这样子:file:///yourFile.html) 从外部文件加载内容 如果你从外部文件下载模块和材质,由于浏览器的 同源政策 的安全限制,会引发安全异常而加载失败. 有两种解决办法:

  • Three.js基础学习教程

    Three.js基础学习教程

    一.Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://threejs.org/ 2.使用Three.js必备的三个条件 (To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.) 大致意思是使用

  • Three.js快速入门教程

    Three.js快速入门教程

    引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,

  • Three.js基础部分学习

    Three.js基础部分学习

    一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件  <场景 A scene.相机a camera.渲染器 a renderer  三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the

  • three.js中文文档学习之通过模块导入

    前言 本文主要给大家介绍了关于three.js通过模块导入的相关内容,通过 script 标签导入 three.js 是很好的入门并快速运行的方式,对于长期更新的项目有些不足,比如: 你需要手动调用和引入库里的副本,作为你项目源码的一部分. 更新库的版本是手动的过程 当引入新版本库,你的版本管理差异会与源文件混乱 使用像 NPM 这样的依赖管理能避免这些版本问题的不足. 通过 NPM 安装 three.js 已作为 npm 模块发布,详见:npm.关于npm的卸载与安装大家可以参考这篇文章:ht

  • 详解Chai.js断言库API中文文档

    Chai.js断言库API中文文档 基于chai.js官方API文档翻译.仅列出BDD风格的expect/should API.TDD风格的Assert API由于不打算使用,暂时不放,后续可能会更新. BDD expect和should是BDD风格的,二者使用相同的链式语言来组织断言,但不同在于他们初始化断言的方式:expect使用构造函数来创建断言对象实例,而should通过为Object.prototype新增方法来实现断言(所以should不支持IE):expect直接指向chai.ex

  • 使用Python3内置文档高效学习以及官方中文文档

    概述 从前面的对Python基础知识方法介绍中,我们几乎是围绕Python内置方法进行探索实践,比如字符串.列表.字典等数据结构的内置方法,和大量内置的标准库,诸如functools.time.threading等等,而我们怎么快速学习掌握并学会使用这个Python的工具集呢? 我们可以利用Python的内置文档大量资源既可以掌握许多关于Python工具集的基本使用. dir函数 Python中内置的dir函数用于提取某对象内所有属性的方法,,诸如对象的方法及属性 L = [1, 2, 3, 4

  • 详解vue axios中文文档

    axios中文文档 在用Vue做开发的时候,官方推荐的前后端通信插件是axios,Github上axios的文档虽然详细,但是却是英文版.现在发现有个axios的中文文档,于是就转载过来了! 原文地址 : https://github.com/mzabriskie/axios 简介 版本:v0.16.1 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 拦截请求和返回 转化请

  • 基于python-pptx库中文文档及使用详解

    个人使用样例及部分翻译自官方文档,并详细介绍chart的使用 一:基础应用 1.创建pptx文档类并插入一页幻灯片 from pptx import Presentation prs = Presentation() slide = prs.slides.add_slide(prs.slide_layouts[1]) # 对ppt的修改 prs.save('python-pptx.pptx') prs.slide_layouts中一共预存有1-48种,采用第六种为空白幻灯片 例slide_lay

  • Keras官方中文文档:性能评估Metrices详解

    能评估 使用方法 性能评估模块提供了一系列用于模型性能评估的函数,这些函数在模型编译时由metrics关键字设置 性能评估函数类似与目标函数, 只不过该性能的评估结果讲不会用于训练. 可以通过字符串来使用域定义的性能评估函数 model.compile(loss='mean_squared_error', optimizer='sgd', metrics=['mae', 'acc']) 也可以自定义一个Theano/TensorFlow函数并使用之 from keras import metri

  • node.js中优雅的使用Socket.IO模块的方法

    目录 前言 Socket.IO的定义 Socket.IO的优点 node中安装Socket.IO node中使用Socket.IO emit on 在express中引入使用 服务端 客户端 小结 前言 上篇文章中结合websokcet进行了简单的聊天小案例,但是我们可以发现使用ws模块来写代码的时候未免有一些繁琐,需要我们自己去设置type,使用socket.io后事件监听将会十分的简单便捷,很好的弥补了ws模块的缺陷. Socket.IO的定义 Socket.IO是一个WebSocket库,

  • nodejs npm package.json中文文档

    简介 本文档有所有package.json中必要的配置.它必须是真正的json,而不是js对象. 本文档中描述的很多行为都受npm-config(7)的影响. 默认值 npm会根据包内容设置一些默认值. 复制代码 代码如下: "scripts": {"start": "node server.js"} 如果包的根目录有server.js文件,npm会默认将start命令设置为node server.js. "scripts":

随机推荐