Skip to content

Commit 3c61570

Browse files
kalwaltkalwalt
committed
improved nft example
1 parent 691461e commit 3c61570

File tree

1 file changed

+55
-37
lines changed

1 file changed

+55
-37
lines changed

‎three.js/examples/nft.html

Lines changed: 55 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<!DOCTYPE html>
22
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
33

4-
<!-- three.js library -->
5-
<script src='vendor/three.js/build/three.min.js'></script>
6-
<!-- three.js load GLTF -->
7-
<script src='vendor/three.js/GLTFLoader.js'></script>
8-
<!-- ar.js -->
9-
<script src='../build/ar-threex.js'></script>
10-
11-
<script>THREEx.ArToolkitContext.baseURL = '../'</script>
4+
<!-- import ar-trheex.moule.js and three.js libraries -->
5+
<script type="importmap">
6+
{
7+
"imports": {
8+
"threex": "../build/ar-threex.module.js",
9+
"three": "./vendor/three.js/build/three.module.min.js",
10+
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
11+
}
12+
}
13+
</script>
1214

1315
<body style='position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin : 0px; overflow: hidden;'>
1416
<style>
@@ -54,25 +56,37 @@
5456
<div class="arjs-loader">
5557
<div class="arjs-loader-spinner"></div>
5658
</div>
57-
<script>
59+
<script type="module">
60+
import * as THREE from 'three'
61+
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
62+
import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls } from 'threex'
63+
64+
ArToolkitContext.baseURL = '../'
65+
5866
//////////////////////////////////////////////////////////////////////////////////
5967
// Init
6068
//////////////////////////////////////////////////////////////////////////////////
6169

62-
var renderer = new THREE.WebGLRenderer({
70+
const renderer = new THREE.WebGLRenderer({
6371
antialias: true,
6472
alpha: true,
6573
precision: 'mediump',
74+
premultipliedAlpha: true,
75+
stencil: true,
76+
depth: true,
77+
logarithmicDepthBuffer: true,
6678
});
6779

68-
var clock = new THREE.Clock();
80+
const clock = new THREE.Clock();
6981

70-
var mixers = [];
82+
const mixers = [];
7183

7284
renderer.setPixelRatio(window.devicePixelRatio);
7385

7486
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
7587
renderer.setSize( window.innerWidth, window.innerHeight );
88+
renderer.outputEncoding = THREE.sRGBEncoding;
89+
renderer.physicallyCorrectLights = true;
7690
renderer.domElement.style.position = 'absolute'
7791
renderer.domElement.style.top = '0px'
7892
renderer.domElement.style.left = '0px'
@@ -86,17 +100,23 @@
86100
//////////////////////////////////////////////////////////////////////////////////
87101

88102
// Create a camera
89-
var camera = new THREE.Camera();
103+
let fov = (0.8 * 180) / Math.PI;
104+
let ratio = 640 / 480;
105+
const camera = new THREE.PerspectiveCamera(fov, ratio);
90106
scene.add(camera);
91107

92-
var light = new THREE.AmbientLight(0xffffff);
108+
const light = new THREE.AmbientLight(0xffffff);
93109
scene.add(light);
94110

111+
let directionalLight = new THREE.DirectionalLight("#fff", 0.4);
112+
directionalLight.position.set(0.5, 0, 0.866);
113+
scene.add(directionalLight);
114+
95115
////////////////////////////////////////////////////////////////////////////////
96116
// handle arToolkitSource
97117
////////////////////////////////////////////////////////////////////////////////
98118

99-
var arToolkitSource = new THREEx.ArToolkitSource({
119+
const arToolkitSource = new ArToolkitSource({
100120
sourceType : 'webcam',
101121
sourceWidth: 480,
102122
sourceHeight: 640,
@@ -132,7 +152,7 @@
132152
////////////////////////////////////////////////////////////////////////////////
133153

134154
// create atToolkitContext
135-
var arToolkitContext = new THREEx.ArToolkitContext({
155+
const arToolkitContext = new ArToolkitContext({
136156
detectionMode: 'mono',
137157
canvasWidth: 480,
138158
canvasHeight: 640,
@@ -152,47 +172,45 @@
152172
////////////////////////////////////////////////////////////////////////////////
153173

154174
// init controls for camera
155-
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
156-
type : 'nft',
157-
descriptorsUrl : 'data/dataNFT/pinball',
175+
const markerControls = new ArMarkerControls(arToolkitContext, camera, {
176+
type: 'nft',
177+
descriptorsUrl: 'data/dataNFT/pinball',
158178
changeMatrixMode: 'cameraTransformMatrix'
159-
})
179+
});
160180

161181
scene.visible = false
162182

163-
var root = new THREE.Object3D();
183+
const root = new THREE.Object3D();
164184
scene.add(root);
165185

166186
//////////////////////////////////////////////////////////////////////////////////
167187
// add an object in the scene
168188
//////////////////////////////////////////////////////////////////////////////////
169189

170-
var threeGLTFLoader = new THREE.GLTFLoader();
171-
var model;
190+
const threeGLTFLoader = new GLTFLoader();
191+
let model;
172192

173193
threeGLTFLoader.load("./resources/Flamingo.glb", function (gltf) {
174194
model = gltf.scene.children[0];
175-
model.name = 'Flamingo';
176-
const clips = gltf.animations;
195+
//model.name = 'Flamingo';
196+
//const clips = gltf.animations;
177197

178-
var animation = gltf.animations[0];
179-
var mixer = new THREE.AnimationMixer(gltf.scene);
198+
const animation = gltf.animations[0];
199+
200+
const mixer = new THREE.AnimationMixer(model);
180201
mixers.push(mixer);
181-
const clip = THREE.AnimationClip.findByName( clips, 'flamingo_flyA_' );
182-
var action = mixer.clipAction(clip);
202+
203+
const action = mixer.clipAction(animation);
183204
action.play();
184205

185-
root.matrixAutoUpdate = false;
186206
root.add(model);
187-
207+
root.matrixAutoUpdate = false;
188208
model.position.z = -100;
189-
//model.position.z = 100;
190209

191210
window.addEventListener('arjs-nft-init-data', function(nft) {
192-
console.log(nft);
193-
var msg = nft.detail;
194-
model.position.y = (msg.height / msg.dpi * 2.54 * 10)/2.0; //y axis?
195-
model.position.x = (msg.width / msg.dpi * 2.54 * 10)/2.0; //x axis?
211+
const msg = nft.detail;
212+
model.position.y = (msg.height / msg.dpi * 2.54 * 10)/2.0; //y axis?
213+
model.position.x = (msg.width / msg.dpi * 2.54 * 10)/2.0; //x axis?
196214
})
197215

198216

@@ -204,7 +222,7 @@
204222
requestAnimationFrame(animate);
205223

206224
if (mixers.length > 0) {
207-
for (var i = 0; i < mixers.length; i++) {
225+
for (let i = 0; i < mixers.length; i++) {
208226
mixers[i].update(clock.getDelta());
209227
}
210228
}

0 commit comments

Comments
 (0)