lzy
/
threepipe
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

Add exampels for different type of lights.

master
Palash Bansal 2 лет назад
Родитель
d9141ded70
Сommit
d4ac63ec73
Аккаунт пользователя с таким Email не найден
13 измененных файлов: 509 добавлений и 14 удалений
Разделённый вид Показать статистику Diff
  1. 36
    0
      examples/ambient-light/index.html
  2. 52
    0
      examples/ambient-light/script.ts
  3. 2
    1
      examples/directional-light/index.html
  4. 18
    13
      examples/directional-light/script.ts
  5. 36
    0
      examples/hemisphere-light/index.html
  6. 52
    0
      examples/hemisphere-light/script.ts
  7. 7
    0
      examples/index.html
  8. 36
    0
      examples/point-light/index.html
  9. 69
    0
      examples/point-light/script.ts
  10. 36
    0
      examples/rect-area-light/index.html
  11. 56
    0
      examples/rect-area-light/script.ts
  12. 36
    0
      examples/spot-light/index.html
  13. 73
    0
      examples/spot-light/script.ts

+ 36
- 0
examples/ambient-light/index.html Просмотреть файл

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ambient Light</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 52
- 0
examples/ambient-light/script.ts Просмотреть файл

@@ -0,0 +1,52 @@
import {
_testFinish,
AmbientLight2,
Box3B,
IObject3D,
Mesh,
Object3DWidgetsPlugin,
PhysicalMaterial,
PlaneGeometry,
ThreeViewer,
Vector3,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
dropzone: {
allowedExtensions: ['gltf', 'glb', 'hdr', 'obj', 'fbx', 'bin', 'png', 'jpeg', 'webp', 'jpg', 'exr'],
addOptions: {
disposeSceneObjects: true,
autoSetEnvironment: true, // when hdr/exr is dropped
},
},
plugins: [Object3DWidgetsPlugin],
})

// viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/ShadowmappableMesh.glb', {
autoCenter: true,
autoScale: true,
})

const ground = new Mesh(
new PlaneGeometry(100, 100)
.rotateX(-Math.PI / 2)
.translate(0, new Box3B().expandByObject(result!).getSize(new Vector3()).y / -2, 0),
new PhysicalMaterial({
color: '#ffffff',
})
)
viewer.scene.addObject(ground)

const light = viewer.scene.addObject(new AmbientLight2(0x00ff00, 5))

const ui = viewer.addPluginSync(TweakpaneUiPlugin, true)
ui.appendChild(light.uiConfig, {expanded: true})
}

init().then(_testFinish)

+ 2
- 1
examples/directional-light/index.html Просмотреть файл

@@ -11,7 +11,8 @@
<script type="importmap">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs"
}
}


+ 18
- 13
examples/directional-light/script.ts Просмотреть файл

@@ -1,9 +1,10 @@
import {
_testFinish,
Box3B,
DirectionalLight,
DirectionalLight2,
IObject3D,
Mesh,
Object3DWidgetsPlugin,
PCFSoftShadowMap,
PhysicalMaterial,
PlaneGeometry,
@@ -11,6 +12,7 @@ import {
ThreeViewer,
Vector3,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'

async function init() {

@@ -24,6 +26,7 @@ async function init() {
autoSetEnvironment: true, // when hdr/exr is dropped
},
},
plugins: [Object3DWidgetsPlugin],
})

// viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
@@ -44,23 +47,25 @@ async function init() {
ground.receiveShadow = true
viewer.scene.addObject(ground)

const directionalLight = viewer.scene.addObject(new DirectionalLight(0xffffff, 4))
directionalLight.position.set(2, 2, 2)
directionalLight.lookAt(0, 0, 0)
directionalLight.castShadow = true
directionalLight.shadow.mapSize.setScalar(1024)
directionalLight.shadow.camera.near = 0.1
directionalLight.shadow.camera.far = 10
directionalLight.shadow.camera.top = 2
directionalLight.shadow.camera.bottom = -2
directionalLight.shadow.camera.left = -2
directionalLight.shadow.camera.right = 2
const light = viewer.scene.addObject(new DirectionalLight2(0xffffff, 4))
light.position.set(2, 2, 2)
light.lookAt(0, 0, 0)
light.castShadow = true
light.shadow.mapSize.setScalar(1024)
light.shadow.camera.near = 0.1
light.shadow.camera.far = 10
light.shadow.camera.top = 2
light.shadow.camera.bottom = -2
light.shadow.camera.left = -2
light.shadow.camera.right = 2

viewer.renderManager.renderer.shadowMap.type = PCFSoftShadowMap

const rt = viewer.addPluginSync(RenderTargetPreviewPlugin)
rt.addTarget(()=>directionalLight.shadow.map || undefined, 'shadow', true, true, true)
rt.addTarget(()=>light.shadow.map || undefined, 'shadow', true, true, true)

const ui = viewer.addPluginSync(TweakpaneUiPlugin, true)
ui.appendChild(light.uiConfig, {expanded: true})
}

