add some reposity

utils/sample.js

@@ -1,130 +1,162 @@
-
 import * as Three from "three";
 import  { OctahedronGeometry } from "three";
-// const scene=new Three.Scene();
-// const camera=new Three.PerspectiveCamera();
-// const odemetry=new OctahedronGeometry();
-// document.body.append(new Element(`<h1>index.js</h1>`))
-var canvas=document.getElementById("canvas");
-canvas.width=window.innerWidth;
-canvas.heigt=window.innerHeight;
-var gl=canvas.getContext("webgl");
-gl.viewport(0,0,canvas.width,canvas.heigt);
-
-
-console.log("Three",Three);
-const scene=new Three.Scene();
-const camera=new Three.PerspectiveCamera(
-    75,
-    window.innerWidth/window.innerHeight,
-    0.1,
-    1000
-);
-camera.position.set(0,0,10);
-scene.add(camera);
-
-const geometry = new Three.BoxGeometry( 1, 3, 2 ); 
-const material = new Three.MeshBasicMaterial( {color: 0xffffff} ); 
-const cube = new Three.Mesh( geometry, material ); 
-scene.add( cube );
-console.log("cube",cube);
-console.log("cube.position",cube.position);
-
-const geometry_buffer=new Three.BufferGeometry();
-const vertices=new Float32Array([
-    -1.0,-1.0,1.0,
-    1.0,-1.0,1.0,
-    1.0,1.0,1.0,
-    1.0,1.0,1.0
-    -1.0,1.0,1.0,
-    -1.0,-1.0,1.0
-]);
-
-geometry_buffer.setAttribute("position",new Three.BufferAttribute(vertices,3));
-const material_buffer=new Three.MeshBasicMaterial({color: 0xffff00});
-const geometry_buffer_mesh=new Three.Mesh(geometry_buffer,material_buffer);
-scene.add(geometry_buffer_mesh);
-geometry_buffer_mesh.position.set(-10,-2,0);
-// geometry_buffer_mesh.position.x=-10;
-// geometry_buffer_mesh.position.y=-2;
-
 import path from "path";
+import { OrbitControls } from "three-orbitcontrols-ts";
 
