nartc / angular-three Goto Github PK
View Code? Open in Web Editor NEW🧊 THREE.js integration for Angular 🧊
Home Page: https://angular-three.netlify.app/
License: MIT License
🧊 THREE.js integration for Angular 🧊
Home Page: https://angular-three.netlify.app/
License: MIT License
Scope
Describe the bug
./node_modules/@angular-three/core/fesm2015/angular-three-core.mjs:6:0-92 - Error: Module not found: Error: Package path ./zone-less is not exported from package ./node_modules/@angular-three/core/node_modules/@rx-angular/cdk (see exports field in ./node_modules/@angular-three/core/node_modules/@rx-angular/cdk/package.json)
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
Using sleepTimeLimit is helpful to limit the number of collision events after an object has stopped moving.
If the object is hit again, the wakeup event is fired.
Please add the wakeup event to physics props
// The body wakes up when it gets a new contact
sphereBody.addEventListener('wakeup', (event) => {
console.log('The sphere woke up!')
})
Is your feature request related to a problem? Please describe.
I would like to move the camera. I tried several approaches but I didn't find the right way to do it.
Describe the solution you'd like
I tried to update the position value in the [camera] @input of the ngt-canvas without success.
I tried to create a like that :
<ngt-perspective-camera #camera='ngtPerspectiveCamera' [args]='[40]'>
and attach it to ngt-canvas like that :
[camera]='camera.camera'
And trying in my component to translateX(myValue) the camera thanks to @ViewChild reference, but it doesn't work neither.
I tried also to create a 'CameraControllerDirective' to get the camera thanks to NgtCanvasInputsStore. I can retrieve the camera, but the translateX(myValue) doesn't work too.
Hi Chau !
Is your feature request related to a problem? Please describe.
I don't know if it's a problem or if I'm missing something... When I want to create a component, with its own Module with imports, my object is not displayed on the ThreeJS Scene, with no errors. If I declare this component in the main Module, with its imports then it works.
In order to get more isolated components, I would like to create a Module for each Component for them to be independent and easier usable/reusable, and also lazy loadable.
I plan also to be able to route some angular-three components, the way I dit it in a demo few months ago.
Thank you !
https://github.com/pmndrs/drei#abstractions
After adding cannon physics around an object, the following appears in the browser console.
ERROR Error: NGT_CANNON_BODY_TYPE is required
at new NgtCannonBodyController (angular-three-cannon-bodies.mjs:136:19)
at NodeInjectorFactory.NgtCannonBodyController_Factory [as factory] (angular-three-cannon-bodies.mjs:342:1)
at getNodeInjectable (core.mjs:3565:1)
at instantiateAllDirectives (core.mjs:10298:1)
at createDirectivesInstances (core.mjs:9647:1)
at Module.ɵɵelementStart (core.mjs:14541:1)
at PlaneComponent_Template (storybook-plane.component.ts:7:9)
at executeTemplate (core.mjs:9618:1)
at renderView (core.mjs:9421:1)
at renderComponent$1 (core.mjs:10702:1)
Add enable Input to ngt-cannon-debug so that when false, its easy to disable without having to remove from markup. Default is true.
<ngt-cannon-debug [enable]="false" [scale]="1.1" color="black">
...
So I created a cube and texture with Blender and used ngt-primitive to render it.
portalModel$ = this._textureLoader.load('assets/baked-cube.jpg').pipe(
switchMap((texture) => {
const bakedTexture = texture;
bakedTexture.flipY = false; // --> not working
return this._gltfLoader.load('assets/cube.glb').pipe(
map((gltf) => {
const bakedMesh = gltf.scene.children[0];
if (bakedMesh) {
(bakedMesh as any).material =
new THREE.MeshBasicMaterial({
map: bakedTexture,
});
}
return gltf;
})
);
})
);
After reading the code, I think we have to update flipY = false before call the initTexture function.
// texture-loader.ts
tap((textures: THREE.Texture | THREE.Texture[]) => {
const renderer = this.canvasStore.get((s) => s.renderer);
if (renderer) {
(Array.isArray(textures) ? textures : [textures])
.map((texture) => {
texture.flipY = false; // update flipY = false here
return texture;
})
.forEach(renderer.initTexture.bind(renderer));
}
}),
Do we have any solutions for this issue?
I'm using the following to declare fog settings
<ngt-canvas [camera]="{ position: [0, 400, 700], fov: 45, near: 1, far:1500 }"
[scene]="{ background: 'black' | color, fog: { color: 'black'| color, near: 250, far: 1400} | fog }">
However, I'm getting the following build error
Argument of type
'{ color: Color; near: number; far: number; }' is not assignable to parameter of type
'[color: ColorRepresentation, near?: number | undefined, far?: number | undefined]'.
Object literal may only specify known properties, and '"color"' does not exist in type '[color: ColorRepresentation, near?: number | undefined, far?: number | undefined]'.
3 [scene]="{ background: 'black' | color, fog: { color: 'black'| color, near: 250, far: 1400} | fog }">
~~~~~~~~~~~~~~
For now, I can work-around by declaring a Fog() variable
<ngt-canvas [camera]="{ position: [0, 400, 700], fov: 45, near: 1, far:1500 }"
[scene]="{ background: 'black' | color, fog: fogsettings }">
fogsettings = new Fog(new Color(), 250, 1400);
Is your feature request related to a problem? Please describe.
Too many ngZone.runOutsideAngular
as well as redundant ComponentStore code
Describe the solution you'd like
We would like to switch to RxAngular
for state management solution instead of ngrx/component-store
. ComponentStore, while really nice, is meant to be used within Angular applications where template gets updated states. RxAngular provides the same functionality as well as MORE focused on the performance side of things with Zoneless-first approach.
Describe alternatives you've considered
Stay with ComponentStore
Additional context
Add any other context or screenshots about the feature request here.
Trying to use code from kinetic-cube to understand how to enable physics.
I've re-created the components, but getting the following error
Error: src/app/components/kinetic-box/spheres/app-spheres.component.html:4:21 - error NG8002: Can't bind to 'getPhysicProps' since it isn't a known property of 'ngt-instanced-mesh'.
<ngt-instanced-mesh ngtPhysicSphere
[castShadow]="true"
[receiveShadow]="true"
[getPhysicProps]="getInstancedProps"
[args]="[number]">
...
</ngt-instanced-mesh>
What am I missing?
I'm going to try a much simpler example.
Any chance you could document some basic guidance on using @angular-three cannon? It would go a long way to standing up a basic working example.
I have a simple @angular-three project with VR enabled. I've imported @angular-three/cannon.
As soon as I add element into main component, I start to get these WEBGL warnings in the browser console window
WebGL: INVALID_FRAMEBUFFER_OPERATION: clear: Cannot render to a XRWebGLLayer framebuffer outside of an XRSession animation frame callback.
WebGL: INVALID_FRAMEBUFFER_OPERATION: drawElements: Cannot render to a XRWebGLLayer framebuffer outside of an XRSession animation frame callback.
WebGL: too many errors, no more errors will be reported to the console for this context.
Unfortunately, unless you have a VR headset, you won't be able to see these warning.
Example project can be found here with instruction in README on how to enable VR.
Application builds and runs without error. However, animateReady event not firing on ngt-group.
Is your feature request related to a problem? Please describe.
It is verbose for the consumers to keep doing this
<ngt-mesh #mesh="ngtMesh"></ngt-mesh>
<ngt-mesh-basic-material #material="ngtMeshBasicMaterial"></ngt-mesh-basic-material>
Describe the solution you'd like
Angular, by default, already exposes the instance of the directives via the implicit template variables
<!-- mesh is the reference to NgtMesh instance -->
<ngt-mesh #mesh></ngt-mesh>
<!-- material is the reference to NgtMeshBasicMaterial instance -->
<ngt-mesh-basic-material #material></ngt-mesh-basic-material>
Describe alternatives you've considered
Keep things as is
Using latest 4.0.2 version of @angular/three.
Added cannon as follows
npm i @angular-three/cannon cannon-es
ng serve working fine.
Wrapped ngt-group with ngt-physics as follows
<ngt-group #group="ngtGroup" [name]="'room'">
<ngt-mesh *ngFor="let item of shapes"
[position]="item.position" [rotation]="item.rotation" [scale]="item.scale" [castShadow]="true" [receiveShadow]="true"
#mesh="ngtMesh">
<ngt-mesh-standard-material [parameters]="{ color: item.color, roughness: 0.7, metalness:0.0 }">
<ngt-box-geometry *ngIf="item.shapename=='box'" [args]="[0.2, 0.2, 0.2]">
<ngt-cone-geometry *ngIf="item.shapename=='cone'" [args]="[0.2, 0.2, 64]">
<ngt-cylinder-geometry *ngIf="item.shapename=='cylinder'" [args]="[ 0.2, 0.2, 0.2, 64]">
<ngt-icosahedron-geometry *ngIf="item.shapename=='icosahedron'" [args]="[ 0.2, 8]">
<ngt-torus-geometry *ngIf="item.shapename=='torus'" [args]="[ 0.2, 0.04, 64, 32]">
Browser console shows this error.
ERROR DOMException: Failed to construct 'Worker': Script at 'file:///C:/Users/adria/source/repos/angular-vr/node_modules/@angular-three/cannon/fesm2015/utils/worker.js' cannot be accessed from origin 'http://localhost:4200'.
at new NgtPhysicsStore (http://localhost:4200/vendor.js:20051:15)
at NodeInjectorFactory.NgtPhysicsStore_Factory [as factory] (http://localhost:4200/vendor.js:20280:10)
at getNodeInjectable (http://localhost:4200/vendor.js:42415:44)
at searchTokensOnInjector (http://localhost:4200/vendor.js:42352:16)
at getOrCreateInjectable (http://localhost:4200/vendor.js:42296:38)
at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:53256:12)
at NodeInjectorFactory.NgtPhysics_Factory [as factory] (http://localhost:4200/vendor.js:20409:95)
at getNodeInjectable (http://localhost:4200/vendor.js:42415:44)
at instantiateAllDirectives (http://localhost:4200/vendor.js:49148:27)
at createDirectivesInstances (http://localhost:4200/vendor.js:48497:5)
Is there something I should be adding to angular.json or tsconfig.json?
Scope
Describe the bug
ERROR TypeError: THREE.BufferAttribute: array should be a Typed Array.
at new BufferAttribute (three.module.js:8981:10)
at NgtBufferAttribute.init (angular-three-core.mjs:3230:67)
at angular-three-core.mjs:3211:18
at ZoneDelegate.invoke (zone.js:372:1)
at Zone.run (zone.js:134:1)
at NgZone.runOutsideAngular (core.mjs:25371:1)
at NgtBufferAttribute.set attributeArgs [as attributeArgs] (angular-three-core.mjs:3210:21)
at NgtBufferAttribute.set args [as args] (angular-three-core-attributes.mjs:13:9)
at Object.ngOnChangesSetInput [as setInput] (core.mjs:1502:1)
at setInputsForProperty (core.mjs:10959:1)
To Reproduce
Template contains the following
<ngt-line #line="ngtLine" >
<ngt-buffer-geometry>
<ngt-buffer-attribute attach="position" [args]="[[0, 0, 0, 0, 0, - 1], 3]"></ngt-buffer-attribute>
</ngt-buffer-geometry>
<ngt-line-basic-material [parameters]="{ vertexColors: true, blending: blending }"></ngt-line-basic-material>
</ngt-line>
Get above in browser console for ngt-buffer-attribute attach="position"
Expected behavior
Should work without error. Replacing with a variable doesn't work either.
Additional context
Converting https://github.com/mrdoob/three.js/blob/master/examples/webxr_vr_cubes.html to @angular/three.
I have the whole example converted to @angular/three, but trying to replace
const geometry = new BufferGeometry();
geometry.setAttribute('position', new Float32BufferAttribute([0, 0, 0, 0, 0, - 1], 3));
geometry.setAttribute('color', new Float32BufferAttribute([0.5, 0.5, 0.5, 0, 0, 0], 3));
const material = new LineBasicMaterial({ vertexColors: true, blending: AdditiveBlending });
return new Line(geometry, material);
Want to make the track-pointer line attached to XR controller be something that can be declared, instead of hard-coded.
Hi Team,
So we are trying to use angular-three to make some 3D visualization and we are trying to build a simple Skybox. For this purpose we are trying to import ngt-sphere-geometry and for that we are importing the ThreeSphereBufferGeometryModule and we are getting this error:
Code structure as follows:
app.module.ts
import {ThreeSphereBufferGeometryModule} from "@angular-three/core/geometries";
@NgModule({
declarations: [
AppComponent,
ModelViewComponent
],
imports: [
...
ThreeSphereBufferGeometryModule,
],
providers: [],
bootstrap: [AppComponent]
})
model-view-component.html
<ngt-canvas
[camera]='{position: [1, 1, 3], fov: 90, near: 0.1, far: 1000}'
[scene]="{ fog: ['000000', 1, 15000] | fog }"
(created)='$event.gl.setClearColor("gray")'
[shadows]="true"
>
<ngt-mesh>
<ngt-sphere-geometry [args]="[500, 60,40]" #skybox> </ngt-sphere-geometry>
</ngt-mesh>
<ngt-grid-helper o3d></ngt-grid-helper>
</ngt-canvas>
We only get this error when trying to import any buffer geometry into the scene. Thanks for the help in advance!
Code below might be a good candidate for an easy drop-in SOBA 3D Text component.
<ngt-mesh-standard-material #mat1="ngtMeshStandardMaterial"
[parameters]="{ color:'#b00000' | color }">
</ngt-mesh-standard-material>
<ngt-mesh-standard-material #mat2="ngtMeshStandardMaterial"
[parameters]="{ color:'#ff8000' | color }">
</ngt-mesh-standard-material>
<text3d [text]="'@angular-three'" [size]="10" [height]="5"
[fonturl]="fonturl"
[material]="[mat2.material, mat1.material]"></text3d>
import { Component, Input } from '@angular/core';
import { Box3, Euler, Group, Material, Mesh, MeshBasicMaterial } from 'three';
import { NgtTriplet } from '@angular-three/core';
import { Font, FontLoader, TextGeometry } from 'three-stdlib';
//
// adapted from three.js example https://threejs.org/examples/?q=text#webgl_geometry_text
//
@Component({
selector: 'text3d',
template: '<ngt-group #text="ngtGroup" (ready)="ready(text.group)" [position]="position" [scale]="scale" [rotation]="rotation"></ngt-group>'
})
export class Text3DComponent {
private _text = '';
@Input()
get text(): string {
return this._text;
}
set text(newvalue: string) {
this._text = newvalue;
if (newvalue && this.font) {
this.refreshtext()
}
}
//
// see https://threejs.org/docs/index.html?q=mesh#examples/en/loaders/FontLoader for more details
//
private _fonturl = '';
@Input()
get fonturl(): string {
return this._fonturl;
}
set fonturl(newvalue: string) {
if (newvalue && newvalue != this._fonturl) {
this._fonturl = newvalue;
const loader = new FontLoader();
loader.load(newvalue,
(font) => {
this.font = font;
this.refreshtext();
},
_ => { }, // progress
(err) => {
console.error(err);
});
}
}
@Input() size = 100;
@Input() height = 50;
@Input() curveSegments = 12;
@Input() bevelEnabled = false;
@Input() bevelThickness = 10;
@Input() bevelSize = 8;
@Input() bevelOffset = 0;
@Input() position = [0, 0, 0] as NgtTriplet;
@Input() rotation = new Euler();
@Input() scale = [1, 1, 1] as NgtTriplet;
@Input() material: Material | Material[] = new MeshBasicMaterial();
@Input() center = true;
private font!: Font;
private group!: Group;
private lastmesh!: Mesh;
ready(group: Group) {
this.group = group;
}
private refreshtext() {
if (this.lastmesh) {
this.group.remove(this.lastmesh);
}
const textGeo = new TextGeometry(this.text, {
font: this.font,
size: this.size,
height: this.height,
curveSegments: this.curveSegments,
bevelEnabled: this.bevelEnabled,
bevelThickness: this.bevelThickness,
bevelSize: this.bevelSize,
bevelOffset: this.bevelOffset,
});
let centerOffset = 0;
if (this.center) {
textGeo.computeBoundingBox();
const boundingBox = textGeo.boundingBox ?? new Box3();
centerOffset = - 0.5 * (boundingBox.max.x - boundingBox.min.x);
}
const mesh = new Mesh(textGeo, this.material);
mesh.position.set(this.position[0] + centerOffset, this.position[1], this.position[2]);
mesh.rotation.copy(this.rotation);
mesh.scale.set(this.scale[0], this.scale[1], this.scale[2]);
this.group.add(mesh);
this.lastmesh = mesh;
}
}
Is your feature request related to a problem? Please describe.
The consumers of the library probably need some type of Testing harness to test the objects in the 3D scene
Describe the solution you'd like
Provide a module/small testing framework for the consumers to use
Describe alternatives you've considered
Look for a 3rd party one and use as recommendation
Additional context
Testing is important
Originally posted by IRobot1 February 19, 2022
In VR, I'd like to grab a object. If it has physics enabled, I'd like to disable it until I release the object.
I was looking at NgtPhysicsStore, but not sure how to use it.
This isn't supported at the moment.
Scope
Describe the bug
The angular-three-soba-abstractions gizmo implementation is currently throwing an exception because it doesn't find the 'scene' store. Instead, consider renaming or using the 'sceneOptions' store because that does appear to exist. Was the sceneOptions renamed recently and this part of the code wasn't updated?
To Reproduce
Steps to reproduce the behavior:
<ngt-soba-gizmo-helper [margin]="[80,80]" [alignment]="'top-left'">
<ngt-soba-gizmo-viewport
></ngt-soba-gizmo-viewport>
</ngt-soba-gizmo-helper>
Expected behavior
We expect the viewport gizmo to show up like it does in the story demo on the website. It doesn't.
Screenshots
Below we can see the state of the store and it has a store called 'sceneOptions' but not 'scene' as the code requests.
This repo does not have any testing yet. At least unit testings would be nice.
I'm trying to migrate Cannon Callbacks example using @angular-three/cannon.
I don't see these callbacks on the NgtPhysicsXXX object api method or the NgtPhysics object.
I don't see a way to get at the physics store or state to access the world state.
Any help or guidance is appreciated.
Scope
Describe the bug
I have this file need showing in my website:
https://drive.google.com/file/d/1Sqtx97m7hLXjdBndYzR28EO0xbqK0DJn/view?fbclid=IwAR0ZYoeYFxGtiuxoD_MgzMWe_o1kjkOmiTuZW3_iV6O9xhOZ82vSO8klp0I](url)
It's oke when using https://gltf-viewer.donmccurdy.com/ for loading
But I can not showing this file in my website when using NgtGLTFLoaderService
You can see error in file attach
Scope
Describe the bug
Using an ngt-group throws an exception when trying to add to a parent object.
To Reproduce
Steps to reproduce the behavior:
Uncaught TypeError: Cannot read properties of null (reading 'add') at NgtObject3dController._NgtObject3dController_addToParent (:4200/vendor.js:71004) at :4200/vendor.js:70993
It seems like the add method might have been renamed to something else.
Expected behavior
We expect to be able to create a group for a collection of objects, as seen in the youtube video here:
https://youtu.be/RCgdXY9-Ir8?t=2587
The three.js documentation for the group is here:
https://threejs.org/docs/#api/en/objects/Group
https://github.com/pmndrs/drei#staging
https://stackblitz.com/edit/angular-playground-v13-2-k8ksjt?file=src/app/app.module.ts
I have tested the basic soba controls -
from https://angular-three.netlify.app/?path=/docs/introduction-first-scene--page.
Error: Can't find package:worker_threads
Please give me angular starter stackblitz link for soba.. You are doing great work for Angular Developers.. Thanks a lot for your valuable time. Thanks..
As title said, would be nice to have an ng add
schematic to handle initialize an Angular Three project.
Added cannon to project called ng3-cannon-template
npm i @angular-three/cannon@latest
npm i cannon-es
npm i -DE npx
npm i -DE @angular-three/schematics
npx ng generate @angular-three/schematics:cannon ng3-cannon-template
ng build results in the following error
Error: node_modules/cannon-es/dist/cannon-es.d.ts:359:36 - error TS2304: Cannot find name 'HTMLImageElement'.
359 setHeightsFromImage(image: HTMLImageElement, scale: Vec3): void;
Original project create using these commands
ng new ng3-cannon-template
cd ng3-cannon-template
npm i @angular-three/core@latest
npm install -E [email protected]
npm install -DE @types/three
resulting package.json
{
"name": "ng3-cannon-template",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular-three/cannon": "^4.3.0",
"@angular-three/core": "^4.3.0",
"@angular/animations": "~13.2.0",
"@angular/common": "~13.2.0",
"@angular/compiler": "~13.2.0",
"@angular/core": "~13.2.0",
"@angular/forms": "~13.2.0",
"@angular/platform-browser": "~13.2.0",
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
"cannon-es": "^0.19.0",
"rxjs": "~7.5.0",
"three": "0.137.5",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.2.4",
"@angular-three/schematics": "4.3.0",
"@angular/cli": "~13.2.4",
"@angular/compiler-cli": "~13.2.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"@types/three": "0.137.0",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"npx": "10.2.2",
"typescript": "~4.5.2"
}
}
I noticed where wasn't an easy way to move and look around a scene using mouse and keyboard. Code below might be a good candidate for an easy drop-in SOBA component.
import { Component, Input } from '@angular/core';
import { Camera, Vector3 } from 'three';
import { NgtCanvasStore, NgtRender } from '@angular-three/core';
//
// adapted from three.js games fps example https://github.com/mrdoob/three.js/blob/master/examples/games_fps.html
//
@Component({
selector: 'pointer-lock-controls',
template: '<ngt-group (ready)="ready()" (animateReady)="animate($event.state)"></ngt-group>'
})
export class PointerLockControlsComponent {
@Input() container?: HTMLElement;
@Input() viewerheight = 1.5;
@Input() movespeed = 1;
@Input() rotatefactor = 2000;
private keyStates = new Map<string, boolean>([]);
private camera!: Camera;
constructor(private canvasStore: NgtCanvasStore) { }
ready() {
const camera = this.canvasStore.get((s) => s.camera);
camera.rotation.order = 'YXZ';
this.camera = camera;
// movement
document.addEventListener('keydown', (event) => {
this.keyStates.set(event.code, true);
});
document.addEventListener('keyup', (event) => {
this.keyStates.set(event.code, false);
});
if (!this.container) {
this.container = document.body;
}
this.container.addEventListener('mousedown', () => {
document.body.requestPointerLock();
});
// rotation
document.body.addEventListener('mousemove', (event) => {
if (document.pointerLockElement === document.body) {
camera.rotation.y -= event.movementX / this.rotatefactor;
camera.rotation.x -= event.movementY / this.rotatefactor;
}
});
}
private getForwardVector(): Vector3 {
const playerDirection = new Vector3()
this.camera.getWorldDirection(playerDirection);
playerDirection.y = 0;
playerDirection.normalize();
return playerDirection;
}
private getSideVector(): Vector3 {
const playerDirection = new Vector3()
this.camera.getWorldDirection(playerDirection);
playerDirection.y = 0;
playerDirection.normalize();
playerDirection.cross(this.camera.up);
return playerDirection;
}
private playerVelocity = new Vector3();
private updateVelocity(deltaTime: number) {
const speedDelta = deltaTime * 8;
if (this.keyStates.get('KeyW')) {
this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
}
if (this.keyStates.get('KeyS')) {
this.playerVelocity.add(this.getForwardVector().multiplyScalar(-speedDelta));
}
if (this.keyStates.get('KeyA')) {
this.playerVelocity.add(this.getSideVector().multiplyScalar(-speedDelta));
}
if (this.keyStates.get('KeyD')) {
this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
}
}
private moveCamera(deltaTime: number) {
// slow after mouse up
let damping = Math.exp(-3 * deltaTime) - 1;
this.playerVelocity.addScaledVector(this.playerVelocity, damping);
const deltaPosition = this.playerVelocity.clone().multiplyScalar(deltaTime);
if (this.camera) {
this.camera.position.add(deltaPosition);
this.camera.position.y = this.viewerheight;
}
}
animate({ delta }: NgtRender) {
this.updateVelocity(delta*this.movespeed); // check for input
this.moveCamera(delta); // move player
}
}
Clone https://github.com/IRobot1/ng3-cannon-template
ng build to see the problem
Error: src/app/app.component.html:8:17 - error NG8002: Can't bind to 'getPhysicProps' since it isn't a known property of 'ngt-mesh'.
8 [getPhysicProps]="getCubeProps"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:9:16
9 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.