Skip to content

Commit abe3131

Browse files
yandeuyandeu
committed
Update some examples to esm
1 parent 4ed6423 commit abe3131

File tree

3 files changed

+65
-34
lines changed

3 files changed

+65
-34
lines changed

‎src/examples/gltf-loader-with-physics.html

+25-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -10,32 +10,44 @@
1010
<title>GLTFLoader with Physics</title>
1111
<link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
1212
<script src="/js/examples.js?ver=1.1.1"></script>
13-
<script src="/lib/three.min.js?ver=r130"></script>
14-
<script src="/lib/GLTFLoader.js"></script>
15-
<script src="/lib/enable3d/enable3d.ammoPhysics.0.25.4.min.js"></script>
16-
<script src="/lib/OrbitControls.js"></script>
1713
</head>
1814

1915
<body>
20-
<script>
21-
const { AmmoPhysics, PhysicsLoader } = ENABLE3D
16+
<script type="importmap">
17+
{
18+
"imports": {
19+
"three": "/lib/threejs/r171/three.module.min.js",
20+
"orbit-controls": "/lib/threejs/r171/OrbitControls.module.min.js",
21+
"enable3d": "/lib/enable3d/enable3d.ammoPhysics.0.26.0_dev0.module.min.js",
22+
"gltf-loader": "/lib/threejs/r171/GLTFLoader.module.min.js"
23+
}
24+
}
25+
</script>
26+
<script type="module">
27+
import * as THREE from 'three'
28+
import { AmmoPhysics, PhysicsLoader } from 'enable3d'
29+
import { OrbitControls } from 'orbit-controls'
30+
import { GLTFLoader } from 'gltf-loader'
2231

