Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Merge pull request #13790 from yomotsu/dev-css-orthographic

Support Orthographic in CSS3Renderer
Mr.doob 7 жил өмнө
parent
8550bd451d a3f002285b
commit
fc23b88554
5 өөрчлөгдсөн 159 нэмэгдсэн , 16 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 0 1
      docs/examples/renderers/CSS2DRenderer.html
  2. 5 7
      docs/examples/renderers/CSS3DRenderer.html
  3. 143 0
      examples/css3d_orthographic.html
  4. 1 0
      examples/files.js
  5. 10 8
      examples/js/renderers/CSS3DRenderer.js

+ 0 - 1
docs/examples/renderers/CSS2DRenderer.html
Файл харах 

@@ -12,7 +12,6 @@
 
 
 
 		<p class="desc">[name] is a simplified version of [page:CSS3DRenderer]. The only transformation that is supported is translation.<br /><br />
 
 		<p class="desc">[name] is a simplified version of [page:CSS3DRenderer]. The only transformation that is supported is translation.<br /><br />
 
 			The renderer is very useful if you want to combine HTML based labels with 3D objects. Here too, the respective DOM elements are wrapped into an instance of *CSS2DObject* and added to the scene graph.<br />
 
 			The renderer is very useful if you want to combine HTML based labels with 3D objects. Here too, the respective DOM elements are wrapped into an instance of *CSS2DObject* and added to the scene graph.<br />
 
-			Unlike [page:CSS3DRenderer], orthographic cameras are supported.
 
 		</p>
 
 		</p>
 
 
 
 		<script>
 
 		<script>

+ 5 - 7
docs/examples/renderers/CSS3DRenderer.html
Файл харах 

@@ -16,13 +16,10 @@
 
 			canvas based rendering. It can also be used in order to combine DOM elements with WebGL
 
 			canvas based rendering. It can also be used in order to combine DOM elements with WebGL
 
 			content.<br /><br />
 
 			content.<br /><br />
 
 			There are, however, some important limitations:
 
 			There are, however, some important limitations:
 
-		</p>
 
-		<ul>
 
-			<li>It's not possible to use the material system of *three.js*.</li>
 
-			<li>It's also not possible to use geometries.</li>
 
-			<li>Only [page:PerspectiveCamera] is supported right now.</li>
 
-		</ul>
 
-		<p>
 
+			<ul>
 
+				<li>It's not possible to use the material system of *three.js*.</li>
 
+				<li>It's also not possible to use geometries.</li>
 
+			</ul>
 
 			So [name] is just focused on ordinary DOM elements. These elements are wrapped into special objects (*CSS3DObject* or *CSS3DSprite*) and then added to the scene graph.
 
 			So [name] is just focused on ordinary DOM elements. These elements are wrapped into special objects (*CSS3DObject* or *CSS3DSprite*) and then added to the scene graph.
 
 		</p>
 
 		</p>
 
 
 
@@ -46,6 +43,7 @@
 
 
 
 		<p>
 
 		<p>
 
 			[example:css3d_molecules molecules]<br />
 
 			[example:css3d_molecules molecules]<br />
 
+			[example:css3d_orthographic orthographic camera]<br />
 
 			[example:css3d_panorama panorama]<br />
 
 			[example:css3d_panorama panorama]<br />
 
 			[example:css3d_periodictable periodictable]<br />
 
 			[example:css3d_periodictable periodictable]<br />
 
 			[example:css3d_sprites sprites]<br />
 
 			[example:css3d_sprites sprites]<br />

+ 143 - 0
examples/css3d_orthographic.html
Файл харах 

@@ -0,0 +1,143 @@
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+			body {
 
+				background-color: #ffffff;
 
+				margin: 0;
 
+				overflow: hidden;
 
+			}
 
+			#info {
 
+				position: absolute;
 
+				top: 0px;
 
+				width: 100%;
 
+				color: #000000;
 
+				padding: 5px;
 
+				font-family: Monospace;
 
+				font-size: 13px;
 
+				text-align: center;
 
+				z-index: 1;
 
+			}
 
+
 
+			a {
 
+				color: #000000;
 
+			}
 
+
 
+		</style>
 
+	</head>
 
+	<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>
 
+
 
+			var camera, scene, renderer;
 
+
 
+			var scene2, renderer2;
 
+
 
+			var controls;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				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.position.set( - 200, 200, 200 );
 
+
 
+				controls = new THREE.OrbitControls( camera );
 
+
 
+				scene = new THREE.Scene();
 
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
+
 
+				scene2 = new THREE.Scene();
 
+
 
+				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
 
+
 
+				// left
 
+				createPlane(
 
+					100, 100,
 
+					'chocolate',
 
+					new THREE.Vector3( - 50, 0, 0 ),
 
+					new THREE.Euler( 0, - 90 * THREE.Math.DEG2RAD, 0 )
 
+				);
 
+				// right
 
+				createPlane(
 
+					100, 100,
 
+					'saddlebrown',
 
+					new THREE.Vector3( 0, 0, 50 ),
 
+					new THREE.Euler( 0, 0, 0 )
 
+				);
 
+				// top
 
+				createPlane(
 
+					100, 100,
 
+					'yellowgreen',
 
+					new THREE.Vector3( 0, 50, 0 ),
 
+					new THREE.Euler( - 90 * THREE.Math.DEG2RAD, 0, 0 )
 
+				);
 
+				// bottom
 
+				createPlane(
 
+					300, 300,
 
+					'seagreen',
 
+					new THREE.Vector3( 0, - 50, 0 ),
 
+					new THREE.Euler( - 90 * THREE.Math.DEG2RAD, 0, 0 )
 
+				);
 
