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);