lzy
/
threepipe
關註 1
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

Add exampels for different type of lights.

master
Palash Bansal 2 年之前
父節點
d9141ded70
當前提交
d4ac63ec73
No account linked to committer's email address
共有 13 個文件被更改，包括 509 次插入 和 14 次删除
統一視圖 顯示文件統計
  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 查看文件

<!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 查看文件

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 查看文件

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



+ 18
- 13
examples/directional-light/script.ts 查看文件

import { import {
_testFinish, _testFinish,
Box3B, Box3B,
DirectionalLight,
DirectionalLight2,
IObject3D, IObject3D,
Mesh, Mesh,
Object3DWidgetsPlugin,
PCFSoftShadowMap, PCFSoftShadowMap,
PhysicalMaterial, PhysicalMaterial,
PlaneGeometry, PlaneGeometry,
ThreeViewer, ThreeViewer,
Vector3, Vector3,
} from 'threepipe' } from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


async function init() { async function init() {


autoSetEnvironment: true, // when hdr/exr is dropped autoSetEnvironment: true, // when hdr/exr is dropped
}, },
}, },
plugins: [Object3DWidgetsPlugin],
}) })


// viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10)) // viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
ground.receiveShadow = true ground.receiveShadow = true
viewer.scene.addObject(ground) 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 viewer.renderManager.renderer.shadowMap.type = PCFSoftShadowMap


const rt = viewer.addPluginSync(RenderTargetPreviewPlugin) 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) init().then(_testFinish)

+ 36
- 0
examples/hemisphere-light/index.html 查看文件

<!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 查看文件

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 查看文件

<ul> <ul>
<li><a href="./hdri-ground-plugin/">HDRi Ground Plugin <br/>(Projected Skybox)</a></li> <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="./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="./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="./geometry-uv-preview/">Geometry UV Preview Plugin </a></li>
<li><a href="./parallel-asset-import/">Parallel Asset Import </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> <li><a href="./obj-to-glb/">Convert OBJ to GLB </a></li>
<h2 class="category">Lights</h2> <h2 class="category">Lights</h2>
<ul> <ul>
<li><a href="./directional-light/">Directional Light </a></li> <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> </ul>
<h2 class="category">Tests</h2> <h2 class="category">Tests</h2>
<ul> <ul>

+ 36
- 0
examples/point-light/index.html 查看文件

<!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 查看文件

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 查看文件

<!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 查看文件

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 查看文件

<!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 查看文件

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)

Write Preview
Loading…
取消
儲存