wiki/utils/sample.js

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

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

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


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

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