#first person renders black

9 messages · Page 1 of 1 (latest)

hearty river
#

first person renders black

#

i have tried deleting lookat torus, it still breaks

#

tried everything searches gave me

midnight creek
#

Can you make a sandbox or demo of your problem? Or post a shorter snippet of code?

#

For safety reasons few people will download random files from online, especially code

hearty river
hearty river
# 
import './style.css'

import * as THREE from 'three';

import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';


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

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

const scene = new THREE.Scene();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

camera.position.setZ(300);
camera.position.setX(300);
var clock = 0 ;
var clock = new THREE.Clock();

renderer.render(scene, camera);

THREE.Clock.autoStart = true;

const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
const material = new THREE.MeshStandardMaterial({color : 0x00ff00});
const torus = new THREE.Mesh(geometry, material);

scene.add(torus);

const pointlight = new THREE.PointLight(0xffffff);
pointlight.position.set(5,5,5);
const amblight = new THREE.AmbientLight(0xffffff);
scene.add(pointlight);
const lightHelper = new THREE.PointLightHelper(pointlight);
const gridhelper = new THREE.GridHelper(200, 50);

scene.add(lightHelper, amblight, gridhelper);


const controls = new FirstPersonControls(camera, renderer.domElement);
controls.enabled = true;
controls.lookAt(torus);
controls.movementSpeed = 1000; controls.lookSpeed = 0.125; controls.lookVertical = false;
controls.update();

function dust(){
  const geometry = new THREE.SphereGeometry(0.1, 24, 24);
  const material = new THREE.MeshStandardMaterial({color:0xffffff});
  const star = new THREE.Mesh(geometry,material);

  const [x,y,z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(100));

  star.position.set(x, y, z);
  scene.add(star);
}

const dusts = new Array(200).fill().forEach(dust);



camera.lookAt(torus);

function animate(){
  requestAnimationFrame(animate);
  torus.rotation.x += 0.01;
  renderer.render(scene, camera);
  controls.update(clock.getDelta());

}

animate();```
#

here it is in none file format

hearty river
#

updated