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:
Threejs: Pointlight not lighting up my geometries
Programing Coderfunda
December 08, 2023
No comments
Related Posts:
TemPHPest PHP Extension for VSCode--- TemPHPest is an extension for Visual Studio Code to improve writing PHP in VS Code. Created by Liam Hammett, this package adds rich PHP featu… Read More
FINDSTR' is not recognized as an internal or external commandHello I trying to install jmeter I type cd C:\apache-jmeter-2.13\bin C:\apache-jmeter-2.13\binjmeter.bat And i receive this message FINDSTR' i… Read More
Can `postMessage` messages get lost/dropped e.g. if recipient's main thread is coincidentally blocked at the time it should have received it?Context: I'm tracking down a hard-to-replicate bug related to messages between frames. One thing I'm mildly suspicious of is that messages between… Read More
I built a free and public presentation tool called Simple Slides using Laravel/Filament/Inertia/Vue, and I wanted to share itHey everyone, I know no-one likes self-promotion, and I genuinely am trying to not make it about that. We talk a lot about Filament and Inertia here, … Read More
How does StackOverflow optimise the performance for the display of the questions?I am trying to learn C#.net to program a web app. And having learned that stackoverflow uses C#.net I am happy to discover it. I noticed that at… Read More
0 comments:
Post a Comment
Thanks