add some reposity

utils/sample.js

@@ -1,129 +1,129 @@
-import Three, { 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);
+// import Three, { 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);
 
 
-// import * as Three from "three";
-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);
+// // import * as Three from "three";
+// 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 = 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
-]);
+// 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;
+// 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 path from "path";
 
-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 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();
-    renderer.setSize(window.innerWidth*0.95,window.innerHeight*0.95);
-    renderer.setPixelRatio(window.devicePixelRatio);
-});
+// 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();
+//     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;
+// 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(){
-    // 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();
+// // 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(){
+//     // 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);
+// 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';//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);
+// // 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);
+// // setTimeout(() => {
+// //     console.log("cube.position",cube.position);
+// //     cube.position.set(10,1000,500);
+// //     console.log("cube.position",cube.position);
+// // }, 1500);

webpack.config.js

@@ -40,9 +40,9 @@ module.exports={
       exclude: /node_modules/,
       use: {
         loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-env']
-        }
+        // options: {
+        //   presets: ['@babel/preset-env']
+        // }
       }
     },
     {
@@ -80,7 +80,7 @@ module.exports={
     new VueLoaderPlugin(),
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
-      inject:'body',
+      inject:'head',
       title:"index page ",
       template:"./index.html",
       filename:"index.html",