teratail 372012

https://teratail.com/questions/372012

by cx20

HTML

<script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/three@0.132.2/examples/js/loaders/DRACOLoader.js"></script>
<script src="https://unpkg.com/three@0.132.2/examples/js/controls/OrbitControls.js"></script>

<canvas id="c"></canvas>

CSS

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

JavaScript

let enemy;
window.addEventListener('load', init);

function init() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    const canvasElement = document.querySelector('#c');
    const renderer = new THREE.WebGLRenderer({
        canvas: canvasElement,
    });
    renderer.setSize(width, height);

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 10000);
    camera.position.set(0, 1, 5);

    const controls = new THREE.OrbitControls(camera, canvasElement);
    controls.update();
    
    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    const ambientLight = new THREE.AmbientLight(0x333333);
    scene.add(ambientLight);

    const loader = new THREE.GLTFLoader();
    loader.setCrossOrigin('anonymous');

    //loader.load('https://cx20.github.io/gltf-test/tutorialModels/BoomBoxWithAxes/glTF/BoomBoxWithAxes.gltf', (gltf) => {
    //loader.load('https://cx20.github.io/gltf-test/sampleModels/Box/glTF/Box.gltf', (gltf) => {
        loader.load('https://cx20.github.io/gltf-test/sampleModels/BoxVertexColors/glTF/BoxVertexColors.gltf', (gltf) => {
        const model = gltf.scene;
        enemy = model;
        scene.add(enemy);
  
        animate();
    });

    let axis = new THREE.AxesHelper(1000);
    scene.add(axis);
    
    let lissajous = createLissajousMesh();
    scene.add(lissajous);
    
    function animate(timestamp) {
        const A = 1;
        const B = 4;
        let time = timestamp/20;
        enemy.position.x = 3.0 * Math.sin(A * Math.PI * time / 180);
        enemy.position.y = 1.5 * Math.cos(B * Math.PI * time / 180);

        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }

    function createLissajousMesh() {
        let MAX = 360;
        let A = 1.0;
        let B = 4.0;

        let geometry = new THREE.BufferGeometry();
        let...