CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

08 December, 2023

Threejs: Pointlight not lighting up my geometries

 Programing Coderfunda     December 08, 2023     No comments   

I'm trying to create a scene from a set of triangles using Threejs. To get the shape of all the triangles i used a BufferGeometry which seems to create the shape correctly. However, it does not respond to lighting. I have tried with several different materials including standard, phong and lambert. With on luck. I understood that one might need to compute normals to the mesh, so i tried adding computeVertexNormals to the code as well but no luck. Ive also tried using flatshading, but that did not seem to have any effect either.


I then figured it might be the geometry and not the material that was throwing me of, so I tried adding a spinning torus to my scence using phong material, but it does not get iluminated either.


The code I have so far is this:
import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';

const canvas = document.querySelector('#c')
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000000);
const renderer = new THREE.WebGLRenderer({antialias: true,castShadow:true, canvas});
const controls = new OrbitControls(camera, canvas)

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement)

const topoGeometry = new THREE.BufferGeometry();
// Fetching triangles from static file
await fetch('
http://{localserver}/topography.json') /> .then((response) => response.json())
.then((json) => {
const vertices = new Float32Array(json.geometry.vertices.map((coord) => {
return [coord[0], coord[1], coord[2]]
}).flat())
const indices = json.geometry.triangles.flat()
topoGeometry.setIndex( indices )
topoGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
topoGeometry.computeVertexNormals()
});
const topoMaterial = new THREE.MeshStandardMaterial({
wireframe: false,
color: 0x00ff00,
});
const topo = new THREE.Mesh( topoGeometry, topoMaterial )
scene.add(topo)

camera.position.z = 2000;
camera.position.x = 0;
camera.position.y = 0;

const torusGeometry = new THREE.TorusGeometry(50,50)
const torusMaterial = new THREE.MeshPhongMaterial()
const torus = new THREE.Mesh(boxGeometry, boxMaterial)
torus.position.setZ(400)
scene.add(torus)

//Adding pointlight to scene
const light = new THREE.PointLight( 0xffffff, 1, 1000 );
light.position.set( 0, 0, 600 );
light.castShadow = true;
scene.add( light );

const lighthelper = new THREE.PointLightHelper(light,30, 0xffffff)
const gridHelper = new THREE.GridHelper(3000,50)
gridHelper.rotateX(Math.PI / 2)
scene.add(lighthelper, gridHelper)

function animate(){
requestAnimationFrame(animate)
camera.updateProjectionMatrix()
controls.update(0.01)
box.rotateX(0.01)
box.rotateY(0.01)
renderer.render(scene, camera)
}
animate()



Heres a small gif from the resulting scene:
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • Laravel adding condition to relation Laravel adding condition to relation21App\Request::where('id',4)2 ->whereHas('quotes', function ($query) {3 $query->where('statu… Read More
  • Laravel add request “laravel add request”laravel add values to request11 request()->request->add(['index'=>'value']);laravel add request21$request->all… Read More
  • Laravel adding new items to config run timeLaravel adding new items to config run timeadd(...$newItems) … Read More
  • Laravel add values to request Laravel add values to request11 request()->request->add(['index'=>'value']);21$request->all() + ['index' => 'value'];… Read More
  • Laravel admin panel free package <?phpLaravel admin panel free package$ composer require orchid/platform… Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • Features CodeIgniter
    Features CodeIgniter There is a great demand for the CodeIgniter framework in PHP developers because of its features and multiple advan...
  • Laravel Breeze with PrimeVue v4
    This is an follow up to my previous post about a "starter kit" I created with Laravel and PrimeVue components. The project has b...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • Fast Excel Package for Laravel
      Fast Excel is a Laravel package for importing and exporting spreadsheets. It provides an elegant wrapper around Spout —a PHP package to ...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024
  • pyspark XPath Query Returns Lists Omitting Missing Values Instead of Including None - 9/20/2024
  • SQL REPL from within Python/Sqlalchemy/Psychopg2 - 9/20/2024
  • MySql Explain with Tobias Petry - 9/20/2024
  • How to combine information from different devices into one common abstract virtual disk? [closed] - 9/20/2024

Laravel News

  • Lightning Fast Schedule Management for Laravel - 6/20/2025
  • Reset Rate Limits Dynamically with Laravel's clear Method - 6/18/2025
  • Manipulate Image URLs in Laravel with the Image Transform Package - 6/19/2025
  • Handle Nested Arrays Elegantly with Laravel's fluent() Helper - 6/18/2025
  • Laravel 12.19 Adds a useEloquentBuilder Attribute, a FailOnException Queue Middleware, and More - 6/18/2025

Copyright © 2025 CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda