Qiya huang

.gitignore

@@ -9,3 +9,4 @@ cert.cer
 
 !package.json
 !package-lock.json
+recording/

js/scenes/campFire.js

@@ -0,0 +1,48 @@
+/*
+   This scene is an example of how to use procedural texture
+   to animate the shape of an object. In this case the object
+   is a waving flag. The noise function is used to animate
+   the position of each vertex of the flag geometry.
+*/
+
+import * as cg from "../render/core/cg.js";
+
+export const init = async model => {
+   // Define a tall, thin grid for the flame
+   clay.defineMesh('flame', clay.createGrid(20, 30));
+
+   // fire layer holder
+   let fireLayers = [];
+   for (let i = 0; i < 6; i++){
+      let fire = model.add('flame').color(1, .4, 0); // Orange color
+      fire.angle = i * 30; // angle = 0, 60, 120.
+      fireLayers.push(fire);
+   }
+
+   // logs
+   model.txtrSrc(1, '../media/textures/log1.png');
+   let logs =[]
+   for (let i = 0; i < 6; i++){
+      let log =model.add('tubeX').color(0.4,0.3,0.3).txtr(1).scale(1.3,0.07,0.07).move(0,0,0);
+      log.angle = i * 30
+      //log.turnY(log.angle);
+      logs.push(log);
+   }
+
+   model.scale(0.3).move(0,4,0).animate(() => {
+      // Animate the flame by modifying its vertices
+      fireLayers.forEach(fire => {
+         fire.identity().turnY(fire.angle);
+         fire.setVertices((u,v) => {
+            return [0.8*(u-0.5)*(1-v),
+                  2*v,
+                  .3 * v * cg.noise(5*u,5*v-model.time*3,model.time)
+                ];
+         });
+      });
+
+      // logs.forEach(log => {
+      //    log.identity().turnY(log.angle);
+      // });
+   });
+}

js/scenes/car.js

@@ -0,0 +1,56 @@
+/*
+   Create and animate hierarchical joints.
+*/
+let speed = 0.8
+
+export const init = async model => {
+
+   model.txtrSrc(1, '../media/textures/tire.png');
+
+   // CREATE NODES WITH NO SHAPES AS JOINTS FOR ANIMATION.
+   let carbody = model.add();
+
+   //wheel center joint
+   let wheelFLCenter = carbody.add();
+   let wheelFRCenter = carbody.add();
+   let wheelBLCenter = carbody.add();
+   let wheelBRCenter = carbody.add();
+
+   //wheel joint
+   let wheelFL = wheelFLCenter.add();
+   let wheelFR = wheelFRCenter.add();
+   let wheelBL = wheelBLCenter.add();
+   let wheelBR = wheelBRCenter.add();
+
+   // CREATE AND PLACE SHAPES THAT WILL MOVE WITH EACH JOINT.
+   // carboday
+   carbody.add('cube').scale(.8,.25,.4).move(0.8,1.5,-1).color(1,0,0);
+   //car cabin
+   carbody.add('cube').scale(.5,.2,.35).move(0.8,3.8,-1.2).color(1,1,1);;
+
+   // wheel centers
+   wheelFRCenter.move(1.2,0,0)
+   wheelBLCenter.move(0,0,-0.8)
+   wheelFLCenter.move(1.2,0,-0.8)
+
+   wheelBR.add('torusZ').scale(.18,.18,.2).txtr(1);;
+   wheelFR.add('torusZ').scale(.18,.18,.2).txtr(1);;
+   wheelBL.add('torusZ').scale(.18,.18,.2).txtr(1);;
+   wheelFL.add('torusZ').scale(.18,.18,.2).txtr(1);;
+
+   // ANIMATE THE JOINTS OVER TIME.
+   model.scale(0.8,0.8,0.8).move(-0.5,1.3,0).animate(() => {
+      carbody.identity()
+      .turnY(Math.sin(speed*model.time)*.7+.7);
+
+      wheelFL.identity()
+      .turnZ(Math.sin(speed*model.time)*.7+.7);
+      wheelFR.identity()
+      .turnZ(Math.sin(speed*model.time)*.7+.7);
+      wheelBL.identity()
+      .turnZ(Math.sin(speed*model.time)*.7+.7);
+      wheelBR.identity()
+      .turnZ(Math.sin(speed*model.time)*.7+.7);
+   });
+}
+

js/scenes/carDrive.js

@@ -0,0 +1,83 @@
+/*
+   This is a very simple example of how to use the
+   inputEvents object.
+
+   When the scene is in XR mode, the x position of
+   the left controller controls the red component
+   of the cube's color, and the x position of the
+   right controller controls the blue component of
+   the cube's color.
+*/
+export const init = async model => {
+   // See what the inputEvents can do
+   // console.log(inputEvents);
+
+   model.txtrSrc(1, '../media/textures/tire.png');
+
+   let speed = 0;
+   let color = [1,0,0];
+   // CREATE NODES WITH NO SHAPES AS JOINTS FOR ANIMATION.
+   let carbody = model.add();
+
+   //wheel center joint
+   let wheelFLCenter = carbody.add();
+   let wheelFRCenter = carbody.add();
+   let wheelBLCenter = carbody.add();
+   let wheelBRCenter = carbody.add();
+
+   //wheel joint
+   let wheelFL = wheelFLCenter.add();
+   let wheelFR = wheelFRCenter.add();
+   let wheelBL = wheelBLCenter.add();
+   let wheelBR = wheelBRCenter.add();
+
+   // CREATE AND PLACE SHAPES THAT WILL MOVE WITH EACH JOINT.
+   // carboday
+   let chassis = carbody.add('cube').scale(.8,.25,.4).move(0.8,1.5,-1).color(color);
+   //car cabin
+   carbody.add('cube').scale(.5,.2,.35).move(0.8,3.8,-1.2).color(1,1,1);;
+
+   // wheel centers
+   wheelFRCenter.move(1.2,0,0)
+   wheelBLCenter.move(0,0,-0.8)
+   wheelFLCenter.move(1.2,0,-0.8)
+
+   wheelBR.add('torusZ').scale(.18,.18,.2).txtr(1);;
+   wheelFR.add('torusZ').scale(.18,.18,.2).txtr(1);;
+   wheelBL.add('torusZ').scale(.18,.18,.2).txtr(1);;
+   wheelFL.add('torusZ').scale(.18,.18,.2).txtr(1);;
+
+   // USING THE GLOBAL inputEvents OBJECT
+
+   inputEvents.onMove = hand => {
+      if (isXR()) {
+         if (hand == 'left'){
+            color[0] = inputEvents.pos(hand)[0] * .5 + .5;
+            color[1] = inputEvents.pos(hand)[2] * .5 + .5;
+         }
+      }
+   }
+
+   model.scale(0.3).move(-0.5,4.5,0).animate(() => {
+      if (inputEvents.isPressed('right')) {
+         speed += 0.005; 
+      } else {
+         speed *= 0.95; 
+      }
+
+      //.identity resets everything
+      carbody.identity().move(speed * 2, 0, 0);
+      chassis.color(color);
+
+      wheelFL.identity()
+      .turnZ(-speed*model.time*.7);
+      wheelFR.identity()
+      .turnZ(-speed*model.time*.7);
+      wheelBL.identity()
+      .turnZ(-speed*model.time*.7);
+      wheelBR.identity()
+      .turnZ(-speed*model.time*.7);
+
+   });
+}
+