+
 
+				//
 
+
 
+				renderer = new THREE.WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				document.body.appendChild( renderer.domElement );
 
+
 
+				renderer2 = new THREE.CSS3DRenderer();
 
+				renderer2.setSize( window.innerWidth, window.innerHeight );
 
+				renderer2.domElement.style.position = 'absolute';
 
+				renderer2.domElement.style.top = 0;
 
+				document.body.appendChild( renderer2.domElement );
 
+
 
+				function createPlane( width, height, cssColor, pos, rot ) {
 
+
 
+					var element = document.createElement( 'div' );
 
+					element.style.width = width + 'px';
 
+					element.style.height = height + 'px';
 
+					element.style.opacity = 0.75;
 
+					element.style.background = cssColor;
 
+
 
+					var object = new THREE.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 );
 
+					mesh.position.copy( object.position );
 
+					mesh.rotation.copy( object.rotation );
 
+					scene.add( mesh );
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				renderer.render( scene, camera );
 
+				renderer2.render( scene2, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+	</body>
 
+</html>

+ 1 - 0
examples/files.js
Файл харах 

@@ -347,6 +347,7 @@ var files = {
 
 	],
 
 	],
 
 	"css3d": [
 
 	"css3d": [
 
 		"css3d_molecules",
 
 		"css3d_molecules",
 
+		"css3d_orthographic",
 
 		"css3d_panorama",
 
 		"css3d_panorama",
 
 		"css3d_panorama_deviceorientation",
 
 		"css3d_panorama_deviceorientation",
 
 		"css3d_periodictable",
 
 		"css3d_periodictable",

+ 10 - 8
examples/js/renderers/CSS3DRenderer.js
Файл харах 

@@ -1,6 +1,7 @@
 
 /**
 
 /**
 
  * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
 
  * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
 
  * @author mrdoob / http://mrdoob.com/
 
  * @author mrdoob / http://mrdoob.com/
 
+ * @author yomotsu / https://yomotsu.net/
 
  */
 
  */
 
 
 
 THREE.CSS3DObject = function ( element ) {
 
 THREE.CSS3DObject = function ( element ) {
 
@@ -58,7 +59,6 @@ THREE.CSS3DRenderer = function () {
 
 	var cameraElement = document.createElement( 'div' );
 
 	var cameraElement = document.createElement( 'div' );
 
 
 
 	cameraElement.style.WebkitTransformStyle = 'preserve-3d';
 
 	cameraElement.style.WebkitTransformStyle = 'preserve-3d';
 
-	cameraElement.style.MozTransformStyle = 'preserve-3d';
 
 	cameraElement.style.transformStyle = 'preserve-3d';
 
 	cameraElement.style.transformStyle = 'preserve-3d';
 
 
 
 	domElement.appendChild( cameraElement );
 
 	domElement.appendChild( cameraElement );
 
@@ -189,7 +189,6 @@ THREE.CSS3DRenderer = function () {
 
 			if ( cachedStyle === undefined || cachedStyle !== style ) {
 
 			if ( cachedStyle === undefined || cachedStyle !== style ) {
 
 
 
 				element.style.WebkitTransform = style;
 
 				element.style.WebkitTransform = style;
 
-				element.style.MozTransform = style;
 
 				element.style.transform = style;
 
 				element.style.transform = style;
 
 
 
 				cache.objects[ object.id ] = { style: style };
 
 				cache.objects[ object.id ] = { style: style };
 
@@ -263,9 +262,12 @@ THREE.CSS3DRenderer = function () {
 
 
 
 		if ( cache.camera.fov !== fov ) {
 
 		if ( cache.camera.fov !== fov ) {
 
 
 
-			domElement.style.WebkitPerspective = fov + 'px';
 
-			domElement.style.MozPerspective = fov + 'px';
 
-			domElement.style.perspective = fov + 'px';
 
+			if ( camera.isPerspectiveCamera ) {
 
+
 
+				domElement.style.WebkitPerspective = fov + 'px';
 
+				domElement.style.perspective = fov + 'px';
 
+
 
+			}
 
 
 
 			cache.camera.fov = fov;
 
 			cache.camera.fov = fov;
 
 
 
@@ -275,8 +277,9 @@ THREE.CSS3DRenderer = function () {
 
 
 
 		if ( camera.parent === null ) camera.updateMatrixWorld();
 
 		if ( camera.parent === null ) camera.updateMatrixWorld();
 
 
 
-		var cameraCSSMatrix = 'translateZ(' + fov + 'px)' +
 
-			getCameraCSSMatrix( camera.matrixWorldInverse );
 
+		var cameraCSSMatrix = camera.isOrthographicCamera ?
 
+			'scale(' + fov + ')' + getCameraCSSMatrix( camera.matrixWorldInverse ) :
 
+			'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
 
 
 
 		var style = cameraCSSMatrix +
 
 		var style = cameraCSSMatrix +
 
 			'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
 
 			'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
 
@@ -284,7 +287,6 @@ THREE.CSS3DRenderer = function () {
 
 		if ( cache.camera.style !== style && ! isIE ) {
 
 		if ( cache.camera.style !== style && ! isIE ) {
 
 
 
 			cameraElement.style.WebkitTransform = style;
 
 			cameraElement.style.WebkitTransform = style;
 
-			cameraElement.style.MozTransform = style;
 
 			cameraElement.style.transform = style;
 
 			cameraElement.style.transform = style;
 
 
 
 			cache.camera.style = style;
 
 			cache.camera.style = style;