-const cube_geometry=new Three.BoxGeometry(2,2,2);
-const textureloader=new Three.TextureLoader();
-path.resolve(path.dirname.toString());
-console.log("path",path);
-const texture_object=textureloader.load("../media/texture/shazi.png");
-const textureLoader = new Three.TextureLoader();
-const textureFlare0 = textureLoader.load( "../media//texture/envolope.jpg" );
-console.log("textureFlare0",texture_object);
-const basic_material=new Three.MeshBasicMaterial({
-    // color:0xf012f0,
-    map:texture_object,
-});
-const cube_geometry_object=new Three.Mesh(cube_geometry,basic_material);
-scene.add(cube_geometry_object);
-cube_geometry_object.position.set(8,-3,0);
-
-const renderer=new Three.WebGLRenderer();
-renderer.setSize(window.innerWidth*0.95,window.innerHeight*0.95);
-window.addEventListener("resize",(EventTarget)=>{
-    console.log("resize_______________");
-    camera.aspect=window.innerWidth*0.95,window.innerHeight*0.95;
-    camera.updateProjectionMatrix();
+//import router from "./router.vue";
+import router from "./router.js";
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import 'animate.css';
+//console.log(createApp);
+//console.log(i18n);
+console.log(router);
+const app=createApp({
+  template:'#my-app',
+//  template:`<div v-html='info'>template</div>`,
+  components:{
+    Home,
+  },
+  data(){
+    return{
+      info:`<span style='color:red; font-size:30px'>hello vue template</span>`,
+      number:0,
+      locale:null,
+    }
+  },
+  methods:{
+    
+  },
+  setup(){
+        
+    // const scene=new Three.Scene();
+    // const camera=new Three.PerspectiveCamera();
+    // const odemetry=new OctahedronGeometry();
+    // document.body.append(new Element(`<h1>index.js</h1>`))
+    var canvas=document.getElementById("canvas");
+    canvas.width=window.innerWidth;
+    canvas.heigt=window.innerHeight;
+    var gl=canvas.getContext("webgl");
+    gl.viewport(0,0,canvas.width,canvas.heigt);
+
+
+    console.log("Three",Three);
+    const scene=new Three.Scene();
+    const camera=new Three.PerspectiveCamera(
+        75,
+        window.innerWidth/window.innerHeight,
+        0.1,
+        1000
+    );
+    camera.position.set(0,0,10);
+    scene.add(camera);
+
+    const geometry = new Three.BoxGeometry( 1, 3, 2 ); 
+    const material = new Three.MeshBasicMaterial( {color: 0xffffff} ); 
+    const cube = new Three.Mesh( geometry, material ); 
+    scene.add( cube );
+    console.log("cube",cube);
+    console.log("cube.position",cube.position);
+
+    const geometry_buffer=new Three.BufferGeometry();
+    const vertices=new Float32Array([
+        -1.0,-1.0,1.0,
+        1.0,-1.0,1.0,
+        1.0,1.0,1.0,
+        1.0,1.0,1.0
+        -1.0,1.0,1.0,
+        -1.0,-1.0,1.0
+    ]);
+
+    geometry_buffer.setAttribute("position",new Three.BufferAttribute(vertices,3));
+    const material_buffer=new Three.MeshBasicMaterial({color: 0xffff00});
+    const geometry_buffer_mesh=new Three.Mesh(geometry_buffer,material_buffer);
+    scene.add(geometry_buffer_mesh);
+    geometry_buffer_mesh.position.set(-10,-2,0);
+    // geometry_buffer_mesh.position.x=-10;
+    // geometry_buffer_mesh.position.y=-2;
+
+
+    const cube_geometry=new Three.BoxGeometry(2,2,2);
+    const textureloader=new Three.TextureLoader();
+    path.resolve(path.dirname.toString());
+    console.log("path",path);
+    const texture_object=textureloader.load("../media/texture/shazi.png");
+    const textureLoader = new Three.TextureLoader();
+    const textureFlare0 = textureLoader.load( "../media//texture/envolope.jpg" );
+    console.log("textureFlare0",texture_object);
+    const basic_material=new Three.MeshBasicMaterial({
+        // color:0xf012f0,
+        map:texture_object,
+    });
+    const cube_geometry_object=new Three.Mesh(cube_geometry,basic_material);
+    scene.add(cube_geometry_object);
+    cube_geometry_object.position.set(8,-3,0);
+
+    const renderer=new Three.WebGLRenderer();
     renderer.setSize(window.innerWidth*0.95,window.innerHeight*0.95);
-    renderer.setPixelRatio(window.devicePixelRatio);
-});
+    window.addEventListener("resize",(EventTarget)=>{
+        console.log("resize_______________");
+        camera.aspect=window.innerWidth*0.95,window.innerHeight*0.95;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth*0.95,window.innerHeight*0.95);
+        renderer.setPixelRatio(window.devicePixelRatio);
+    });
 
 
-import { OrbitControls } from "three-orbitcontrols-ts";
-const controls=new OrbitControls(camera,renderer.domElement);
-controls.enableDamping=true;
-
-// renderer.render(scene,camera);
-let rare_positionx= cube.position.x-2;
-let rare_positiony= cube.position.y-2;
-let step=0.02, range=400,mark=0;
-function render_each_second(){
+    const controls=new OrbitControls(camera,renderer.domElement);
+    controls.enableDamping=true;
+
     // renderer.render(scene,camera);
-    controls.update();
-    if(mark<= range){
-        cube.position.x+=step;
-        cube.position.y+=step;
-        cube.rotateZ(0.02);
-        cube.rotateY(0.015);
-        cube_geometry_object.rotateX(0.01);
-        cube_geometry_object.rotateY(0.01);
-        cube_geometry_object.rotateZ(0.01);
-        geometry_buffer_mesh.rotateY(0.05);
-        mark=mark + 1;
-    }else{
-        // cube.position.x=(step*range);
-        cube.position.x=(rare_positionx);
-        cube.position.y=(rare_positiony);
-        mark=0;
-    }
-    // (times < n)?cube.position.x+=times:cube.position.x=rare_position;
-    // console.log("cube.position",cube.position);
-    renderer.render(scene,camera);
-    requestAnimationFrame(render_each_second);
-};
-render_each_second();
-
-console.log("renderer",renderer);
-document.body.appendChild(renderer.domElement);
-
-// import {OrbitControls} from 'three';//three/examples/jsm/controls/OrbitControls
-// import { OrbitControls } from "three/addons/controls/OrbitControls.js";
-// import { OrbitControls } from "three-orbitcontrols-ts";
-// const controls=new Three.OrbitControls(camera,renderer.domElement);
-
-// import { OrbitControls } from 'three-orbitcontrols-ts';
-// const controls=new Three.OrbitControls(camera,renderer.domElement);
-// const controls=new OrbitControls(camera,renderer.domElement);
-
-// setTimeout(() => {
-//     console.log("cube.position",cube.position);
-//     cube.position.set(10,1000,500);
-//     console.log("cube.position",cube.position);
-// }, 1500);
+    let rare_positionx= cube.position.x-2;
+    let rare_positiony= cube.position.y-2;
+    let step=0.02, range=400,mark=0;
+    function render_each_second(){
+        // renderer.render(scene,camera);
+        controls.update();
+        if(mark<= range){
+            cube.position.x+=step;
+            cube.position.y+=step;
+            cube.rotateZ(0.02);
+            cube.rotateY(0.015);
+            cube_geometry_object.rotateX(0.01);
+            cube_geometry_object.rotateY(0.01);
+            cube_geometry_object.rotateZ(0.01);
+            geometry_buffer_mesh.rotateY(0.05);
+            mark=mark + 1;
+        }else{
+            // cube.position.x=(step*range);
+            cube.position.x=(rare_positionx);
+            cube.position.y=(rare_positiony);
+            mark=0;
+        }
+        // (times < n)?cube.position.x+=times:cube.position.x=rare_position;
+        // console.log("cube.position",cube.position);
+        renderer.render(scene,camera);
+        requestAnimationFrame(render_each_second);
+    };
+    render_each_second();
+
+    console.log("renderer",renderer);
+    document.body.appendChild(renderer.domElement);
+
+    // import {OrbitControls} from 'three';//three/examples/jsm/controls/OrbitControls
+    // import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+    // import { OrbitControls } from "three-orbitcontrols-ts";
+    // const controls=new Three.OrbitControls(camera,renderer.domElement);
+
+    // import { OrbitControls } from 'three-orbitcontrols-ts';
+    // const controls=new Three.OrbitControls(camera,renderer.domElement);
+    // const controls=new OrbitControls(camera,renderer.domElement);
+
+    // setTimeout(() => {
+    //     console.log("cube.position",cube.position);
+    //     cube.position.set(10,1000,500);
+    //     console.log("cube.position",cube.position);
+    // }, 1500);
+  }
+}).use(i18n).use(router).use(ElementPlus).mount("#app");
+//Vue.createApp(app).mount("#app");
+                                                
+
+