|
1 |
| -<!DOCTYPE html> |
| 1 | +<!doctype html> |
2 | 2 | <html lang="en">
|
3 | 3 | <head>
|
4 | 4 | <meta charset="UTF-8" />
|
|
10 | 10 | <title>Convex Objects Breaking</title>
|
11 | 11 | <link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
|
12 | 12 | <script src="/js/examples.js?ver=1.1.1"></script>
|
13 |
| - <script src="/lib/three.min.js?ver=r130"></script> |
14 |
| - <script src="/lib/ConvexHull.js"></script> |
15 |
| - <script src="/lib/ConvexGeometry.js"></script> |
16 |
| - <script src="/lib/OrbitControls.js"></script> |
17 |
| - <script src="/lib/enable3d/enable3d.ammoPhysics.0.25.4.min.js"></script> |
18 | 13 | </head>
|
19 | 14 |
|
20 | 15 | <body>
|
21 |
| - <script> |
22 |
| - 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 | + "convex-geometry": "/lib/threejs/r171/ConvexGeometry.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 { ConvexGeometry, ConvexHull } from 'convex-geometry' |
| 30 | + import { OrbitControls } from 'orbit-controls' |
23 | 31 |
|
24 | 32 | const MainScene = () => {
|
25 | 33 | // scene
|
|
29 | 37 | // camera
|
30 | 38 | const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
|
31 | 39 | camera.position.set(10, 10, 20)
|
| 40 | + camera.lookAt(0, 2, 2) |
32 | 41 |
|
33 | 42 | // renderer
|
34 | 43 | const renderer = new THREE.WebGLRenderer()
|
|
40 | 49 | renderer.setPixelRatio(Math.min(2, DPR))
|
41 | 50 |
|
42 | 51 | // orbit controls
|
43 |
| - const controls = new THREE.OrbitControls(camera, renderer.domElement) |
| 52 | + const controls = new OrbitControls(camera, renderer.domElement) |
| 53 | + controls.target.set(0, 2, 2) |
| 54 | + controls.update() |
44 | 55 |
|
45 | 56 | // light
|
46 |
| - scene.add(new THREE.HemisphereLight(0xffffbb, 0x080820, 1)) |
47 |
| - scene.add(new THREE.AmbientLight(0x666666)) |
48 |
| - const light = new THREE.DirectionalLight(0xdfebff, 1) |
| 57 | + scene.add(new THREE.HemisphereLight(0xffffff, 0x000000, 1)) |
| 58 | + scene.add(new THREE.AmbientLight(0xffffff, 1)) |
| 59 | + const light = new THREE.DirectionalLight(0xffffff, 1) |
49 | 60 | light.position.set(50, 200, 100)
|
50 | 61 | light.position.multiplyScalar(1.3)
|
51 | 62 |
|
|
0 commit comments