/**
* Main animation loop
*/
function animate() {
requestAnimationFrame(animate);
now = performance.now();
deltaTime = now - lastFrame;
if (deltaTime >= snakeSpeed) {
lastFrame = now;
snake.move(playerOrientation);
if (snake.getPosition().x > frustrumWidth) {
snake.setPosition(new Vector3(-frustrumWidth, snake.getPosition().y));
} else if (snake.getPosition().x < -frustrumWidth) {
snake.setPosition(new Vector3(frustrumWidth, snake.getPosition().y));
}
if (snake.getPosition().y > frustrumHeight) {
snake.setPosition(new Vector3(snake.getPosition().x, -frustrumHeight));
} else if (snake.getPosition().y < -frustrumHeight) {
snake.setPosition(new Vector3(snake.getPosition().x, frustrumHeight));
}
renderer.render(scene, camera);
}
}
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
constructor(rendererSettings: THREE.WebGLRendererParameters = {},
cameraSettings: PerspectiveCameraParameters = {}){
super();
this.addClass('ThreeRendererWidget');
this._scene = new THREE.Scene();
this._canvas = document.createElement('canvas');
$(this._canvas).css({position: "absolute"});
rendererSettings.canvas = this._canvas;
this._renderer = new THREE.WebGLRenderer(rendererSettings);
this._camera = new THREE.PerspectiveCamera(cameraSettings.fov,
cameraSettings.aspect,
cameraSettings.near,
cameraSettings.far);
this._scene.add(this._camera);
this._renderer.render(this._scene, this._camera);
this.node.appendChild(this._canvas);
}
const renderFunction = (scene: Scene, camera: Camera, renderTarget?: RenderTarget, forceClear?: boolean) => {
const oldWarn = window.console.warn;
// get rid of useless message but warn about everything else
window.console.warn = (...args: string[]) => {
if (args.length === 2
&& args[0] === "THREE.WebGLProgram: gl.getProgramInfoLog()"
&& args[1].match(/^\s*$/) !== null) {
return;
}
oldWarn.call(window.console, ...args);
};
rendererInstance.render(scene, camera, renderTarget, forceClear);
window.console.warn = oldWarn;
// redefine to wrap
Object.defineProperty(this.wrapper, "render", getWrappedAttributes(property, rendererInstance, "render"));
};
function render() {
requestAnimationFrame(render);
// line.rotation.x += 0.01;
// line.rotation.y += 0.01;
// shapeMesh.rotation.y += 0.01;
geometry.vertices = [];
points[renderIteration].forEach((point) => {
geometry.vertices.push(new THREE.Vector3(worldX(point[0]), worldY(point[1])));
});
geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
renderIteration++;
if (renderIteration > 2) {
renderIteration = 0;
}
}
const animate = () => {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
const geometry = new THREE.SphereGeometry(sphereRadius, numSegments, numSegments)
const attributes = {
displacement: {
type: 'f'
, value: []
}
}
const sceneObjects = [
, new THREE.Mesh(geometry, unlitMaterial)
, new THREE.Mesh(geometry, fakeLitMaterial)
, new THREE.Mesh(attributes, geometry, morphingFakeLitMaterial)
]
const sceneObjectOffset:number = 50
const centeredContentOffset:number = Math.floor(sceneObjects.length / 2) * sphereDiameter * -1
sceneObjects.reduce((offset, mesh) => {
mesh.position.set(offset, 100, 100)
scene.add(mesh)
offset += sphereDiameter + sceneObjectOffset
return offset
}, centeredContentOffset)
attributes.displacement.value = geometry.vertices.map(() => Math.random() * 30)
renderer.setSize(window.innerWidth, window.innerHeight)
camera.position.z = 500
document.body.appendChild(renderer.domElement)
renderer.render(scene, camera)
public animate() {
window.requestAnimationFrame(_ => this.animate());
this.controls.update();
this.renderer.render(this.scene, this.camera);
}
function animate(time: number) {
animationId = requestAnimationFrame(animate);
if (previousTime != null) {
const elapsedTime = time - previousTime;
accumulatedTime = Math.min(accumulatedTime + elapsedTime, maxAccumulatedTime);
}
previousTime = time;
const ticks = Math.floor(accumulatedTime / clientTickDuration);
accumulatedTime -= ticks * clientTickDuration;
if (pub != null && pub.match == null) {
sceneAngleY += Math.PI / 640;
} else {
if (Math.abs(sceneAngleY) > 0.1) sceneAngleY = lerp(sceneAngleY, 0, 0.15);
else sceneAngleY = 0;
}
if (sceneAngleY > Math.PI) sceneAngleY -= Math.PI * 2;
scene.setRotationFromEuler(tmpEuler.set(0, sceneAngleY, 0));
let width = canvas.parentElement.clientWidth;
let height = canvas.parentElement.clientHeight;
if (width > height * 4 / 3) width = height * 4 / 3;
if (height > width * 3 / 4) height = width * 3 / 4;
canvas.width = width;
canvas.height = height;
camera.updateProjectionMatrix();
threeRenderer.setSize(canvas.width, canvas.height, false);
threeRenderer.render(scene, camera);
input.gather();
if (input.hasJustPressedLeftTrigger) { socket.emit("throwBall"); }
for (const playerId in modelsById) {
const model = modelsById[playerId];
const { avatar } = players.byId[playerId];
const hasBall = pub.ball.playerId === playerId;
model.nametag.setRotationFromEuler(tmpEuler.set(0, -sceneAngleY, 0));
if (playerId === myPlayerId) {
for (let i = 0; i < ticks; i++) input.predict(pub.match != null, pub.ball.playerId === myPlayerId, ballThrownTimer > 0);
model.root.position.set(input.prediction.x, 0, input.prediction.z);
model.body.setRotationFromEuler(tmpEuler.set(0, -input.prediction.angleY, 0));
model.shoulders.setRotationFromEuler(tmpEuler.set(0, 0, input.prediction.catching || hasBall ? input.prediction.angleX : -Math.PI * 0.4));
} else {
// TODO: Lerp between previous and current!
model.root.position.set(avatar.x, 0, avatar.z);
model.body.setRotationFromEuler(tmpEuler.set(0, -avatar.angleY, 0));
model.shoulders.setRotationFromEuler(tmpEuler.set(0, 0, avatar.catching || hasBall ? avatar.angleX : -Math.PI * 0.4));
}
model.root.position.y = shared.getAvatarY(avatar.jump);
}
if (pub != null && pub.ball.playerId == null) {
ballModel.position.set(pub.ball.x, pub.ball.y, pub.ball.z);
ballMarker.position.set(pub.ball.x, 0.01, pub.ball.z);
}
}
function render(): void {
let timer = 0.002 * Date.now()
box.position.y = 0.5 + 0.5 * Math.sin(timer)
box.rotation.x += 0.1
renderer.render(scene, camera)
}