将框架效果添加到场景时，GLTF模型渲染不正确

时间：2018-11-12 12:30:27

标签： three.js aframe post-processing gltf

这是我关于Aframe的第一个问题，因此，如果您需要其他信息，请告诉我。

我尝试将这个gltf模型添加到我的项目中 https://poly.google.com/view/1O6BWfUB6ta

当我将aframe效果添加到场景中时，我的gltf模型的渲染方式存在问题。 enter image description here

当我删除效果时，模型呈现完美。

enter image description here

您可以在此处查看我的项目的演示 http://www.applaudlabs.com/belvedere/

我在这里看到了一个使用gltf模型及其效果的示例，因此我知道它应该可以工作。 https://curious-electric.com/w/experiments/aframe/campfirevr/

我还检查了gltf视图中的模型，没有问题 https://gltf-viewer.donmccurdy.com/

请在下面查看我的代码

<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> 
			<script src="https://unpkg.com/aframe-animation-component@^4.1.2/dist/aframe-animation-component.min.js"></script>
		
		 <!-- Bootstrap JS Dependencies -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		
		<!-- plugins -->
		<!-- ocean -->
		<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/aframe-extras.min.js"></script>
		
		<!-- post processing effects -->
		<script src="aframe-effects.js"></script>
  
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="vr_bg">
			<div class="overlay_container">
				<a class="logo_link" href=""><img class="logo_svg" src="logo.svg" alt="Continuous Ventures"></a>
			</div>
	
			<!-- scene working without effects -->
			<a-scene> 
			
			<!-- scene not working with effects 
			<a-scene effects="bloom, godrays, fxaa"
			godrays="src:#moon; threshold: 0.0 0.0; intensity: 0.6"
			bloom="strength:0.6; radius: 0.066;"
			fxaa class="fullscreen" 
			fog="type: linear; far:1000; color: #ffc595; density:0.0025">
			-->
			  
				<a-assets>
					<!-- ocean-->
					<img id="water-normal" src="https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/waternormals.jpg" crossorigin="anonymous" preload="true"/>
					<!-- sky -->
					<img id="sky" src="sky.jpg" crossorigin="anonymous" preload="true"/>
					<img id="sky_reflection" src="water_reflection_sky.jpg" crossorigin="anonymous" preload="true"/>
					<!-- Lighthouse-->
					<a-asset-item id="lighthouse" src="lighthouse/Lighthouse.gltf"></a-asset-item>
					<!-- animation-->
					<a-mixin id="fogtransition" dur="8000" easing="ease-in" direction="forward" repeat="0"></a-mixin>
					<a-mixin id="cameratransition" dur="36000" easing="ease-out" direction="forward" repeat="0"></a-mixin>
					<a-mixin id="suntransition" dur="18000" direction="forward" repeat="0"></a-mixin>
				</a-assets>
				
				<!-- fog -->
				<a-animation attribute="fog.color"
					from="#000"
					to="#ec5151"
					mixin="fogtransition">
				</a-animation>
				<a-animation attribute="fog.far"
					from="10"
					to="20000"
					mixin="fogtransition">
				</a-animation>
			
				<!-- camera-->
				<a-entity id="camera" position="0 0.81 0" rotation="2.9220847551671985 90.98569786677473 0">
					<a-camera>
					</a-camera>
				</a-entity>	
				
				<!-- ocean -->
				<a-ocean material="metalness:1; normalMap:#water-normal; normalTextureRepeat:10 10; 
				normalScale:1 1;"
				width="400" depth="400" 
				density="20" speed="0.125" 
				color="#333" opacity="1" 
				position="0 -0.4 0"
				amplitude= .25"
				amplitudeVariance= "1" wobble-normal="">
					
					<a-animation attribute="material.normalTextureOffset" 
						from="0 0" 
						to="100 100" 
						easing="linear"
						dur="10000"
						fill="both"
						repeat="indefinite">
					</a-animation>
					
				</a-ocean>	
				
				
			
				<!-- Lighthouse --> 
				<a-entity id="Lighthouse" gltf-model="#lighthouse" position="-72.005 0 -25.964" scale="2 2 2">
				</a-entity>
				
				<!-- light beam cylinder -->
				<a-entity id="LIGHTBEAM" position="-72.005 -9.036 -25.964">
					<a-cylinder material="fog:false; color:#fff; opacity:0.5; flatShading:true; emissive:#fff; emissiveIntensity:5"  
						rotation="-90 0 0" 
						height="30" 
						position="0 36 0"radius="10.5" 
						material="" 
						geometry="height:900; 
						radius:1.5">
					</a-cylinder>
					<a-animation attribute="rotation" 
						from="0  0 0" 
						to="0 360 0" 
						easing="linear"
						dur="10000"
						fill="forwards"
						repeat="indefinite">
					</a-animation>
				</a-entity>
				
			
				<!-- sky -->
				<a-sky src="#sky" material="" geometry="" scale="300 300 300" radius="5" position="" rotation="0 185 0" visible="">
				</a-sky>
				
			
				<!-- SKY AND AMBIENT-LIKE LIGHT -->
				<a-entity light="type: hemisphere; color: #0E192B; groundColor: #1D0A57; intensity: 1"></a-entity>
			
				<a-entity light="type: directional; color: #EEE; intensity: 0.5" position="-1 1 0">
					<a-entity position="100.0 100.0 -100.0" geometry="primitive: sphere; radius: 10.0;" material="shader: flat; color: #fff;" id="moon" rotation="" scale="" visible="">
						<a-animation attribute="position"
								from="-1046.095 -40.092 -14.131"
								to="-1046.095 150.092 -14.131"
								mixin="suntransition">
						</a-animation>
						<a-animation attribute="intensity"
								from="0"
								to="1"
								mixin="suntransition">
						</a-animation>
						<a-animation attribute="color"
								from="#ec5151" 
								to="#e2705a" 
								mixin="suntransition">
						</a-animation>
					</a-entity>
				</a-entity>

			</a-scene>
		</div>
	</body>
</html>

提前谢谢

Eoin

1 个答案:

答案 0 :(得分：0)

我在gltf场景中也遇到了同样的问题-通过将您的相机设置为接近和远离视锥剔除值来解决。

<a-camera near="1" far="100"></a-camera>

相关问题
最新问题