bert/isdefoobaropen
1
0
Fork 0
Code Pull Requests Releases Activity

Implement basic lighting.

Browse Source
This commit is contained in:
Bert Peters
2019-03-12 16:59:19 +01:00
parent 577a857306
commit 19d9630aed
1 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/open.js
View File

@@ -4,15 +4,21 @@ const STAR_POINTS = 5;
let scene, camera, renderer; let scene, camera, renderer;
let group; let group;
let lights = {};
function addStar() { function addStar() {
let geometry = new THREE.BufferGeometry(); let geometry = new THREE.BufferGeometry();
let vertices = starCoordinates(2, 3, 0); let vertices = starCoordinates(2, 3, 0);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(filledStarIndices()); geometry.setIndex(filledStarIndices());
let material = new THREE.MeshBasicMaterial({color: 0x00ff00}); geometry.computeVertexNormals();
material.side = THREE.DoubleSide; let material = new THREE.MeshStandardMaterial({
side: THREE.DoubleSide,
color: 0x00ff00,
});
let star = new THREE.Mesh(geometry, material); let star = new THREE.Mesh(geometry, material);
star.receiveShadow = true;
group.add(star); group.add(star);
} }
@@ -23,16 +29,35 @@ function startOpenAnimation() {
renderer = new THREE.WebGLRenderer(); renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.autoUpdate = true;
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
group = new THREE.Group(); group = new THREE.Group();
scene.add(group); scene.add(group);
initLighting();
addStar(); addStar();
loadFont(); loadFont();
requestAnimationFrame(animate) requestAnimationFrame(animate)
} }
function initLighting() {
let spotLight = new THREE.PointLight(0xffffff);
spotLight.position.set(10, 10, 10);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024; // default
spotLight.shadow.mapSize.height = 1024; // default
scene.add(spotLight);
let ambient = new THREE.AmbientLight(0x404040);
scene.add(ambient);
lights.spotLight = spotLight;
lights.ambient = ambient;
}
function loadFont() { function loadFont() {
import('three/examples/fonts/helvetiker_bold.typeface').then(function (data) { import('three/examples/fonts/helvetiker_bold.typeface').then(function (data) {
let font = new THREE.Font(data); let font = new THREE.Font(data);
@@ -42,12 +67,15 @@ function loadFont() {
height: 0.3, height: 0.3,
curveSegments: 12 curveSegments: 12
}).center(); }).center();
geometry.computeFaceNormals();
let textMaterial = new THREE.MeshBasicMaterial({ let textMaterial = new THREE.MeshStandardMaterial({
color: 0xff00ff color: 0xff00ff
}); });
let mesh = new THREE.Mesh(geometry, textMaterial); let mesh = new THREE.Mesh(geometry, textMaterial);
mesh.castShadow = true;
mesh.receiveShadow = true;
group.add(mesh); group.add(mesh);
}); });
} }
@@ -93,7 +121,7 @@ function starCoordinates(innerRadius, outerRadius, z) {
for (let i = 0; i < STAR_POINTS; ++i) { for (let i = 0; i < STAR_POINTS; ++i) {
const offset = 3 * 2 * i; const offset = 3 * 2 * i;
buf[offset + 0] = Math.sin(STAR_SLICE * i) * outerRadius; buf[offset] = Math.sin(STAR_SLICE * i) * outerRadius;
buf[offset + 1] = Math.cos(STAR_SLICE * i) * outerRadius; buf[offset + 1] = Math.cos(STAR_SLICE * i) * outerRadius;
buf[offset + 3] = Math.sin(STAR_SLICE * (i + 0.5)) * innerRadius; buf[offset + 3] = Math.sin(STAR_SLICE * (i + 0.5)) * innerRadius;
buf[offset + 4] = Math.cos(STAR_SLICE * (i + 0.5)) * innerRadius; buf[offset + 4] = Math.cos(STAR_SLICE * (i + 0.5)) * innerRadius;