Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Camera movement not working with environment preset and particle system
See original GitHub issueDescription:
- A-Frame Version: >=1.0.0
- Platform / Device: Firefox
- Reproducible Code Snippet or URL:
<!DOCTYPE` html>
<html lang="en">
<head>
<title>Hello environment!</title>
<meta charset="utf-8">
<meta name="description" content="Simple • A-Frame" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.9/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
</head>
<body>
<a-scene id="scene" environment="preset: forest">
<a-entity particle-system="preset: rain"></a-entity>
</a-scene>
</body>
</html>
I currently have the problem, that the environment presets of the https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js package and the particke system of the https://unpkg.com/aframe-particle-system-component@1.0.9/dist/aframe-particle-system-component.min.js are not working with the camera controls of aframe >=1.0.0 When using aframe 0.9.0 at least the camera movement is working, although the browser inspector throws an errors ->
THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog Must have a compiled vertex shader attached. THREE.WebGLShader: gl.getShaderInfoLog() vertex ERROR: 0:364: ‘mvPosition’ : undeclared identifier ERROR: 0:364: ‘z’ : field selection requires structure or vector on left hand side1: precision highp float; 2: precision highp int; 3: #define HIGH_PRECISION 4: #define SHADER_NAME ShaderMaterial 5: #define HAS_PERSPECTIVE true 6: #define COLORIZE true 7: #define VALUE_OVER_LIFETIME_LENGTH 4 8: #define SHOULD_ROTATE_PARTICLES true 9: #define VERTEX_TEXTURES 10: #define GAMMA_FACTOR 2 11: #define MAX_BONES 0 12: #define USE_FOG 13: #define BONE_TEXTURE 14: uniform mat4 modelMatrix; 15: uniform mat4 modelViewMatrix; 16: uniform mat4 projectionMatrix; 17: uniform mat4 viewMatrix; 18: uniform mat3 normalMatrix; 19: uniform vec3 cameraPosition; 20: uniform bool isOrthographic; 21: #ifdef USE_INSTANCING 22: attribute mat4 instanceMatrix; 23: #endif 24: attribute vec3 position; 25: attribute vec3 normal; 26: attribute vec2 uv; 27: #ifdef USE_TANGENT 28: attribute vec4 tangent; 29: #endif 30: … <empty string> three.js:18243:12
TypeError: e.fogColor.value is null three.js:25942:3
core:a-node:error Failure loading node: TypeError: “this.environmentData.lightPosition is undefined” Aframe 10 browser.js:111:32
Best regards 😃
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I was able to get environment component and particle system working in this scene together with A-Frame 1.0.4: https://glitch.com/~codevember-05-sword
It uses a modified version of Particle Component: https://github.com/roskelld/aframe-particle-system-component
Per @Firepal’s point, this includes a commit that adds fog color / shader: https://github.com/roskelld/aframe-particle-system-component/commit/2b8ce2730dcbb465b342d0c4832feabbdcaa539f
So this ticket may instead belong here: https://github.com/IdeaSpaceVR/aframe-particle-system-component/issues
Yeah. It’s an issue of the shader used by the particle components and newer versions of THREE
@kfarr thanks for pointing out to the fix. I’m closing this and I recommend opening an issue on the component repo.