#Hello, I have some problems using FPS Controls, can you help?

54 messages · Page 1 of 1 (latest)

rugged dagger
#

If screen is back - did you check devtools console in the browser for errors?

vale cape
#

There are no errors

#

when I comment controls.update()

#

then this happens

rugged dagger
#

That’s a wrong console then

#

Because in your animate() function you have a console.log - which doesn’t show in the console on the screenshot

#

Or you shared a different code

vale cape
#

No, I have just removed console.log

# 
import * as THREE from "three";
import { FirstPersonControls } from "three/addons/controls/FirstPersonControls.js";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Create a plane to serve as the ground
const planeGeometry = new THREE.PlaneGeometry(100, 100);
const planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  side: THREE.DoubleSide,
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotateX(Math.PI / 2);
scene.add(plane);

// Add a light to the scene
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
scene.add(light);

// Set up the FirstPersonControls
const controls = new FirstPersonControls(camera, renderer.domElement);
controls.lookSpeed = 0.1;
controls.movementSpeed = 10;
controls.noFly = true;
controls.lookVertical = true;
controls.constrainVertical = true;
controls.verticalMin = 1.0;
controls.verticalMax = 2.0;
controls.lon = -90;

camera.position.y = 1;
camera.position.z = 5;

const animate = function () {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
};

animate();
#

I also have seen this

image.png
#

Can I see the code? I want exactly same thing to do

rugged dagger
vale cape
rugged dagger
#

Corner

#

Bottom

#

Right

vale cape
#

I have opened it and plaied

rugged dagger
#

Corner

vale cape
#

ok 1 m

rugged dagger
#

Screenshot the browser

#

I’m on phone

#

Playing with Ogar while @pseudo pecan ain’t paying attention

vale cape
#

Ahh

#

I have seen it I think

#

<>

#

this

#

button

#

ah some problems

#

this is throwing error

#

how to handle it?

rugged dagger
#

what do I lay my eyes upon tho

#

just copy code parts from the example - no point in running it locally, it'll look same as the one online

#

(to run examples locally you'll need a webserver that points to correct assets)

vale cape
#

Aha

#

I have downloaded it

#

but does not seem to work

rugged dagger
#

wdym?

#

downloaded what?

vale cape
#

yoou see collision-world.glb

vale cape
#

but I downloaded it from git

rugged dagger
#

yes, you need the assets to be served locally

vale cape
#

Yup but does not work

#

._>

#

why this cannot find?

#

Ok, done nvm