|
@@ -85,133 +85,133 @@ const app=createApp({
|
|
|
|
|
|
},
|
|
|
setup(){
|
|
|
- console.log("Threejs modele");
|
|
|
+ // console.log("Threejs modele");
|
|
|
|
|
|
+ // // 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();
|
|
|
- // 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);
|
|
|
- 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 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();
|
|
|
-
|
|
|
- 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);
|
|
|
+ // 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);
|
|
|
+ // 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);
|
|
|
+ // });
|
|
|
|
|
|
- // setTimeout(() => {
|
|
|
- // console.log("cube.position",cube.position);
|
|
|
- // cube.position.set(10,1000,500);
|
|
|
- // console.log("cube.position",cube.position);
|
|
|
- // }, 1500);
|
|
|
+
|
|
|
+ // 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();
|
|
|
+
|
|
|
+ // 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");
|