2332
const MainScene = () => {
2433
const scene = new THREE.Scene()
2534
scene.background = new THREE.Color(0xf0f0f0)
2635

2736
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
28-
camera.position.set(6, 6, 12)
37+
camera.position.set(4, 4, 8)
38+
camera.lookAt(0, 1, 0)
2939

3040
const renderer = new THREE.WebGLRenderer()
3141
renderer.setSize(window.innerWidth, window.innerHeight)
3242
document.body.appendChild(renderer.domElement)
3343

34-
const controls = new THREE.OrbitControls(camera, renderer.domElement)
44+
const controls = new OrbitControls(camera, renderer.domElement)
45+
controls.target.set(0, 1, 0)
46+
controls.update()
3547

36-
scene.add(new THREE.HemisphereLight(0xffffbb, 0x080820, 1))
37-
scene.add(new THREE.AmbientLight(0x666666))
38-
const light = new THREE.DirectionalLight(0xdfebff, 1)
48+
scene.add(new THREE.HemisphereLight(0xffffff, 0x000000, 1))
49+
scene.add(new THREE.AmbientLight(0xffffff))
50+
const light = new THREE.DirectionalLight(0xffffff, 1)
3951
light.position.set(50, 200, 100)
4052
light.position.multiplyScalar(1.3)
4153

@@ -47,7 +59,7 @@
4759
physics.add.ground({ width: 20, height: 20 })
4860

4961
// add suzanne with physics
50-
const loader = new THREE.GLTFLoader().load('/assets/glb/suzanne.glb', function (gltf) {
62+
const loader = new GLTFLoader().load('/assets/glb/suzanne.glb', function (gltf) {
5163
const suzanne = gltf.scene.children[0]
5264
suzanne.position.setY(5)
5365

‎src/examples/hollow-cylinder.html

+21-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -10,14 +10,22 @@
1010
<title>Hollow Cylinder</title>
1111
<link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
1212
<script src="/js/examples.js?ver=1.1.1"></script>
13-
<script src="/lib/three.min.js?ver=r130"></script>
14-
<script src="/lib/enable3d/enable3d.ammoPhysics.0.25.4.min.js"></script>
15-
<script src="/lib/OrbitControls.js"></script>
1613
</head>
1714

1815
<body>
19-
<script>
20-
const { AmmoPhysics, PhysicsLoader } = ENABLE3D
16+
<script type="importmap">
17+
{
18+
"imports": {
19+
"three": "/lib/threejs/r171/three.module.min.js",
20+
"orbit-controls": "/lib/threejs/r171/OrbitControls.module.min.js",
21+
"enable3d": "/lib/enable3d/enable3d.ammoPhysics.0.26.0_dev0.module.min.js"
22+
}
23+
}
24+
</script>
25+
<script type="module">
26+
import * as THREE from 'three'
27+
import { AmmoPhysics, PhysicsLoader } from 'enable3d'
28+
import { OrbitControls } from 'orbit-controls'
2129

2230
const MainScene = () => {
2331
const scene = new THREE.Scene()
@@ -33,22 +41,22 @@
3341
const DPR = window.devicePixelRatio
3442
renderer.setPixelRatio(Math.min(2, DPR))
3543

36-
const controls = new THREE.OrbitControls(camera, renderer.domElement)
44+
const controls = new OrbitControls(camera, renderer.domElement)
3745
controls.target.set(0, 2, 0)
3846
camera.lookAt(0, 2, 0)
3947

40-
scene.add(new THREE.HemisphereLight(0xffffbb, 0x000000, 0.5))
41-
scene.add(new THREE.AmbientLight(0xffffff, 0.5))
42-
const light = new THREE.DirectionalLight(0xffffff, 0.5)
48+
scene.add(new THREE.HemisphereLight(0xffffff, 0x000000, 1))
49+
scene.add(new THREE.AmbientLight(0xffffff, 1))
50+
const light = new THREE.DirectionalLight(0xffffff, 1)
4351
light.position.set(50, 200, 100)
4452
light.position.multiplyScalar(1.3)
4553

4654
const physics = new AmmoPhysics(scene)
4755
physics.debug.enable(true)
4856

4957
// balls
50-
physics.add.sphere({ z: -1 }, { lambert: { color: 'darkolivegreen' } })
51-
physics.add.sphere({ z: 0 }, { lambert: { color: 'darkorchid' } })
58+
physics.add.sphere({ z: -1 }, { lambert: { color: 'olivegreen' } })
59+
physics.add.sphere({ z: 0 }, { lambert: { color: 'orchid' } })
5260
physics.add.sphere({ z: -1, y: 2.5 }, { lambert: { color: 'firebrick' } })
5361

5462
// static ground
@@ -71,7 +79,7 @@
7179
holePath.absarc(0, 0, 3.5, 0, Math.PI * 2, true)
7280
arcShape.holes.push(holePath)
7381

74-
const geo = new THREE.ExtrudeBufferGeometry(arcShape, extrudeSettings)
82+
const geo = new THREE.ExtrudeGeometry(arcShape, extrudeSettings)
7583
const mat = new THREE.MeshBasicMaterial({ color: 'khaki' })
7684
const mesh = new THREE.Mesh(geo, mat)
7785
geo.translate(0, 0, -1) // somehow this has an offset as well :/

‎src/examples/native-three-with-physics.html

+19-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -10,15 +10,23 @@
1010
<title>Native three.js with Physics</title>
1111
<link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
1212
<script src="/js/examples.js?ver=1.1.1"></script>
13-
<script src="/lib/three.min.js?ver=r130"></script>
14-
<script src="/lib/enable3d/enable3d.ammoPhysics.0.25.4.min.js"></script>
15-
<script src="/lib/OrbitControls.js"></script>
1613
</head>
1714

1815
<body>
1916
<div id="info-text">Using enable3d as Physics Plugin for three.js</div>
20-
<script>
21-
const { AmmoPhysics, PhysicsLoader } = ENABLE3D
17+
<script type="importmap">
18+
{
19+
"imports": {
20+
"three": "/lib/threejs/r171/three.module.min.js",
21+
"orbit-controls": "/lib/threejs/r171/OrbitControls.module.min.js",
22+
"enable3d": "/lib/enable3d/enable3d.ammoPhysics.0.26.0_dev0.module.min.js"
23+
}
24+
}
25+
</script>
26+
<script type="module">
27+
import * as THREE from 'three'
28+
import { AmmoPhysics, PhysicsLoader } from 'enable3d'
29+
import { OrbitControls } from 'orbit-controls'
2230

2331
const MainScene = () => {
2432
// scene
@@ -28,6 +36,7 @@
2836
// camera
2937
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
3038
camera.position.set(10, 10, 20)
39+
camera.lookAt(0, 1, 0)
3140

3241
// renderer
3342
const renderer = new THREE.WebGLRenderer()
@@ -39,7 +48,9 @@
3948
renderer.setPixelRatio(Math.min(2, DPR))
4049

4150
// orbit controls
42-
const controls = new THREE.OrbitControls(camera, renderer.domElement)
51+
const controls = new OrbitControls(camera, renderer.domElement)
52+
controls.target.set(0, 1, 0)
53+
controls.update()
4354

4455
// light
4556
scene.add(new THREE.HemisphereLight(0xffffff, 0x000000, 1))
@@ -67,7 +78,7 @@
6778
// first parameter is the config for the geometry
6879
// second parameter is for the material
6980
// you could also add a custom material like so { custom: new THREE.MeshLambertMaterial({ color: 0x00ff00 }) }
70-
let greenSphere = factory.addSphere({ y: 2, z: 5 }, { lambert: { color: 0x00ff00 } })
81+
let greenSphere = factory.addSphere({ y: 2, z: 5 }, { lambert: { color: 'red' } })
7182
// once the object is created, you can add physics to it
7283
physics.add.existing(greenSphere)
7384

0 commit comments

Comments
 (0)