init().then(_testFinish)

+ 36
- 0
examples/hemisphere-light/index.html Просмотреть файл

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hemisphere Light</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 52
- 0
examples/hemisphere-light/script.ts Просмотреть файл

@@ -0,0 +1,52 @@
import {
_testFinish,
Box3B,
HemisphereLight2,
IObject3D,
Mesh,
Object3DWidgetsPlugin,
PhysicalMaterial,
PlaneGeometry,
ThreeViewer,
Vector3,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
dropzone: {
allowedExtensions: ['gltf', 'glb', 'hdr', 'obj', 'fbx', 'bin', 'png', 'jpeg', 'webp', 'jpg', 'exr'],
addOptions: {
disposeSceneObjects: true,
autoSetEnvironment: true, // when hdr/exr is dropped
},
},
plugins: [Object3DWidgetsPlugin],
})

// viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/ShadowmappableMesh.glb', {
autoCenter: true,
autoScale: true,
})

const ground = new Mesh(
new PlaneGeometry(100, 100)
.rotateX(-Math.PI / 2)
.translate(0, new Box3B().expandByObject(result!).getSize(new Vector3()).y / -2, 0),
new PhysicalMaterial({
color: '#ffffff',
})
)
viewer.scene.addObject(ground)

const light = viewer.scene.addObject(new HemisphereLight2(0x0000ff, 0xff0000, 20))

const ui = viewer.addPluginSync(TweakpaneUiPlugin, true)
ui.appendChild(light.uiConfig, {expanded: true})
}

init().then(_testFinish)

+ 7
- 0
examples/index.html Просмотреть файл

@@ -299,7 +299,9 @@
<ul>
<li><a href="./hdri-ground-plugin/">HDRi Ground Plugin <br/>(Projected Skybox)</a></li>
<li><a href="./render-target-preview/">Render Target Preview Plugin </a></li>
<li><a href="./object3d-generator-plugin/">Object3D Generator Plugin <br/>(Lights, Cameras)</a></li>
<li><a href="./geometry-generator-plugin/">Geometry Generator Plugin </a></li>
<li><a href="./object3d-widgets-plugin/">Object3D Widgets Plugin <br/>(Lights, Cameras)</a></li>
<li><a href="./geometry-uv-preview/">Geometry UV Preview Plugin </a></li>
<li><a href="./parallel-asset-import/">Parallel Asset Import </a></li>
<li><a href="./obj-to-glb/">Convert OBJ to GLB </a></li>
@@ -319,6 +321,11 @@
<h2 class="category">Lights</h2>
<ul>
<li><a href="./directional-light/">Directional Light </a></li>
<li><a href="./spot-light/">Spot Light </a></li>
<li><a href="./point-light/">Point Light </a></li>
<li><a href="./ambient-light/">Ambient Light </a></li>
<li><a href="./hemisphere-light/">Hemisphere Light </a></li>
<li><a href="./rect-area-light/">Rect Area Light </a></li>
</ul>
<h2 class="category">Tests</h2>
<ul>

+ 36
- 0
examples/point-light/index.html Просмотреть файл

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Point Light</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 69
- 0
examples/point-light/script.ts Просмотреть файл

@@ -0,0 +1,69 @@
import {
_testFinish,
Box3B,
IObject3D,
Mesh,
Object3DWidgetsPlugin,
PCFSoftShadowMap,
PhysicalMaterial,
PlaneGeometry,
PointLight2,
RenderTargetPreviewPlugin,
ThreeViewer,
Vector3,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
dropzone: {
allowedExtensions: ['gltf', 'glb', 'hdr', 'obj', 'fbx', 'bin', 'png', 'jpeg', 'webp', 'jpg', 'exr'],
addOptions: {
disposeSceneObjects: true,
autoSetEnvironment: true, // when hdr/exr is dropped
},
},
plugins: [Object3DWidgetsPlugin],
})

// viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/fbx/Samba Dancing.fbx', {
autoCenter: true,
autoScale: true,
})

const ground = new Mesh(
new PlaneGeometry(100, 100)
.rotateX(-Math.PI / 2)
.translate(0, new Box3B().expandByObject(result!).getSize(new Vector3()).y / -2, 0),
new PhysicalMaterial({
color: '#ffffff',
})
)
ground.castShadow = false
ground.receiveShadow = true
viewer.scene.addObject(ground)

