프론트엔드 첫걸음

npm,webpack을 사용하지 않고 three.js 사용하기 본문

개발 공부/three.js

npm,webpack을 사용하지 않고 three.js 사용하기

차정 2023. 3. 11. 23:46
  1. three.js-master.zip 다운로드

https://threejs.org/

[Three.js – JavaScript 3D Library

threejs.org](https://threejs.org/)

  1. js 파일 직접 참조 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
</head>

<body>
    <canvas id="three-canvas"></canvas>

    <script src="./main.js"></script> 
</body>


</html>
  1. 참조하는 js 파일에 다운받은 three.js 코어 파일 경로 적어줌

main.js

//import * as THREE from "three";
import * as THREE from "./three.module.js";
//import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import * as THREE from "./OrbitControls.js";
  1. import ~~ from 'three' 였던 부분 파일경로로 치환

Orbitcontrols.js

import {
    EventDIspatcher,
    MOUSE,
    Quaternion,
    Spherical,
    TOUCH,
    Vector2,
    Vector3
//} from 'three';
} from './three.module.js';

three.js로 시작하는 3D 인터랙티브 웹 강의 참고함

'개발 공부 > three.js' 카테고리의 다른 글

gsap을 사용해서 3D 객체에 간단한 애니메이션 효과 주기  (0) 2023.05.12
OrbitControls  (0) 2023.05.12
Renderer 리사이징  (0) 2023.05.12
WebGLRenderer  (0) 2023.03.12
Addons  (0) 2023.03.11
'개발 공부/three.js' Related Articles more