首頁 探索 說明
登入
javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git
2
0
複刻 0
檔案 問題管理 0 Wiki
瀏覽代碼

Merge pull request #16799 from Mugen87/dev34

Examples: Ensure CSS examples use modules.
Mr.doob 6 年之前
父節點
8d8ff4d3d9 6e0736b1f0
當前提交
9e072bd6f7
共有 9 個文件被更改，包括 216 次插入 和 155 次删除
分割檢視 顯示文件統計
  1. 35 25
      examples/css2d_label.html
  2. 37 29
      examples/css3d_molecules.html
  3. 37 26
      examples/css3d_orthographic.html
  4. 17 12
      examples/css3d_panorama.html
  5. 15 11
      examples/css3d_panorama_deviceorientation.html
  6. 21 15
      examples/css3d_periodictable.html
  7. 26 17
      examples/css3d_sandbox.html
  8. 13 9
      examples/css3d_sprites.html
  9. 15 11
      examples/css3d_youtube.html

+ 35 - 25
examples/css2d_label.html
查看文件 

@@ -17,18 +17,28 @@
 
 	<body>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/renderers/CSS2DRenderer.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AxesHelper,
 
+				Clock,
 
+				DirectionalLight,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				TextureLoader,
 
+				Vector2,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
 
 
 			var camera, scene, renderer, labelRenderer;
 
 
-			var clock = new THREE.Clock();
 
-			var textureLoader = new THREE.TextureLoader();
 
+			var clock = new Clock();
 
+			var textureLoader = new TextureLoader();
 
 
 			var earth, moon;
 
 
@@ -40,38 +50,38 @@
 
 				var EARTH_RADIUS = 1;
 
 				var MOON_RADIUS = 0.27;
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.set( 10, 5, 20 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
 
+				var dirLight = new DirectionalLight( 0xffffff );
 
 				dirLight.position.set( 0, 0, 1 );
 
 				scene.add( dirLight );
 
 
-				var axesHelper = new THREE.AxesHelper( 5 );
 
+				var axesHelper = new AxesHelper( 5 );
 
 				scene.add( axesHelper );
 
 
 				//
 
 
-				var earthGeometry = new THREE.SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
 
-				var earthMaterial = new THREE.MeshPhongMaterial( {
 
+				var earthGeometry = new SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
 
+				var earthMaterial = new MeshPhongMaterial( {
 
 					specular: 0x333333,
 
 					shininess: 5,
 
 					map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
 
 					specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),
 
 					normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),
 
-					normalScale: new THREE.Vector2( 0.85, 0.85 )
 
+					normalScale: new Vector2( 0.85, 0.85 )
 
 				} );
 
-				earth = new THREE.Mesh( earthGeometry, earthMaterial );
 
+				earth = new Mesh( earthGeometry, earthMaterial );
 
 				scene.add( earth );
 
 
-				var moonGeometry = new THREE.SphereBufferGeometry( MOON_RADIUS, 16, 16 );
 
-				var moonMaterial = new THREE.MeshPhongMaterial( {
 
+				var moonGeometry = new SphereBufferGeometry( MOON_RADIUS, 16, 16 );
 
+				var moonMaterial = new MeshPhongMaterial( {
 
 					shininess: 5,
 
 					map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
 
 				} );
 
-				moon = new THREE.Mesh( moonGeometry, moonMaterial );
 
+				moon = new Mesh( moonGeometry, moonMaterial );
 
 				scene.add( moon );
 
 
 				//
 
@@ -80,7 +90,7 @@
 
 				earthDiv.className = 'label';
 
 				earthDiv.textContent = 'Earth';
 
 				earthDiv.style.marginTop = '-1em';
 
-				var earthLabel = new THREE.CSS2DObject( earthDiv );
 
+				var earthLabel = new CSS2DObject( earthDiv );
 
 				earthLabel.position.set( 0, EARTH_RADIUS, 0 );
 
 				earth.add( earthLabel );
 
 
@@ -88,24 +98,24 @@
 
 				moonDiv.className = 'label';
 
 				moonDiv.textContent = 'Moon';
 
 				moonDiv.style.marginTop = '-1em';
 
-				var moonLabel = new THREE.CSS2DObject( moonDiv );
 
+				var moonLabel = new CSS2DObject( moonDiv );
 
 				moonLabel.position.set( 0, MOON_RADIUS, 0 );
 
 				moon.add( moonLabel );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
-				labelRenderer = new THREE.CSS2DRenderer();
 
+				labelRenderer = new CSS2DRenderer();
 
 				labelRenderer.setSize( window.innerWidth, window.innerHeight );
 
 				labelRenderer.domElement.style.position = 'absolute';
 
 				labelRenderer.domElement.style.top = 0;
 
 				document.body.appendChild( labelRenderer.domElement );
 
 
-				var controls = new THREE.OrbitControls( camera, labelRenderer.domElement );
 
+				var controls = new OrbitControls( camera, labelRenderer.domElement );
 
 
 			}

+ 37 - 29
examples/css3d_molecules.html
查看文件 

@@ -57,11 +57,6 @@
 
 		</style>
 
 	</head>
 
 	<body>
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
 
-		<script src="js/renderers/CSS3DRenderer.js"></script>
 
-		<script src="js/loaders/PDBLoader.js"></script>
 
-
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - molecules</div>
 
 		<div id="topmenu">
 
@@ -69,17 +64,30 @@
 
 		</div>
 
 		<div id="menu"></div>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				Color,
 
+				PerspectiveCamera,
 
+				Matrix4,
 
+				Object3D,
 
+				Scene,
 
+				Vector3
 
+			} from "../build/three.module.js";
 
+
 
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
+			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
 
+			import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
 
+
 
 			var camera, scene, renderer;
 
 			var controls;
 
 			var root;
 
 
 			var objects = [];
 
-			var tmpVec1 = new THREE.Vector3();
 
-			var tmpVec2 = new THREE.Vector3();
 
-			var tmpVec3 = new THREE.Vector3();
 
-			var tmpVec4 = new THREE.Vector3();
 
-			var offset = new THREE.Vector3();
 
+			var tmpVec1 = new Vector3();
 
+			var tmpVec2 = new Vector3();
 
+			var tmpVec3 = new Vector3();
 
+			var tmpVec4 = new Vector3();
 
+			var offset = new Vector3();
 
 
 			var visualizationType = 2;
 
 
@@ -104,7 +112,7 @@
 
 				"Graphite": "graphite.pdb"
 
 			};
 
 
-			var loader = new THREE.PDBLoader();
 
+			var loader = new PDBLoader();
 
 			var colorSpriteMap = {};
 
 			var baseSprite = document.createElement( 'img' );
 
 
@@ -115,23 +123,23 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
 
 				camera.position.z = 1500;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				root = new THREE.Object3D();
 
+				root = new Object3D();
 
 				scene.add( root );
 
 
 				//
 
 
-				renderer = new THREE.CSS3DRenderer();
 
+				renderer = new CSS3DRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.getElementById( 'container' ).appendChild( renderer.domElement );
 
 
 				//
 
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				controls.rotateSpeed = 0.5;
 
 				controls.addEventListener( 'change', render );
 
 
@@ -211,7 +219,7 @@
 
 
 					var object = objects[ i ];
 
 
-					if ( object instanceof THREE.CSS3DSprite ) {
 
+					if ( object instanceof CSS3DSprite ) {
 
 
 						object.element.style.display = "";
 
 						object.visible = true;
 
@@ -233,7 +241,7 @@
 
 
 					var object = objects[ i ];
 
 
-					if ( object instanceof THREE.CSS3DSprite ) {
 
+					if ( object instanceof CSS3DSprite ) {
 
 
 						object.element.style.display = "none";
 
 						object.visible = false;
 
@@ -259,7 +267,7 @@
 
 					object.element.style.display = "";
 
 					object.visible = true;
 
 
-					if ( ! ( object instanceof THREE.CSS3DSprite ) ) {
 
+					if ( ! ( object instanceof CSS3DSprite ) ) {
 
 
 						object.element.style.height = object.userData.bondLengthShort;
 
 
@@ -335,8 +343,8 @@
 
 					var positions = geometryAtoms.getAttribute( 'position' );
 
 					var colors = geometryAtoms.getAttribute( 'color' );
 
 
-					var position = new THREE.Vector3();
 
-					var color = new THREE.Color();
 
+					var position = new Vector3();
 
+					var color = new Color();
 
 
 					for ( var i = 0; i < positions.count; i ++ ) {
 
 
@@ -369,7 +377,7 @@
 
 						var atom = document.createElement( 'img' );
 
 						atom.src = colorSprite;
 
 
-						var object = new THREE.CSS3DSprite( atom );
 
+						var object = new CSS3DSprite( atom );
 
 						object.position.copy( position );
 
 						object.position.multiplyScalar( 75 );
 
 
@@ -384,8 +392,8 @@
 
 
 					positions = geometryBonds.getAttribute( 'position' );
 
 
-					var start = new THREE.Vector3();
 
-					var end = new THREE.Vector3();
 
+					var start = new Vector3();
 
+					var end = new Vector3();
 
 
 					for ( var i = 0; i < positions.count; i += 2 ) {
 
 
@@ -409,7 +417,7 @@
 
 						bond.className = "bond";
 
 						bond.style.height = bondLength + "px";
 
 
-						var object = new THREE.CSS3DObject( bond );
 
+						var object = new CSS3DObject( bond );
 
 						object.position.copy( start );
 
 						object.position.lerp( end, 0.5 );
 
 
@@ -421,7 +429,7 @@
 
 						var axis = tmpVec2.set( 0, 1, 0 ).cross( tmpVec1 );
 
 						var radians = Math.acos( tmpVec3.set( 0, 1, 0 ).dot( tmpVec4.copy( tmpVec1 ).normalize() ) );
 
 
-						var objMatrix = new THREE.Matrix4().makeRotationAxis( axis.normalize(), radians );
 
+						var objMatrix = new Matrix4().makeRotationAxis( axis.normalize(), radians );
 
 						object.matrix = objMatrix;
 
 						object.rotation.setFromRotationMatrix( object.matrix, object.rotation.order );
 
 
@@ -438,7 +446,7 @@
 
 						bond.className = "bond";
 
 						bond.style.height = bondLength + "px";
 
 
-						var joint = new THREE.Object3D( bond );
 
+						var joint = new Object3D( bond );
 
 						joint.position.copy( start );
 
 						joint.position.lerp( end, 0.5 );
 
 
@@ -448,7 +456,7 @@
 
 						joint.matrixAutoUpdate = false;
 
 						joint.updateMatrix();
 
 
-						var object = new THREE.CSS3DObject( bond );
 
+						var object = new CSS3DObject( bond );
 
 						object.rotation.y = Math.PI / 2;
 
 
 						object.matrixAutoUpdate = false;

+ 37 - 26
examples/css3d_orthographic.html
查看文件 

@@ -1,6 +1,7 @@
 
 <!DOCTYPE html>
 
 <html>
 
 	<head>
 
+		<title>three.js css3d - orthographic</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="main.css">
 
@@ -19,13 +20,23 @@
 
 	<body>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - orthographic</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/renderers/CSS3DRenderer.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				Color,
 
+				DoubleSide,
 
+				Euler,
 
+				Math as _Math,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				OrthographicCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
 
 			var camera, scene, renderer;
 
 
@@ -38,60 +49,60 @@
 
 
 				var frustumSize = 500;
 
 				var aspect = window.innerWidth / window.innerHeight;
 
-				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
 
+				camera = new OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
 
 
 				camera.position.set( - 200, 200, 200 );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xf0f0f0 );
 
 
-				scene2 = new THREE.Scene();
 
+				scene2 = new Scene();
 
 
-				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
 
+				var material = new MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: DoubleSide } );
 
 
 				// left
 
 				createPlane(
 
 					100, 100,
 
 					'chocolate',
 
-					new THREE.Vector3( - 50, 0, 0 ),
 
-					new THREE.Euler( 0, - 90 * THREE.Math.DEG2RAD, 0 )
 
+					new Vector3( - 50, 0, 0 ),
 
+					new Euler( 0, - 90 * _Math.DEG2RAD, 0 )
 
 				);
 
 				// right
 
 				createPlane(
 
 					100, 100,
 
 					'saddlebrown',
 
-					new THREE.Vector3( 0, 0, 50 ),
 
-					new THREE.Euler( 0, 0, 0 )
 
+					new Vector3( 0, 0, 50 ),
 
+					new Euler( 0, 0, 0 )
 
 				);
 
 				// top
 
 				createPlane(
 
 					100, 100,
 
 					'yellowgreen',
 
-					new THREE.Vector3( 0, 50, 0 ),
 
-					new THREE.Euler( - 90 * THREE.Math.DEG2RAD, 0, 0 )
 
+					new Vector3( 0, 50, 0 ),
 
+					new Euler( - 90 * _Math.DEG2RAD, 0, 0 )
 
 				);
 
 				// bottom
 
 				createPlane(
 
 					300, 300,
 
 					'seagreen',
 
-					new THREE.Vector3( 0, - 50, 0 ),
 
-					new THREE.Euler( - 90 * THREE.Math.DEG2RAD, 0, 0 )
 
+					new Vector3( 0, - 50, 0 ),
 
+					new Euler( - 90 * _Math.DEG2RAD, 0, 0 )
 
 				);
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
-				renderer2 = new THREE.CSS3DRenderer();
 
+				renderer2 = new CSS3DRenderer();
 
 				renderer2.setSize( window.innerWidth, window.innerHeight );
 
 				renderer2.domElement.style.position = 'absolute';
 
 				renderer2.domElement.style.top = 0;
 
 				document.body.appendChild( renderer2.domElement );
 
 
-				var controls = new THREE.OrbitControls( camera, renderer2.domElement );
 
+				var controls = new OrbitControls( camera, renderer2.domElement );
 
 
 				function createPlane( width, height, cssColor, pos, rot ) {
 
 
@@ -101,13 +112,13 @@
 
 					element.style.opacity = 0.75;
 
 					element.style.background = cssColor;
 
 
-					var object = new THREE.CSS3DObject( element );
 
+					var object = new CSS3DObject( element );
 
 					object.position.copy( pos );
 
 					object.rotation.copy( rot );
 
 					scene2.add( object );
 
 
-					var geometry = new THREE.PlaneBufferGeometry( width, height );
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var geometry = new PlaneBufferGeometry( width, height );
 
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.copy( object.position );
 
 					mesh.rotation.copy( object.rotation );
 
 					scene.add( mesh );

+ 17 - 12
examples/css3d_panorama.html
查看文件 

@@ -7,15 +7,20 @@
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/renderers/CSS3DRenderer.js"></script>
 
-
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - panorama demo. cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				PerspectiveCamera,
 
+				Math as _Math,
 
+				Scene,
 
+				Vector3
 
+			} from "../build/three.module.js";
 
+
 
+			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
 
 			var camera, scene, renderer;
 
-			var target = new THREE.Vector3();
 
+			var target = new Vector3();
 
 
 			var lon = 90, lat = 0;
 
 			var phi = 0, theta = 0;
 
@@ -27,9 +32,9 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				var sides = [
 
 					{
 
@@ -72,14 +77,14 @@
 
 					element.width = 1026; // 2 pixels extra to close the gap.
 
 					element.src = side.url;
 
 
-					var object = new THREE.CSS3DObject( element );
 
+					var object = new CSS3DObject( element );
 
 					object.position.fromArray( side.position );
 
 					object.rotation.fromArray( side.rotation );
 
 					scene.add( object );
 
 
 				}
 
 
-				renderer = new THREE.CSS3DRenderer();
 
+				renderer = new CSS3DRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
@@ -134,7 +139,7 @@
 
 
 				var fov = camera.fov + event.deltaY * 0.05;
 
 
-				camera.fov = THREE.Math.clamp( fov, 10, 75 );
 
+				camera.fov = _Math.clamp( fov, 10, 75 );
 
 
 				camera.updateProjectionMatrix();
 
 
@@ -171,8 +176,8 @@
 
 
 				lon += 0.1;
 
 				lat = Math.max( - 85, Math.min( 85, lat ) );
 
-				phi = THREE.Math.degToRad( 90 - lat );
 
-				theta = THREE.Math.degToRad( lon );
 
+				phi = _Math.degToRad( 90 - lat );
 
+				theta = _Math.degToRad( lon );
 
 
 				target.x = Math.sin( phi ) * Math.cos( theta );
 
 				target.y = Math.cos( phi );

+ 15 - 11
examples/css3d_panorama_deviceorientation.html
查看文件 

@@ -7,13 +7,17 @@
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/DeviceOrientationControls.js"></script>
 
-		<script src="js/renderers/CSS3DRenderer.js"></script>
 
-
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - panorama - device orientation.<br/>cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				PerspectiveCamera,
 
+				Object3D,
 
+				Scene
 
+			} from "../build/three.module.js";
 
+
 
+			import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
 
+			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
 
 			var camera, scene, renderer;
 
 			var controls;
 
@@ -23,11 +27,11 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
 
-				controls = new THREE.DeviceOrientationControls( camera );
 
+				controls = new DeviceOrientationControls( camera );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				var sides = [
 
 					{
 
@@ -62,7 +66,7 @@
 
 					}
 
 				];
 
 
-				var cube = new THREE.Object3D();
 
+				var cube = new Object3D();
 
 				scene.add( cube );
 
 
 				for ( var i = 0; i < sides.length; i ++ ) {
 
@@ -73,14 +77,14 @@
 
 					element.width = 1026; // 2 pixels extra to close the gap.
 
 					element.src = side.url;
 
 
-					var object = new THREE.CSS3DObject( element );
 
+					var object = new CSS3DObject( element );
 
 					object.position.fromArray( side.position );
 
 					object.rotation.fromArray( side.rotation );
 
 					cube.add( object );
 
 
 				}
 
 
-				renderer = new THREE.CSS3DRenderer();
 
+				renderer = new CSS3DRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );

+ 21 - 15
examples/css3d_periodictable.html
查看文件 

@@ -81,10 +81,7 @@
 
 		</style>
 
 	</head>
 
 	<body>
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/libs/tween.min.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
 
-		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank" rel="noopener">info</a>.</div>
 
 		<div id="container"></div>
 
@@ -95,7 +92,16 @@
 
 			<button id="grid">GRID</button>
 
 		</div>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				PerspectiveCamera,
 
+				Object3D,
 
+				Scene,
 
+				Vector3
 
+			} from "../build/three.module.js";
 
+
 
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
+			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
 
 			var table = [
 
 				"H", "Hydrogen", "1.00794", 1, 1,
 
@@ -229,10 +235,10 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 3000;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				// table
 
 
@@ -257,7 +263,7 @@
 
 					details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
 
 					element.appendChild( details );
 
 
-					var object = new THREE.CSS3DObject( element );
 
+					var object = new CSS3DObject( element );
 
 					object.position.x = Math.random() * 4000 - 2000;
 
 					object.position.y = Math.random() * 4000 - 2000;
 
 					object.position.z = Math.random() * 4000 - 2000;
 
@@ -267,7 +273,7 @@
 
 
 					//
 
 
-					var object = new THREE.Object3D();
 
+					var object = new Object3D();
 
 					object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
 
 					object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
 
 
@@ -277,14 +283,14 @@
 
 
 				// sphere
 
 
-				var vector = new THREE.Vector3();
 
+				var vector = new Vector3();
 
 
 				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
 
 					var phi = Math.acos( - 1 + ( 2 * i ) / l );
 
 					var theta = Math.sqrt( l * Math.PI ) * phi;
 
 
-					var object = new THREE.Object3D();
 
+					var object = new Object3D();
 
 
 					object.position.setFromSphericalCoords( 800, phi, theta );
 
 
@@ -298,14 +304,14 @@
 
 
 				// helix
 
 
-				var vector = new THREE.Vector3();
 
+				var vector = new Vector3();
 
 
 				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
 
 					var theta = i * 0.175 + Math.PI;
 
 					var y = - ( i * 8 ) + 450;
 
 
-					var object = new THREE.Object3D();
 
+					var object = new Object3D();
 
 
 					object.position.setFromCylindricalCoords( 900, theta, y );
 
 
@@ -323,7 +329,7 @@
 
 
 				for ( var i = 0; i < objects.length; i ++ ) {
 
 
-					var object = new THREE.Object3D();
 
+					var object = new Object3D();
 
 
 					object.position.x = ( ( i % 5 ) * 400 ) - 800;
 
 					object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;
 
@@ -335,13 +341,13 @@
 
 
 				//
 
 
-				renderer = new THREE.CSS3DRenderer();
 
+				renderer = new CSS3DRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.getElementById( 'container' ).appendChild( renderer.domElement );
 
 
 				//
 
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				controls.minDistance = 500;
 
 				controls.maxDistance = 6000;
 
 				controls.addEventListener( 'change', render );

+ 26 - 17
examples/css3d_sandbox.html
查看文件 

@@ -16,11 +16,20 @@
 
 	<body>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sandbox</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
 
-		<script src="js/renderers/CSS3DRenderer.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				Color,
 
+				DoubleSide,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				Scene,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
+			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
 
 			var camera, scene, renderer;
 
 
@@ -33,15 +42,15 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.set( 200, 200, 200 );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xf0f0f0 );
 
 
-				scene2 = new THREE.Scene();
 
+				scene2 = new Scene();
 
 
-				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
 
+				var material = new MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: DoubleSide } );
 
 
 				//
 
 
@@ -51,9 +60,9 @@
 
 					element.style.width = '100px';
 
 					element.style.height = '100px';
 
 					element.style.opacity = ( i < 5 ) ? 0.5 : 1;
 
-					element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
 
+					element.style.background = new Color( Math.random() * 0xffffff ).getStyle();
 
 
-					var object = new THREE.CSS3DObject( element );
 
+					var object = new CSS3DObject( element );
 
 					object.position.x = Math.random() * 200 - 100;
 
 					object.position.y = Math.random() * 200 - 100;
 
 					object.position.z = Math.random() * 200 - 100;
 
@@ -64,8 +73,8 @@
 
 					object.scale.y = Math.random() + 0.5;
 
 					scene2.add( object );
 
 
-					var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var geometry = new PlaneBufferGeometry( 100, 100 );
 
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.copy( object.position );
 
 					mesh.rotation.copy( object.rotation );
 
 					mesh.scale.copy( object.scale );
 
@@ -75,18 +84,18 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
-				renderer2 = new THREE.CSS3DRenderer();
 
+				renderer2 = new CSS3DRenderer();
 
 				renderer2.setSize( window.innerWidth, window.innerHeight );
 
 				renderer2.domElement.style.position = 'absolute';
 
 				renderer2.domElement.style.top = 0;
 
 				document.body.appendChild( renderer2.domElement );
 
 
-				controls = new THREE.TrackballControls( camera, renderer2.domElement );
 
+				controls = new TrackballControls( camera, renderer2.domElement );
 
 
 			}

+ 13 - 9
examples/css3d_sprites.html
查看文件 

@@ -16,15 +16,19 @@
 
 		</style>
 
 	</head>
 
 	<body>
 
-		<script src="../build/three.js"></script>
 
 		<script src="js/libs/tween.min.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
 
-		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sprites</div>
 
 		<div id="container"></div>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				PerspectiveCamera,
 
+				Scene
 
+			} from "../build/three.module.js";
 
+
 
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
+			import { CSS3DRenderer, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
 
 
 			var camera, scene, renderer;
 
 			var controls;
 
@@ -39,18 +43,18 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 
 				camera.position.set( 600, 400, 1500 );
 
 				camera.lookAt( 0, 0, 0 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				var image = document.createElement( 'img' );
 
 				image.addEventListener( 'load', function () {
 
 
 					for ( var i = 0; i < particlesTotal; i ++ ) {
 
 
-						var object = new THREE.CSS3DSprite( image.cloneNode() );
 
+						var object = new CSS3DSprite( image.cloneNode() );
 
 						object.position.x = Math.random() * 4000 - 2000,
 
 						object.position.y = Math.random() * 4000 - 2000,
 
 						object.position.z = Math.random() * 4000 - 2000;
 
@@ -130,13 +134,13 @@
 
 
 				//
 
 
-				renderer = new THREE.CSS3DRenderer();
 
+				renderer = new CSS3DRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.getElementById( 'container' ).appendChild( renderer.domElement );
 
 
 				//
 
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
+				controls = new TrackballControls( camera, renderer.domElement );
 
 
 				//

+ 15 - 11
examples/css3d_youtube.html
查看文件 

@@ -20,14 +20,18 @@
 
 		</style>
 
 	</head>
 
 	<body>
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
 
-		<script src="js/renderers/CSS3DRenderer.js"></script>
 
-
 
 		<div id="container"></div>
 
 		<div id="blocker"></div>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				PerspectiveCamera,
 
+				Group,
 
+				Scene
 
+			} from "../build/three.module.js";
 
+
 
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
+			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
 
 			var camera, scene, renderer;
 
 			var controls;
 
@@ -46,7 +50,7 @@
 
 				iframe.src = [ 'https://www.youtube.com/embed/', id, '?rel=0' ].join( '' );
 
 				div.appendChild( iframe );
 
 
-				var object = new THREE.CSS3DObject( div );
 
+				var object = new CSS3DObject( div );
 
 				object.position.set( x, y, z );
 
 				object.rotation.y = ry;
 
 
@@ -61,23 +65,23 @@
 
 
 				var container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 
 				camera.position.set( 500, 350, 750 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				renderer = new THREE.CSS3DRenderer();
 
+				renderer = new CSS3DRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
 
-				var group = new THREE.Group();
 
+				var group = new Group();
 
 				group.add( new Element( 'SJOz3qjfQXU', 0, 0, 240, 0 ) );
 
 				group.add( new Element( 'Y2-xZ-1HE-Q', 240, 0, 0, Math.PI / 2 ) );
 
 				group.add( new Element( 'IrydklNpcFI', 0, 0, - 240, Math.PI ) );
 
 				group.add( new Element( '9ubytEsCaS0', - 240, 0, 0, - Math.PI / 2 ) );
 
 				scene.add( group );
 
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				controls.rotateSpeed = 4;
 
 
 				window.addEventListener( 'resize', onWindowResize, false );