const light = viewer.scene.addObject(new PointLight2(0xffffff, 8))
light.position.set(0, 4, 1)
light.lookAt(0, 0, 0)
light.distance = 10
light.decay = 1
light.castShadow = true
light.shadow.mapSize.setScalar(1024)
light.shadow.camera.near = 0.1
light.shadow.camera.far = 10

viewer.renderManager.renderer.shadowMap.type = PCFSoftShadowMap

const rt = viewer.addPluginSync(RenderTargetPreviewPlugin)
rt.addTarget(()=>light.shadow.map || undefined, 'shadow', true, true, true)

const ui = viewer.addPluginSync(TweakpaneUiPlugin, true)
ui.appendChild(light.uiConfig, {expanded: true})
}

init().then(_testFinish)

+ 36
- 0
examples/rect-area-light/index.html Просмотреть файл

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rect Area Light</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 56
- 0
examples/rect-area-light/script.ts Просмотреть файл

@@ -0,0 +1,56 @@
import {
_testFinish,
Box3B,
IObject3D,
Mesh,
Object3DWidgetsPlugin,
PhysicalMaterial,
PlaneGeometry,
RectAreaLight2,
ThreeViewer,
Vector3,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
dropzone: {
allowedExtensions: ['gltf', 'glb', 'hdr', 'obj', 'fbx', 'bin', 'png', 'jpeg', 'webp', 'jpg', 'exr'],
addOptions: {
disposeSceneObjects: true,
autoSetEnvironment: true, // when hdr/exr is dropped
},
},
plugins: [Object3DWidgetsPlugin],
})

// viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/ShadowmappableMesh.glb', {
autoCenter: true,
autoScale: true,
})

const ground = new Mesh(
new PlaneGeometry(100, 100)
.rotateX(-Math.PI / 2)
.translate(0, new Box3B().expandByObject(result!).getSize(new Vector3()).y / -2, 0),
new PhysicalMaterial({
color: '#ffffff',
})
)
viewer.scene.addObject(ground)

const light = viewer.scene.addObject(new RectAreaLight2(0xffffff, 4))
light.position.set(2, 4, 0)
light.lookAt(0, 4, 0)
light.width = 2
light.height = 10

const ui = viewer.addPluginSync(TweakpaneUiPlugin, true)
ui.appendChild(light.uiConfig, {expanded: true})
}

init().then(_testFinish)

+ 36
- 0
examples/spot-light/index.html Просмотреть файл

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spot Light</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 73
- 0
examples/spot-light/script.ts Просмотреть файл

@@ -0,0 +1,73 @@
import {
_testFinish,
Box3B,
IObject3D,
Mesh,
Object3DWidgetsPlugin,
PCFSoftShadowMap,
PhysicalMaterial,
PlaneGeometry,
RenderTargetPreviewPlugin,
SpotLight2,
ThreeViewer,
Vector3,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
dropzone: {
allowedExtensions: ['gltf', 'glb', 'hdr', 'obj', 'fbx', 'bin', 'png', 'jpeg', 'webp', 'jpg', 'exr'],
addOptions: {
disposeSceneObjects: true,
autoSetEnvironment: true, // when hdr/exr is dropped
},
},
plugins: [Object3DWidgetsPlugin],
})

// viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/fbx/Samba Dancing.fbx', {
autoCenter: true,
autoScale: true,
})

const ground = new Mesh(
new PlaneGeometry(100, 100)
.rotateX(-Math.PI / 2)
.translate(0, new Box3B().expandByObject(result!).getSize(new Vector3()).y / -2, 0),
new PhysicalMaterial({
color: '#ffffff',
})
)
ground.castShadow = false
ground.receiveShadow = true
viewer.scene.addObject(ground)

const light = viewer.scene.addObject(new SpotLight2(0xffffff, 10))
light.position.set(2, 2, 2)
light.lookAt(0, 0, 0)
light.angle = 0.5
light.penumbra = 0.2
light.distance = 5
light.decay = 0.5
light.castShadow = true
light.shadow.mapSize.setScalar(1024)
light.shadow.camera.near = 0.1
light.shadow.camera.far = 10
light.shadow.camera.aspect = 1
light.shadow.camera.fov = 45

viewer.renderManager.renderer.shadowMap.type = PCFSoftShadowMap

const rt = viewer.addPluginSync(RenderTargetPreviewPlugin)
rt.addTarget(()=>light.shadow.map || undefined, 'shadow', true, true, true)

const ui = viewer.addPluginSync(TweakpaneUiPlugin, true)
ui.appendChild(light.uiConfig, {expanded: true})
}

init().then(_testFinish)

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить