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
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Generate Migrations from an Existing Database With the Migration Generator Package
    Laravel Migration Generator Migration Generator for Laravel is a package by Bennett Treptow to generate migrations from existing database ...
  • Search Through Models with Laravel Searchable
      Laravel Searchable   is a package by   Spatie   to search through models and other sources pragmatically. Using this package, you can get ...
  • Laravel Razorpay Integration | Payment gateway integration Laravel in 30 mins | Laravel Razorpay
    1 Integration of Razorpay with Laravel. In this tutorial, I have taught how to integrate payment gateway with laravel with mini-project. If...
  • Tailwindcss best practices for responsive design
    Tailwind CSS provides powerful utilities for responsive design out of the box. To use it effectively and maintain clean, scalable code, here...
  • Vue.js Render functions
        Vue.js Render functions Vue.js recommends us to use templates to build HTML. Here, we can use the render function as a closer-to-the-co...

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 (69)
  • 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

  • ►  2026 (12)
    • ►  07/26 - 08/02 (11)
    • ►  06/28 - 07/05 (1)
  • ►  2025 (4)
    • ►  07/06 - 07/13 (2)
    • ►  06/29 - 07/06 (2)
  • ►  2024 (486)
    • ►  09/15 - 09/22 (30)
    • ►  09/08 - 09/15 (35)
    • ►  09/01 - 09/08 (35)
    • ►  08/11 - 08/18 (2)
    • ►  08/04 - 08/11 (33)
    • ►  07/28 - 08/04 (30)
    • ►  07/07 - 07/14 (11)
    • ►  06/30 - 07/07 (35)
    • ►  06/23 - 06/30 (5)
    • ►  06/02 - 06/09 (31)
    • ►  05/26 - 06/02 (20)
    • ►  05/05 - 05/12 (29)
    • ►  04/28 - 05/05 (26)
    • ►  04/07 - 04/14 (10)
    • ►  03/31 - 04/07 (34)
    • ►  03/24 - 03/31 (10)
    • ►  03/03 - 03/10 (35)
    • ►  02/25 - 03/03 (15)
    • ►  02/04 - 02/11 (22)
    • ►  01/28 - 02/04 (30)
    • ►  01/07 - 01/14 (8)
  • ▼  2023 (484)
    • ►  12/31 - 01/07 (35)
    • ►  12/24 - 12/31 (10)
    • ▼  12/03 - 12/10 (33)
      • Is nova profitable?
      • An introduction to Eloquent’s internals
      • Hard to find a job
      • Threejs: Pointlight not lighting up my geometries
      • Decrypt parameter store secrets conditionally?
      • Vue3 :style backgroundImage not working with require
      • Docker config for postgress and pgadmin fails
      • FrankenPHP v1.0 is Here
      • Creating a custom Laravel Pulse card
      • Is your github actions build currently failing on ...
      • How to handle authorization for changes on specifi...
      • Up-to-date methods of using Vue with Laravel in a ...
      • Using 1Password Service Accounts to inject secrets...
      • I've been loving Benchmarking lately, but the Fram...
      • Azure APIM API is not visible in Logic Apps
      • Terminate istio sidecar istio-proxy for a kubernet...
      • Laravel 10.35 Released
      • Livewire limitations?
      • CustomGPT expert on Laravel and FilamentPHP
      • Find a value from an array column in a dictionary ...
      • Manipulate values in element in xml file using xslt
      • Kivy language cannot reference id with python code
      • Changing prefix build for static asset in Nextjs
      • Creating a .NET 8 Blazor server on VS Code
      • Are worker gems like Sidekiq still needed for a ba...
      • Golang please help understanding the syntax
      • How can I tell which other projects in my enterpri...
      • Repeated measures Ancova in R
      • How to install nvm in mac?
      • php variable value acts like zero
      • Power BI Issue: Calculated Items Misbehaving When ...
      • Issue deleting a file in remote path via ssh
      • Are there any good PHP documentation generators fo...
    • ►  11/26 - 12/03 (20)
    • ►  11/05 - 11/12 (35)
    • ►  10/29 - 11/05 (20)
    • ►  10/22 - 10/29 (9)
    • ►  10/15 - 10/22 (7)
    • ►  10/08 - 10/15 (9)
    • ►  10/01 - 10/08 (10)
    • ►  09/24 - 10/01 (9)
    • ►  09/17 - 09/24 (9)
    • ►  09/10 - 09/17 (7)
    • ►  09/03 - 09/10 (9)
    • ►  08/27 - 09/03 (9)
    • ►  08/20 - 08/27 (8)
    • ►  08/13 - 08/20 (8)
    • ►  08/06 - 08/13 (8)
    • ►  07/30 - 08/06 (8)
    • ►  07/23 - 07/30 (7)
    • ►  07/16 - 07/23 (8)
    • ►  07/09 - 07/16 (7)
    • ►  07/02 - 07/09 (8)
    • ►  06/25 - 07/02 (7)
    • ►  06/18 - 06/25 (7)
    • ►  06/11 - 06/18 (7)
    • ►  06/04 - 06/11 (11)
    • ►  05/28 - 06/04 (7)
    • ►  05/21 - 05/28 (8)
    • ►  05/14 - 05/21 (11)
    • ►  05/07 - 05/14 (7)
    • ►  04/30 - 05/07 (7)
    • ►  04/23 - 04/30 (8)
    • ►  04/16 - 04/23 (9)
    • ►  04/09 - 04/16 (7)
    • ►  04/02 - 04/09 (4)
    • ►  03/26 - 04/02 (21)
    • ►  03/19 - 03/26 (2)
    • ►  03/12 - 03/19 (9)
    • ►  03/05 - 03/12 (26)
    • ►  02/26 - 03/05 (25)
    • ►  01/15 - 01/22 (7)
    • ►  01/08 - 01/15 (1)
  • ►  2022 (1037)
    • ►  12/11 - 12/18 (13)
    • ►  12/04 - 12/11 (1)
    • ►  11/27 - 12/04 (40)
    • ►  11/06 - 11/13 (1)
    • ►  10/16 - 10/23 (13)
    • ►  09/04 - 09/11 (5)
    • ►  08/21 - 08/28 (24)
    • ►  08/14 - 08/21 (24)
    • ►  07/03 - 07/10 (9)
    • ►  06/19 - 06/26 (3)
    • ►  05/29 - 06/05 (3)
    • ►  05/22 - 05/29 (3)
    • ►  05/15 - 05/22 (109)
    • ►  05/01 - 05/08 (7)
    • ►  04/24 - 05/01 (7)
    • ►  04/17 - 04/24 (64)
    • ►  04/10 - 04/17 (115)
    • ►  04/03 - 04/10 (73)
    • ►  03/27 - 04/03 (77)
    • ►  03/13 - 03/20 (2)
    • ►  03/06 - 03/13 (25)
    • ►  02/27 - 03/06 (18)
    • ►  02/20 - 02/27 (153)
    • ►  02/13 - 02/20 (187)
    • ►  01/30 - 02/06 (45)
    • ►  01/23 - 01/30 (15)
    • ►  01/16 - 01/23 (1)
  • ►  2021 (412)
    • ►  10/24 - 10/31 (2)
    • ►  07/25 - 08/01 (1)
    • ►  07/11 - 07/18 (10)
    • ►  06/13 - 06/20 (29)
    • ►  05/23 - 05/30 (1)
    • ►  05/02 - 05/09 (24)
    • ►  04/25 - 05/02 (24)
    • ►  04/18 - 04/25 (112)
    • ►  04/11 - 04/18 (1)
    • ►  04/04 - 04/11 (6)
    • ►  03/28 - 04/04 (86)
    • ►  03/21 - 03/28 (19)
    • ►  03/14 - 03/21 (2)
    • ►  03/07 - 03/14 (10)
    • ►  02/28 - 03/07 (1)
    • ►  02/21 - 02/28 (29)
    • ►  02/14 - 02/21 (13)
    • ►  02/07 - 02/14 (12)
    • ►  01/31 - 02/07 (6)
    • ►  01/17 - 01/24 (2)
    • ►  01/10 - 01/17 (8)
    • ►  01/03 - 01/10 (14)
  • ►  2020 (376)
    • ►  12/27 - 01/03 (37)
    • ►  12/20 - 12/27 (92)
    • ►  12/13 - 12/20 (29)
    • ►  12/06 - 12/13 (37)
    • ►  11/29 - 12/06 (4)
    • ►  11/15 - 11/22 (14)
    • ►  11/08 - 11/15 (8)
    • ►  11/01 - 11/08 (2)
    • ►  10/18 - 10/25 (14)
    • ►  10/11 - 10/18 (16)
    • ►  10/04 - 10/11 (10)
    • ►  09/20 - 09/27 (10)
    • ►  09/06 - 09/13 (19)
    • ►  08/30 - 09/06 (26)
    • ►  08/23 - 08/30 (4)
    • ►  08/16 - 08/23 (2)
    • ►  07/12 - 07/19 (48)
    • ►  05/17 - 05/24 (2)
    • ►  01/05 - 01/12 (2)
  • ►  2019 (74)
    • ►  07/07 - 07/14 (6)
    • ►  06/16 - 06/23 (6)
    • ►  02/10 - 02/17 (17)
    • ►  01/13 - 01/20 (37)
    • ►  01/06 - 01/13 (8)
  • ►  2018 (376)
    • ►  12/30 - 01/06 (24)
    • ►  12/16 - 12/23 (8)
    • ►  12/09 - 12/16 (98)
    • ►  12/02 - 12/09 (16)
    • ►  11/18 - 11/25 (36)
    • ►  11/04 - 11/11 (18)
    • ►  10/28 - 11/04 (10)
    • ►  10/21 - 10/28 (26)
    • ►  10/14 - 10/21 (52)
    • ►  10/07 - 10/14 (4)
    • ►  09/30 - 10/07 (2)
    • ►  09/23 - 09/30 (68)
    • ►  09/16 - 09/23 (4)
    • ►  09/09 - 09/16 (4)
    • ►  08/26 - 09/02 (6)

Data Publish News

Loading...

Al Jazeera – Breaking News, World News and Video from Al Jazeera

Loading...

Laravel News

Loading...

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